Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to PWAs & New JS Frameworks for Mobile

13,985 views

Published on

Emily Grossman's talk about PWAs from BrightonSEO September 2017

Video slides have been replaced by a screenshot with links to the videos or their original sources.

Published in: Marketing
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to PWAs & New JS Frameworks for Mobile

  1. 1. #BrightonSEO @goutaste Emily Grossman MobileMoxie Introduc:on to PWAs and JavaScript Frameworks @goutaste hEp://www.slideshare.net/mobilemoxie
  2. 2. #BrightonSEO @goutaste JavaScript enabled the web to create full, interactive applications… mostly
  3. 3. #BrightonSEO @goutaste Some of the “native app” features were still lacking Responsive Secure Fast Downloadable Works Offline Push No:fica:ons
  4. 4. #BrightonSEO @goutaste Responsive Secure Fast Downloadable Works Offline Push No:fica:ons Progressive Web Apps (PWAs) Change This
  5. 5. #BrightonSEO @goutaste The App-Like Web: Progressive Web Apps @suzzicks bit.ly/cindy-mozcon-2016
  6. 6. #BrightonSEO @goutaste Offline in Action
  7. 7. #BrightonSEO @goutaste PWAs = Death to the Dino (Someone else made this illustra:on, and I photographed it. Now I cannot remember who. SORRY.)
  8. 8. #BrightonSEO @goutaste Why Do People Like PWAs? Mobile sales increased by 18% YoY 43% increase in sessions/ user 100% increase in session dura:on 80% improvement in load :me 30% higher Conversion Rate than na:ve app in Tier 3 ci:es 20% of PWA bookings are from users who’d uninstalled na:ve app Homepage loads completely in .8 seconds Customer acquisi:on cost is 10X less Shoppers spend 20% more ?me than on previous mobile site 40% lower bounce rate than on previous mobile site hEps://www.pwastats.com/
  9. 9. #BrightonSEO @goutaste THIS JUST IN
  10. 10. #BrightonSEO @goutaste Basic Technical Reqs
  11. 11. #BrightonSEO @goutaste 1. App Manifest hEp://bit.ly/webapp-manifest Chrome Dev ToolsViewJSON file you link to in your <head>
  12. 12. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  13. 13. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  14. 14. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  15. 15. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  16. 16. #BrightonSEO @goutaste 3. https Mobile Friendly Website
  17. 17. #BrightonSEO @goutaste
  18. 18. #BrightonSEO @goutaste You don’t need a JS framework
  19. 19. #BrightonSEO @goutaste But many web apps are easier to build if you do use one.
  20. 20. #BrightonSEO @goutaste And some frameworks are easier to make “PWA ready” than others
  21. 21. #BrightonSEO @goutaste Meet the Vue, Preact, React CLIs Preact CLI @addyosmani Watch Addy Intro these: hEps://youtu.be/aCMbSyngXB4
  22. 22. #BrightonSEO @goutaste 3 PWA Optimizations to Discuss Today: 1. Speed & Performance 2. Measurement 3. Suppor7ng Older/ Other Browsers
  23. 23. #BrightonSEO @goutaste 1. Speed & Performance 3. Browser Support Source: @lukew
  24. 24. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani “The bloat of your baseline defines how much headroom you have for app code” How much is taken up by your framework? hEp://bit.ly/pwas-the-new-normal
  25. 25. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani “The bloat of your baseline defines how much headroom you have for app code” How much is taken up by your framework? @addyosmani hEp://bit.ly/pwas-the-new-normal
  26. 26. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani How much is taken up by your framework? @addyosmani hEp://bit.ly/pwas-the-new-normal
  27. 27. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani “The bloat of your baseline defines how much headroom you have for app code” How much is taken up by your framework? @addyosmani hEp://bit.ly/pwas-the-new-normal
  28. 28. #BrightonSEO @goutaste 1. Speed & Performance Service Workers Can Speed Up Sites on Repeat Views
  29. 29. #BrightonSEO @goutaste self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll( [ '/css/bootstrap.css', '/css/main.css', '/js/bootstrap.min.js', '/js/jquery.min.js', '/offline.html' ] ); }) ); }); 1. Speed & Performance Set UpYour Service Worker to Cache Essential Assets On Service Worker Install Event… hEp://bit.ly/sw-caching
  30. 30. #BrightonSEO @goutaste 1. Speed & Performance Set UpYour Service Worker to Cache Essential Assets document.querySelector('.cache-article').addEventListener('click', function(event) { event.preventDefault(); var id = this.dataset.articleId; caches.open('mysite-article-' + id).then(function(cache) { fetch('/get-article-urls?id=' + id).then(function(response) { // /get-article-urls returns a JSON-encoded array of // resource URLs that a given article depends on return response.json(); }).then(function(urls) { cache.addAll(urls); }); }); }); On user interaction… (ex.“save for offline” button) hEp://bit.ly/sw-caching
  31. 31. #BrightonSEO @goutaste 1. Speed & Performance But That Doesn’t MeanYou Are Done & Can Ignore Performance
  32. 32. #BrightonSEO @goutaste 1. Speed & Performance Optimize for Fast First Paint Pre-load is like saying, “Hey, browser! Here’s a resource you’re going to need later on, so start loading it now.” •  Pre-load can specify the download “as” = •  "script", •  "style", •  "image", •  "media", •  "document” bit.ly/what-is-rel-preload HTTP/2 + Preload = Moves the ‘start download’ time of a critical asset closer to initial request
  33. 33. #BrightonSEO @goutaste 1. Speed & Performance bit.ly/rel-preload-demo VIDEO: bit.ly/rel-preload-demo
  34. 34. #BrightonSEO @goutaste 1. Speed & Performance But I’m Doing SSR & My First Paint Times Are ROCKING “ “ - Someone in the audience
  35. 35. #BrightonSEO @goutaste One of the Issues With Server-Side Rendering is The Trade- Off With Time to Interactive Simulated Slow Network hEps://youtu.be/6Ljq-Jn-EgU VIDEO: hEps://youtu.be/6Ljq-Jn-EgU
  36. 36. #BrightonSEO @goutaste 1. Speed & Performance TTI has a high correlation with conversion rates bit.ly/google-measure-performance
  37. 37. #BrightonSEO @goutaste 1. Speed & Performance Optimize for TTI: Codesplitting READ THIS TO START: hEps://survivejs.com/webpack/building/code-spliing/
  38. 38. #BrightonSEO @goutaste 1. Speed & Performance Subjective Performance How do we make waits feel faster?
  39. 39. #BrightonSEO @goutaste 1. Speed & Performance For 2 Sec+ Waits: Progress Bars Chris Harrison, ZhiquanYeo, Scott E. Hudson Carnegie Mellon hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf Progress bars with backwards decelerating bands feel 12% faster
  40. 40. #BrightonSEO @goutaste 1. Speed & Performance Progress Bars hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  41. 41. #BrightonSEO @goutaste 1. Speed & Performance Predictive Preloading**unfortunately a desktop-only trick hEps://github.com/SamKnows/futurelink hEps://github.com/SamKnows/vue-futurelink Optimize for Next Page Load
  42. 42. #BrightonSEO @goutaste 1. Speed & Performance Predictive Preloading**unfortunately a desktop-only trick hEps://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee VIDEO: see link below
  43. 43. #BrightonSEO @goutaste 1. Speed & Performance “React As Soon As User Indicates Intent” Cut Down on Click Latency Experiment by Eli Fitch: Track your reac7on 7me on ‘mousedown’ vs. ‘click ’ hNp://bit.ly/eli-fitch-fluent let startTime; $('.button--onclick').on('mousedown', startTimer); $('.button--onclick').on('click', endTimer); function startTimer() { startTime = Date.now(); } function endTimer() { const nowish = Date.now(); const timey = nowish - startTime; $('.readout').html(`Mousedown fired <span class="bold">${timey}ms</span> before click event`); }
  44. 44. #BrightonSEO @goutaste 1. Speed & Performance “React As Soon As User Indicates Intent” Cut Down on Click Latency “Mousedown gives you a 100 – 150ms head start”-Eli Fitch hEp://bit.ly/eli-fitch-fluent
  45. 45. #BrightonSEO @goutaste 1. Speed & Performance “React As Soon As User Indicates Intent” Cut Down on Click Latency “For touch screens, begin on touchstart & cancel on touchmove” -Eli Fitch hEp://bit.ly/eli-fitch-fluent
  46. 46. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement
  47. 47. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Installs” from the Chrome PWA Install Banner
  48. 48. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Installs” window.addEventListener('beforeinstallprompt', function(e) { // beforeinstallprompt Event fired // e.userChoice will return a Promise. // For more details read: https://developers.google.com/web/fundamentals/getting-started/primers/promises e.userChoice.then(function(choiceResult) { console.log(choiceResult.outcome); if(choiceResult.outcome == 'dismissed') { console.log('User cancelled home screen install'); } else { console.log('User added to home screen'); } }); });
  49. 49. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Launches” Add a tracking parameter to your “start_url” in the App Manifest
  50. 50. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement bit.ly/track-offline How Do You Record Offline “Traffic”?
  51. 51. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring Push Notifications bit.ly/GA-push-tracking
  52. 52. #BrightonSEO @goutaste 3. Supporting Old & Other Browsers 1. Speed & Performance 2. Measurement 3. Browser Support
  53. 53. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support
  54. 54. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support What is a Polyfill?
  55. 55. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support “POLY meaning it could be solved using any number of techniques… and FILL would fill the hole in the browser where the technology needed to be.”
  56. 56. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Other & Older Browsers (cough cough Chrome 41 cough cough) “ “
  57. 57. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Other & Older Browsers hEps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  58. 58. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Safari & Older Browsers hEps://github.com/mathiasbynens/cache-polyfill
  59. 59. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Official Safari Support is Coming “Soon”… hEps://jakearchibald.github.io/isserviceworkerready/
  60. 60. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Other Specifics for iOS •  On iOS, Home Screen icons & splash don’t come from App Manifest •  Specify app attributes with link tags in the <head>: –  Icon: <link rel="apple-touch-icon" href="/custom_icon.png"> –  Launch Screen Image: <link rel="apple-touch-startup-image" href="/ launch.png"> –  App Name: <meta name="apple-mobile-web-app-title" content="AppTitle"> –  Enable stand-alone mode: <meta name="apple-mobile-web-app- capable" content="yes"> –  Change status bar color: <meta name="apple-mobile-web-app-status- bar-style" content="black”> •  There’s also a Polyfill for ^this: https://github.com/boyofgreen/manUp.js/
  61. 61. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support @goutaste #BrightonSEO
  62. 62. #BrightonSEO @goutaste H/2 Push Is Also Better With Service Workers Initial Load with H/2 Push: Repeat Load with all /push assets coming from the SW cache: More on combining H/2 Push & SWs: hEps://24ways.org/2016/hEp2-server-push-and-service-workers/ Bonus Slide: starter-pack reading on H/2 push with PWAs More on H/2 Push & cache management: hEps://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

×