Download as PDF, PPTX
![#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](https://image.slidesharecdn.com/emily-grossman-brighton-seo-widescreen-final-final-final-170915113111/75/Introduction-to-PWAs-New-JS-Frameworks-for-Mobile-29-2048.jpg)
More Related Content
Similar to Introduction to PWAs & New JS Frameworks for Mobile
More from MobileMoxie
Introduction to PWAs & New JS Frameworks for Mobile
- 1.
- 2. #BrightonSEO @goutaste JavaScript enabled theweb to create full, interactive applications… mostly
- 3. #BrightonSEO @goutaste Some of the“native app” features were still lacking Responsive Secure Fast Downloadable Works Offline Push No:fica:ons
- 4. #BrightonSEO @goutaste Responsive Secure Fast Downloadable Works Offline Push No:fica:ons Progressive Web Apps (PWAs) Change This
- 5. #BrightonSEO @goutaste The App-Like Web: ProgressiveWeb Apps @suzzicks bit.ly/cindy-mozcon-2016
- 6.
- 7. #BrightonSEO @goutaste PWAs = Deathto the Dino (Someone else made this illustra:on, and I photographed it. Now I cannot remember who. SORRY.)
- 8. #BrightonSEO @goutaste Why Do PeopleLike 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.
- 10.
- 11. #BrightonSEO @goutaste 1. App Manifest hEp://bit.ly/webapp-manifest ChromeDev ToolsViewJSON file 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 @jeffposnick
- 13. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
- 14. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
- 15. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
- 16. #BrightonSEO @goutaste 3. https MobileFriendly Website
- 17.
- 18. #BrightonSEO @goutaste You don’t needa JS framework
- 19. #BrightonSEO @goutaste But many webapps are easier to build if you do use one.
- 20. #BrightonSEO @goutaste And some frameworksare 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 Optimizationsto Discuss Today: 1. Speed & Performance 2. Measurement 3. Suppor7ng Older/ Other Browsers
- 23.
- 24. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani “The bloat ofyour 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 ofyour 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 istaken up by your framework? @addyosmani hEp://bit.ly/pwas-the-new-normal
- 27. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani “The bloat ofyour 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.
- 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 ServiceWorker 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. #BrightonSEO @goutaste 1. Speed & Performance But That Doesn’tMeanYou Are Done & Can Ignore Performance
- 32. #BrightonSEO @goutaste 1. Speed & Performance Optimize for FastFirst 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.
- 34. #BrightonSEO @goutaste 1. Speed & Performance But I’m DoingSSR & My First Paint Times Are ROCKING “ “ - Someone in the audience
- 35. #BrightonSEO @goutaste One of the IssuesWith 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.
- 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 wemake 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.
- 41. #BrightonSEO @goutaste 1. Speed & Performance Predictive Preloading**unfortunately adesktop-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 adesktop-only trick hEps://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee VIDEO: see link below
- 43. #BrightonSEO @goutaste 1. Speed & Performance “React As SoonAs 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. #BrightonSEO @goutaste 1. Speed & Performance “React As SoonAs 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. #BrightonSEO @goutaste 1. Speed & Performance “React As SoonAs 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.
- 47. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Installs” fromthe 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 atracking parameter to your “start_url” in the App Manifest
- 50. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement bit.ly/track-offline How DoYou Record Offline “Traffic”?
- 51. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring PushNotifications bit.ly/GA-push-tracking
- 52. #BrightonSEO @goutaste 3. Supporting Old& Other Browsers 1. Speed & Performance 2. Measurement 3. Browser Support
- 53.
- 54.
- 55. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support “POLYmeaning 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. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfillsfor Other & Older Browsers (cough cough Chrome 41 cough cough) “ “
- 57. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills forOther & Older Browsers hEps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- 58. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills forSafari & Older Browsers hEps://github.com/mathiasbynens/cache-polyfill
- 59. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support OfficialSafari Support is Coming “Soon”… hEps://jakearchibald.github.io/isserviceworkerready/
- 60. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support OtherSpecifics 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.
- 62. #BrightonSEO @goutaste H/2 Push Is Also Better With Service Workers InitialLoad 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/