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.

TechEvent Advanced Service Worker / PWA with Google Workbox

45 views

Published on

Advanced Service Worker / PWA with Google Workbox

Published in: Technology
  • Be the first to comment

  • Be the first to like this

TechEvent Advanced Service Worker / PWA with Google Workbox

  1. 1. BASEL BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENF HAMBURG KOPENHAGEN LAUSANNE MANNHEIM MÜNCHEN STUTTGART WIEN ZÜRICH Advanced Service Worker / PWA with Google Workbox Patrik Böschenstein, Senior Consultant +41 58 459 52 23 patrik.boeschenstein@trivadis.com @patrikbo TechEvent September 2018
  2. 2. Agenda Google Workbox2 10/2/2018 Why should I care? PWA, Service Worker, Manifest Google Workbox
  3. 3. Why should I care Google Workbox3 10/2/2018 Performance Resilience Enhance PWA
  4. 4. Why Web for Apps? Google Workbox4 10/2/2018 App: Concerned  About app permissions  Amount of storage  Privacy (what is the app doing?) Web  Low Friction  Less storage  Twitter Light PWA: 1MB  Twitter Native app (Android): 28 MB  Twitter Native app (IOS): 124 MB  Privacy on device is not an issue
  5. 5. Web for Apps means low friction Google Workbox5 10/2/2018 Loose 20% on each step Low Friction is the webs secret weapon https://airhorner.com/
  6. 6. Web App vs. Native App Google Workbox6 10/2/2018 Web App Native App Push Notification   Full Screen, Icon on Desktop   Offline Working   Phonebook, Alarms   System Settings   Runs on Desktop  () No App store   Installation experience   1 source code for all devices   Web dev knowledge to build app  
  7. 7. F I R E Fast (rendering) Integrated (in UI, payment) Reliable (slow connection) Engaging (push) Progressive Web App (PWA) Google Workbox7 10/2/2018 Progressive Enhancement: “Combine features offered by most modern browsers with the benefits of a mobile experience.” (Wikipedia)
  8. 8. Service Worker Google Workbox8 10/2/2018  “Background Thread”, works offline  Network proxy (intercept requests)  Handles “Push Notification” in background  Fast & reliable (if properly configured)  Not disruptive in old browsers (but no benefits)  Available in all major browsers
  9. 9. Manifest Google Workbox9 10/2/2018 Metadata for PWA  Icons  Description  Colors  Related Infos <link rel="manifest" href="/manifest.json"> Useful tools:  Generator, based on your site: https://www.pwabuilder.com/  Validator: https://manifest-validator.appspot.com/
  10. 10. manifest.json Google Workbox10 10/2/2018 { "short_name": "Demo", "name": "My Demo PWA", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/maps/?source=pwa", "background_color": "#3367D6", "display": "fullscreen", "theme_color": "#3367D6" }
  11. 11. Compare Terms Google Workbox11 10/2/2018 PWA: “a set of rules”  Desktop icon  Immediate start  Seamless UI  Push Notifications Web App Manifest  Json Configuration File for app-like behavior Service workers  Technology to allow this instance experience https://developers.google.com/web/progressive-web-apps/
  12. 12. Google Workbox Google Workbox12 10/2/2018
  13. 13. What is Google Workbox Google Workbox13 10/2/2018  Libraries and build tools for PWA  Helps to implement Service Worker  Adopt useful cash strategies  Avoid implementation errors  Avoid boilerplate  Cache management  remove complexity  add flexibility  Replaces sw_precache and sw_toolbox https://developers.google.com/web/tools/workbox/
  14. 14. sw.js Google Workbox14 10/2/2018 importScripts('https://storage.googleapis.com/work box-cdn/releases/3.2.0/workbox-sw.js'); workbox.routing.registerRoute( new RegExp('.*.js'), workbox.strategies.cacheFirst() );
  15. 15. sw.js: cache images Google Workbox15 10/2/2018 workbox.routing.registerRoute( // Cache image files /.*.(?:png|jpg|jpeg|svg|gif)/, // Use the cache if it's available workbox.strategies.cacheFirst({ // Use a custom cache name cacheName: 'image-cache', plugins: [ new workbox.expiration.Plugin({ // Cache only 20 images maxEntries: 20, // Cache for a maximum of a week maxAgeSeconds: 7 * 24 * 60 * 60, }) ], }) );
  16. 16. sw.js: PreCache Google Workbox16 10/2/2018 workbox.precaching.precacheAndRoute([ '/styles/index.css', // index.0c9a31.css '/scripts/main.js', // main.0d5770.js { url: '/index.html', revision: '383676' }, ]);
  17. 17. CLI Google Workbox17 10/2/2018 C:pathtoweb> npm i –g workbox-cli C:pathtoweb> workbox wizard importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js"); self.__precacheManifest = [ { "url": "index.html", "revision": "3cc9ceb28924598f87bdc6ea0bfa23ef" }, { "url": "main.css", "revision": "d41d8cd98f00b204e9800998ecf8427e" }, { "url": "main.js", "revision": "b523d4072fbcdebccded8f6b8b9d683f" }, { "url": "rosella-1600_large_2x.jpg", "revision": "4d597f5622d5c8d28028efe48fb211d7" }, { "url": "workbox-config.js", "revision": "79289b03d935e54b891fb3134aa3b33d" } ].concat(self.__precacheManifest || []); workbox.precaching.suppressWarnings(); workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
  18. 18. Strategy: Stale-While-Revalidate Google Workbox18 10/2/2018
  19. 19. Cache First (Cache Falling Back to Network) Google Workbox19 10/2/2018
  20. 20. Strategy: Network First (Network Falling Back to Cache) Google Workbox20 10/2/2018
  21. 21. Other Strategies Google Workbox21 10/2/2018  Network Only  Cache Only https://developers.google.com/web/tools/workbox/modules/workbox-strategies
  22. 22. Workbox-Build Google Workbox22 10/2/2018  todo Workbox cli Webpack plugin Workbox-build npm scripts X webpack X Grunt, Gulp X
  23. 23. Angular ServiceWorker vs. Workbox Google Workbox23 10/2/2018 Angular CLI  Pros:  Install is easy: ng add @angular/pwa  Cons:  Angular >= 5 only  Website changes must be handled manually Workbox  Pros:  Easy to install, Easy to use  Automatically handle web site changes  Know how protection: Works in every web project  Debugging, bug hunting  Professional tool: Ideal for consultancy
  24. 24. Demo Google Workbox24 10/2/2018 1. Implement workbox  Installation CLI  2 steps: 1. Wizard  Config-file 2. Config-file  Service Worker  Implement Service Worker 2. Activate Proxy  Cache backend: json web service 3. WebPack  Show implementation
  25. 25. Save the World Google Workbox25 10/2/2018 http://offlinefirst.org/ “We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past.” Maureen McElaney, JSConf EU 2017 https://www.youtube.com/watch?v=GOdmPaBJqwA
  26. 26. Takeaway 1: Workbox Google Workbox26 10/2/2018  Service Workers With Workbox  Fast and easy to implement and configure  Less copy paste  Guides through the modern web experience  Encourage to use new features
  27. 27. Takeaway 2: Talk Google Workbox27 10/2/2018  PWA “a set of rules”  For PWA use Google Workbox  To save the world can be fun
  28. 28. Session Feedback – now Google Workbox28 10/2/2018 Please use the Trivadis Events mobile app to give feedback on each session Use "My schedule" if you have registered for a session Otherwise use "Agenda" and the search function If the mobile app does not work (or if you have a Windows smartphone), use your smartphone browser – URL: http://trivadis.quickmobileplatform.eu/ – User name: <your_loginname> (such as "svv") – Password: sent by e-mail...
  29. 29. Thank you for saving the world ! Questions ? Patrik Böschenstein Senior Consultant Phone +41 58 459 52 23 patrik.boeschenstein@trivadis.com 10/2/2018 Google Workbox29

×