Advanced Service Worker / PWA with Google Workbox

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. Agenda
Google Workbox2 10/2/2018
Why should I care?
PWA, Service Worker, Manifest
Google Workbox

3. Why should I care
Google Workbox3 10/2/2018
Performance
Resilience
Enhance PWA

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. 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. 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. 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. 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. 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. 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. 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. Google Workbox
Google Workbox12 10/2/2018

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. 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. 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. 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. 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. Strategy: Stale-While-Revalidate
Google Workbox18 10/2/2018

19. Cache First (Cache Falling Back to Network)
Google Workbox19 10/2/2018

20. Strategy: Network First (Network Falling
Back to Cache)
Google Workbox20 10/2/2018

21. Other Strategies
Google Workbox21 10/2/2018
 Network Only
 Cache Only
https://developers.google.com/web/tools/workbox/modules/workbox-strategies

22. Workbox-Build
Google Workbox22 10/2/2018
 todo
Workbox cli Webpack plugin Workbox-build
npm scripts X
webpack X
Grunt, Gulp X

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. 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. 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. 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. 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. 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. 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