Rafael Fernandes
AdamModus
@AdamModus
https://adammode.xyz
Привет, товарищи!
That's me!
Rabobank
Has its own thread (remember web workers?)
No DOM access!
Caching
Versioning
Allows offline functionality
Able to intercept fetch requests
Useful in slow connectivity scenarios / li-fi
It's still all javascript!
web page
server
SW.js
web page
server
Cache storage (sw cache)
SW.js
web page
server
Cache storage (sw cache)
Offline first philosophy:
Checking availability
Registering a service worker
Yep, it's that easy!
Careful with your scope!
First event, triggered as soon as it executes
Once per service worker
Opportunity to start caching before being able to control clients
The promise passed to event.waitUntil() tells the browser when instalation is successful
If promise rejects, install has failed and service worker is thrown away :(
Ready to control clients
Does not guarantee that the page that called .register() will be controlled
If a page loads without a service worker, neither will its sub-resources. If you load a second time though, fetch events will be intercepted.
Handle push and sync
Will be triggered after version has changed
Allows to set up a new cache without overwriting current one, which the "old" service worker is using
Some cache might not be version specific (avatars, logo, etc.)
Activation is delayed until existing service worker no longer controls clients
Guarantees only one version of the service worker is running
Refreshing might not be enough.
The current page doesn't go away until the response headers have been received, and even if response has a Content-Disposition header.
Similar to how Chrome updates.
When old service worker is gone
New service worker can control clients
Time to migrate databases / clear caches
Please do delete old caches!
When old service worker is gone
New service worker can control clients
It's also possible to force an update via code!
Callbacks for state changes
Client finding when the controller has changed
You can detect when you're online and offline!
Readable streams - the new boy on the block:
Browsers are already pretty good at interpreting streams
Streaming HTML, in collusion with best practices (e.g. inline CSS) can drastically increase First Meaningful Paint time
Useful gist: https://gist.github.com/jakearchibald/64e26e7a1d9b06b3fa3ec0383f2b1f91
Progressive Web App experiment available at: