Introduction to PWAs & New JS Frameworks for Mobile

1. #BrightonSEO @goutaste Emily Grossman MobileMoxie Introduc:on to PWAs and JavaScript Frameworks @goutaste hEp://www.slideshare.net/mobilemoxie

2. #BrightonSEO @goutaste JavaScript enabled the web to create full, interactive applications… mostly

3. #BrightonSEO @goutaste Some of the “native app” features were still lacking Responsive Secure Fast Downloadable Works Oﬄine Push No:ﬁca:ons

4. #BrightonSEO @goutaste Responsive Secure Fast Downloadable Works Oﬄine Push No:ﬁca:ons Progressive Web Apps (PWAs) Change This

5. #BrightonSEO @goutaste The App-Like Web: Progressive Web Apps @suzzicks bit.ly/cindy-mozcon-2016

6. #BrightonSEO @goutaste Offline in Action

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. #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. #BrightonSEO @goutaste THIS JUST IN

10. #BrightonSEO @goutaste Basic Technical Reqs

11. #BrightonSEO @goutaste 1. App Manifest hEp://bit.ly/webapp-manifest Chrome Dev ToolsViewJSON ﬁle you link to in your <head>

12. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeﬀposnick

16. #BrightonSEO @goutaste 3. https Mobile Friendly Website

17. #BrightonSEO @goutaste

18. #BrightonSEO @goutaste You don’t need a JS framework

19. #BrightonSEO @goutaste But many web apps are easier to build if you do use one.

20. #BrightonSEO @goutaste And some frameworks are easier to make “PWA ready” than others

21. #BrightonSEO @goutaste Meet the Vue, Preact, React CLIs Preact CLI @addyosmani Watch Addy Intro these: hEps://youtu.be/aCMbSyngXB4

22. #BrightonSEO @goutaste 3 PWA Optimizations to Discuss Today: 1. Speed & Performance 2. Measurement 3. Suppor7ng Older/ Other Browsers

23. #BrightonSEO @goutaste 1. Speed & Performance 3. Browser Support Source: @lukew

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. #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. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani How much is taken up by your framework? @addyosmani hEp://bit.ly/pwas-the-new-normal

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. #BrightonSEO @goutaste 1. Speed & Performance Service Workers Can Speed Up Sites on Repeat Views

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. #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 ofﬂine” button) hEp://bit.ly/sw-caching

31. #BrightonSEO @goutaste 1. Speed & Performance But That Doesn’t MeanYou Are Done & Can Ignore Performance

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. #BrightonSEO @goutaste 1. Speed & Performance bit.ly/rel-preload-demo VIDEO: bit.ly/rel-preload-demo

34. #BrightonSEO @goutaste 1. Speed & Performance But I’m Doing SSR & My First Paint Times Are ROCKING “ “ - Someone in the audience

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. #BrightonSEO @goutaste 1. Speed & Performance TTI has a high correlation with conversion rates bit.ly/google-measure-performance

37. #BrightonSEO @goutaste 1. Speed & Performance Optimize for TTI: Codesplitting READ THIS TO START: hEps://survivejs.com/webpack/building/code-spliing/

38. #BrightonSEO @goutaste 1. Speed & Performance Subjective Performance How do we make waits feel faster?

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. #BrightonSEO @goutaste 1. Speed & Performance Progress Bars hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

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. #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. #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-ﬁtch-ﬂuent 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. #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-ﬁtch-ﬂuent

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-ﬁtch-ﬂuent

46. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement

47. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Installs” from the Chrome PWA Install Banner

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. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Launches” Add a tracking parameter to your “start_url” in the App Manifest

50. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement bit.ly/track-oﬄine How Do You Record Offline “Traffic”?

51. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring Push Notifications bit.ly/GA-push-tracking

52. #BrightonSEO @goutaste 3. Supporting Old & Other Browsers 1. Speed & Performance 2. Measurement 3. Browser Support

53. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support

54. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support What is a Polyfill?

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 ﬁll the hole in the browser where the technology needed to be.”

56. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Other & Older Browsers (cough cough Chrome 41 cough cough) “ “

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-Polyﬁlls

58. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Safari & Older Browsers hEps://github.com/mathiasbynens/cache-polyﬁll

59. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Official Safari Support is Coming “Soon”… hEps://jakearchibald.github.io/isserviceworkerready/

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&quo

Introduction to PWAs & New JS Frameworks for Mobile

Introduction to PWAs & New JS Frameworks for Mobile

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Introduction to PWAs & New JS Frameworks for Mobile

Similar to Introduction to PWAs & New JS Frameworks for Mobile(20)

More from MobileMoxie

More from MobileMoxie(20)

Recently uploaded

Recently uploaded(20)

Introduction to PWAs & New JS Frameworks for Mobile