Service Workers€¦ · Felix Gessert [email protected] Service Workers: The Technology Behind...
Transcript of Service Workers€¦ · Felix Gessert [email protected] Service Workers: The Technology Behind...
![Page 1: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/1.jpg)
Felix Gessert [email protected]
Service Workers: The Technology Behind Progressive Web Apps
Workshop at DAHO.AM 2019
Munich, March 28
![Page 2: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/2.jpg)
What we are going to cover.
PWAs Service Workers Use Case
− Core Features− Building Blocks− Implementation
− Lifecycle− Network Interception− Caching Strategies
Learnings:Service Workers
in Production
![Page 3: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/3.jpg)
Why do(n‘t) we love native apps?
Weak.Great.
On HomescreenIn App StoresLoading FastWork OfflineUse Phone APIsReceive Push Notifications
Need InstallationNot Cross PlatformTedious Release and Update ProcessesMaintaining Multiple Versions
![Page 4: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/4.jpg)
Why do(n‘t) we love native apps?
Weak.Great.
On HomescreenIn App StoresLoading FastWork OfflineUse Phone APIsReceive Push Notifications
Need InstallationNot Cross PlatformTedious Release and Update ProcessesMaintaining Multiple Versions
Progressive Web Apps
Combine the best from native and web apps.
![Page 5: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/5.jpg)
What are ProgressiveWeb Apps?
![Page 6: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/6.jpg)
Progressive Web Apps (PWAs)
Fast Loadsthrough Caching
Offline Mode (Synchronization)
Add-to-Homescreenand Push Notifations
+ +
![Page 7: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/7.jpg)
Try this:
www.baqend.com
![Page 8: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/8.jpg)
Advantages of PWAs
https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Advantages
DiscoverableE.g. in search engines
InstallableEasy access from home screen
LinkableLink into apps through URLs
Network independantOffline mode
ProgressiveEnhance on capable browsers
Re-engageableEngage through Web Push
ResponsiveFit any form factor
SafeHTTPS & recognizable URLs
![Page 9: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/9.jpg)
These apps aren’t packaged and deployed through stores, they’re
just websites that took all the right vitamins.
Alex Russell, Google
![Page 10: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/10.jpg)
Building Blocks of PWAs
1. Manifest 2. Service Worker
PWAs are best practicesand open web standards
Progessively enhancewhen supported
![Page 11: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/11.jpg)
Implementing PWAs
<link rel="manifest" href="/manifest.json">{
"short_name": „DAHO.AM PWA","icons": [{"src": "icon-1x.png", "type": "image/png", "sizes": "48x48"}],
"start_url": "index.html?launcher=true"}
1. Manifest declares Add-to-Homescreen:
PWAs are best practicesand open web standards
Progessively enhancewhen supported
![Page 12: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/12.jpg)
Just Released: Desktop PWAs
Chrome >73 now supportsDesktop PWAs on everyplatform
Customizable installationprocess/UI (with Event beforeinstallprompt)
![Page 13: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/13.jpg)
DEMO I
The Web App Manifest in Action
![Page 14: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/14.jpg)
Implementing PWAs
2. Service Workers for caching & offline mode:
PWAs are best practicesand open web standards
Gracefully degrade whennot supported
CacheSW.js
WebsiteWebApp
Network
![Page 15: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/15.jpg)
Implementing PWAs
3. Add Web Push and Background Sync:
PWAs are best practicesand open web standards
Progressively enhance theuser experience
SyncSW.js
WebsiteWebApp
Network
Push
![Page 16: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/16.jpg)
Typical Architecture: App Shell Model
App Shell: HTML, JS, CSS, imageswith app logic & layout
Content: Fetched on demand & may changemore often
![Page 17: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/17.jpg)
Why PWAs over AMP & Instant Articles?
IndependentTechnology
Work acrossDevices
No Restrictionson Development
Which “fancy” featuresdo and will PWAs support?
![Page 18: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/18.jpg)
Integrate payment.
Web Payment APIs
• Goal: replace traditional checkout forms
• Just ~10 LOC to implementpayment
• Vendor- & Browser-Agnostic
![Page 19: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/19.jpg)
Manage users and logins.
Credentials Management API
1. Click Sign-in → Native Account Chooser
2. Credentials API storesinformation for future use
3. Automatic Sign-in afterwards
![Page 20: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/20.jpg)
Leverage geolocation.
Geofencing
• Notify web app when userleaves or enters a definedarea
• Requires permission
![Page 21: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/21.jpg)
Build conversational interfaces.
Web Speech API
Native Speech Recognition in theBrowser:
annyang.addCommands({'Hello DAHO.AM': () => {
console.log('Hello you.');}
});
![Page 22: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/22.jpg)
Seemless sharing between apps.
Web Share API
• Share site through native share sheet UI
• Service Worker canregister as a Share Target
![Page 23: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/23.jpg)
And many more in the pipeline.Planned Shipping Dates of Chrome PWA Features.
https://www.youtube.com/watch?v=2KhRmFHLuhE (Google I/O 2019)
![Page 24: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/24.jpg)
What are Service Workers?
![Page 25: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/25.jpg)
What are Service Workers?
NetworkService WorkerBrowser Tabs
Programmable Network Proxy, running as a separate Background Process, without any DOM Access.
![Page 26: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/26.jpg)
What do Service Workers do?
NetworkService WorkerBrowser Tabs
• Cache Data (CacheStorage)• Store Data (IndexedDB)
• Receive Push• Respond when Offline
![Page 27: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/27.jpg)
What do Service Workers do?
NetworkService WorkerBrowser Tabs
• Intercept HTTP Requests• Sync Data in Background
• Hide Flaky Connectivity from the User
![Page 28: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/28.jpg)
Browser Support for Service Workers
Supported by >90% of browsers.
Requires TLS Encryption.
![Page 29: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/29.jpg)
Late, but all in: Microsoft
Publish PWAs toMicrosoft Store
or
https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#tqIAYGJrOUcxvCWg.97
Bing Crawls PWAs
Convert toAppX
Microsoft Store
![Page 30: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/30.jpg)
How are Service Workers registered?
<script>navigator.serviceWorker.register('/sw.js');
</script>
NetworkService WorkerBrowser Tabs
![Page 31: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/31.jpg)
What does the lifecycle look like?
self.addEventListener('install', (event) => {// Perform install steps
});
self.addEventListener('activate', (event) => {// Perform activate steps
});
self.addEventListener('fetch', (event) => {// React to fetch event
});
![Page 32: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/32.jpg)
How to communicate with Service Workers?
// Send message to browser tabconst client = await clients.get('id');client.postMessage(someJsonData);
self.addEventListener('push', (event) => {// Receive push notification
});
Fetch, Message, Push
Post Message
Browser Tab
(Web) Push Service
Push Notification
self.addEventListener('message', (event) => {// Receive message
});
![Page 33: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/33.jpg)
Intercepting Network Requests
self.addEventListener('fetch', (event) => {// React to fetch eventconst { 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 });
})());});
There is so much you can do:
• Rewrite Requests• Change Responses• Concat Responses• Cache Responses• Serve Cached Data• …
![Page 34: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/34.jpg)
Service Worker Scope
Request in Scope
Request not in Scope
// Default (and maximum) scope is location of Service Worker// Gets all requests starting with '/path/'navigator.serviceWorker.register('/path/sw.js');
Scope determines which requests go to the Service Worker
![Page 35: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/35.jpg)
Service Worker Scope
Request in Scope
Request not in Scope
// 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/' });
Scope can be restricted but not widened
![Page 36: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/36.jpg)
Service Worker Persistence
• Stores Data Persistently• Stores Structured Data
IndexedDBan actual database in the browser
• Supports Range Queries• Browser Support 94%
![Page 37: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/37.jpg)
Service Worker Background Sync
One-off Sync
• executed when user is online• retried when failed (exponential backoff)
Use Cases• Save file when online again• Send email when online again
Experimental
• executed when online, according toperiod options
Use Cases• Load updates to social media time-
line when browser closed
Periodic Sync
![Page 38: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/38.jpg)
Service Worker Debugging
![Page 39: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/39.jpg)
DEMO II
Looking into Service WorkersIn Chrome Dev Tools
![Page 40: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/40.jpg)
Service Worker Caching
Cache StorageStores Request/Response pairs
Cache Storage• Programmatically managed• Persistent and non-expiring
• Supports only HTTP• Only caches GET requests
(no HEAD)
![Page 41: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/41.jpg)
Caching Strategies – Cache Only
Gets all requests from cache or fails.
![Page 42: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/42.jpg)
Caching Strategies – Cache, Network Fallback
Gets requests from cache & uses network as fallback.
Fallback
![Page 43: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/43.jpg)
Caching Strategies – Network Only
Gets requests from network only.
Fallback
![Page 44: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/44.jpg)
Caching Strategies – Network, Cache Fallback
Gets requests from network, the cache actsas fallback (offline mode).
Fallback
![Page 45: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/45.jpg)
Caching Strategies – Cache, then Network
Gets requests from cache first and from network in background.
First
Second
![Page 46: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/46.jpg)
DEMO III
Building a PWA WithDifferent Caching Strategies
![Page 47: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/47.jpg)
Major Challenge: Cache Coherence
OutdatedOutdated
All strategies either serve outdated data or degrade performance
![Page 48: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/48.jpg)
How we useService Workers
at Baqend
![Page 49: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/49.jpg)
Three things slow web apps down.
2. Network Delays
1. Backend Processing
49
3. Client
![Page 50: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/50.jpg)
Solution: Speed KitService Worker rewrites & accelerates slow requests.
1. Fast 2. Less Processing
![Page 51: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/51.jpg)
The magic: dynamic data is kept up-to-date.Backed by 30 man-years of research.
1 0 11 0 0 10
Learn more.
− 7 years of research & development at theUniversity of Hamburg
− 4 PhDs, >30 studenttheses, >25 researchpublications
51
![Page 52: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/52.jpg)
How Speed Kit leverages Service Workers.
Website withSnippet
Speed KitService Worker
Requests
BaqendService
ExistingBackend
Fast Requests
Sync
Tracking & AdServices
![Page 53: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/53.jpg)
Use case I: optimize images.SW sends client resolution → responsive image.
Device Speed Kit CDN
Images transcoded to WebP
Rescaled to match Screen Size
JPG and PNG Recompression
JPG 1280x640px500 KB
WebP 640x320px100 KB
Width: 640px
![Page 54: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/54.jpg)
VS
BrowserSpeed KitCDN
Warm & FastHTTP/2 Connection
Browser
GoogleAnalytics
FacebookSDK
AmazonImages
3rd Party Servers
Now Before
54
Use case II: re-route 3rd party dependencies.Service Workers can manipulate other domains.
![Page 55: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/55.jpg)
1 4 020
purge(url)
hashB(url)hashA(url)
31 1 110Flat(Counting Bloomfilter)
hashB(url)hashA(url)
SWCache
CDN
1
Use case III: handling cache coherence.
![Page 56: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/56.jpg)
1 4 020
purge(url)
hashB(url)hashA(url)
31 1 110Flat(Counting Bloomfilter)
hashB(url)hashA(url)
SWCache
CDN
1
𝑓 ≈ 1 − 𝑒−𝑘𝑛𝑚
𝑘
𝑘 = ln 2 ⋅ (𝑛
𝑚)
False-Positive
Rate:
Hash-
Functions:
With 20.000 entries and a 5% false positive rate: 11 Kbyte
Consistency: Δ-Atomicity, Read-Your-Writes, Monotonic Reads,
Monotonic Writes, Causal Consistency
Has Time-to-Live (expiration)
Use case III: handling cache coherence.
![Page 57: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/57.jpg)
DEMO IV
Implementing Web Push Notifications
![Page 58: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/58.jpg)
Wrap Up.
PWAs Service Workers Use Case
Super cool alternative
to native apps
Powerful programmablenetwork proxy
Speed Kit:Smart CDN though
Service Workers
![Page 59: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/59.jpg)
Learn more aboutthis topic:
https://blog.baqend.com/
![Page 60: Service Workers€¦ · Felix Gessert fg@baqend.com Service Workers: The Technology Behind Progressive Web Apps Workshop at DAHO.AM 2019 Munich, March 28](https://reader034.fdocuments.in/reader034/viewer/2022050505/5f9706936d58822c395a335a/html5/thumbnails/60.jpg)
Recommended Books
https://jakearchibald.com/
https://developers.google.com/web/progressive-web-apps/
Guides & Tutorials
https://blog.baqend.com/
Learn more about Services Workers.
Blogs
https://www.igvita.com/
https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive