SLIDE 1
Erik Witt
Service Workers in Action
35 56
Mobile
Service Workers in Action Building an Offline-Capable Webshop in - - PowerPoint PPT Presentation
Service Workers in Action Building an Offline-Capable Webshop in - - PowerPoint PPT Presentation
Erik Witt Service Workers in Action Building an Offline-Capable Webshop in under 90 minutes 35 56 Mobile Page: https://bit.ly/2p7bA2X Repository: https://github.com/ErikWitt/code-talks19 https://bit.ly/2p7bA2X + +
SLIDE 2
SLIDE 3
SLIDE 4
Page: https://bit.ly/2p7bA2X Repository: https://github.com/ErikWitt/code-talks19
SLIDE 5
https://bit.ly/2p7bA2X
SLIDE 6
SLIDE 7
SLIDE 8
Fast Loads through Caching Offline Mode (Synchronization) Add-to-Homescreen and Push Notifations
+ +
SLIDE 9
SLIDE 10
SLIDE 11
SLIDE 12
SLIDE 13
SLIDE 14
SLIDE 15
SLIDE 16
SLIDE 17
→
SLIDE 18
SLIDE 19
SLIDE 20
SLIDE 21
SLIDE 22
SLIDE 23
SLIDE 24
SLIDE 25
SLIDE 26
SLIDE 27
Supported by >90% of browsers. Requires TLS Encryption.
SLIDE 28
SLIDE 29
self.addEventListener('install', (event) => { // Perform install steps }); self.addEventListener('activate', (event) => { // Perform activate steps }); self.addEventListener('fetch', (event) => { // React to fetch event });
SLIDE 30
// Send message to browser tab const client = await clients.get('id'); client.postMessage(someJsonData); self.addEventListener('push', (event) => { // Receive push notification }); self.addEventListener('message', (event) => { // Receive message });
SLIDE 31
// Default (and maximum) scope is location of Service Worker // Gets all requests starting with '/path/' navigator.serviceWorker.register('/path/sw.js');
SLIDE 32
// Scope option can further limit which requests got to Service Worker // Gets all requests starting with '/path/subpath/' navigator.serviceWorker.register('/path/sw.js', { scope: '/path/subpath/' });
SLIDE 33
self.addEventListener('fetch', (event) => { // React to fetch event const { url } = event.request; event.respondWith((async () => { const request = new Request(url.replace('.com', '.de')) const response = await fetch(request); const text = await response.text(); const newText = text.replace('Goethe', 'Schiller'); return new Response(newText, { status: 200 }); })()); });
SLIDE 34
SLIDE 35
SLIDE 36
SLIDE 37
SLIDE 38
SLIDE 39
SLIDE 40
SLIDE 41
SLIDE 42
SLIDE 43
SLIDE 44
SLIDE 45
SLIDE 46
SLIDE 47
Example
↓ >25% cache hits on HTML in production 1500 entries & 0.0019% false positives → 7 KB size
SLIDE 48
SLIDE 49
SLIDE 50
SLIDE 51
SLIDE 52
SLIDE 53
HTML JS CSS
SLIDE 54
HTML JS CSS HTML
SLIDE 55
SLIDE 56
SLIDE 57
SLIDE 58
▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪
SLIDE 59
SLIDE 60
1 2 3 4 5 6 7 8 9 10
Percentage of Traffic First Paint in Seconds
*comparing appelrath.com Chrome UX report data from October 2018 with January 2019
*
SLIDE 61
SLIDE 62
SLIDE 63
SLIDE 64
Recommended Books
https://jakearchibald.com/ https://developers.google.com/web/progressive-web-apps/
Guides & Tutorials
https://blog.baqend.com/
Blogs
https://www.igvita.com/ https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive
SLIDE 65