"Service Worker: Let Your Web App Feel Like a Native "
5 likes8,761 views
Service workers allow web applications to work offline by intercepting network requests, caching responses, and serving cached resources when there is no network connection. They also handle background synchronization and push notifications. Key capabilities include making apps available offline, controlling the cache and network requests, and subscribing to push notifications. Service workers operate separately from the main thread of the page, intercepting and modifying fetch events to return cached responses when available.
![var staticVersion = 1;
self.addEventListener('install', function(event) {
var urlsToCache = ['/', '/app.css', '/app.js', '/vendor.js'];
event.waitUntil(
caches.open('static-cache-v' + staticVersion).then(function(cache){
return cache.addAll(urlsToCache);
});
);
});
Installing The App
1
2
3
4
5
6
7
8
9](https://image.slidesharecdn.com/zozuliak-160419155127/85/Service-Worker-Let-Your-Web-App-Feel-Like-a-Native-13-320.jpg)
"Service Worker: Let Your Web App Feel Like a Native "
- 1. Front-End Developer @ DataXu/RailsReactor
- 2. Who is mr. ServiceWorker? Service Worker - is a new JavaScript API, special type of Web Worker Web Worker - script running in background in separate thread
- 3. To fill the gap between web and native apps in context of offline-first approach and background operations. What is the purpose of ServiceWorker?
- 4. It is about not treating offline like an error What Is Offline First?
- 5. Offline as error :( :( :(☹ ☹ ☹ Offline first☺☺☺ Facebook - News Feed
- 6. Facebook - Commenting Offline as error :( :( :( Offline first☺☺☺
- 7. ● making apps available offline - install/update ● full control over app caches ● full control over network requests ● subscribing to push notifications ● background synchronization What Service Worker Offers?
- 8. navigator.serviceWorker.getRegistration().then(function (registration) { if (!registration) { navigator.serviceWorker.register('/service-worker.js').then(function (registration) { console.log('SW registration successful'); }).catch(function (err) { console.log('SW Registration failed: ', err); }); } }); Registering Service Worker 1 2 3 4 5 6 7 8 9
- 9. Service Worker Registration Browser Network Service Worker importScripts( 'foo.js','bar.js' ); Application navigator.serviceWorker .register('/service-worker.js') GET /service-worker.js 200 OK /service-worker.js GET /foo.js GET /bar.js 200 OK /foo.js 200 OK /bar.js Service Worker Registration
- 10. ● navigator.serviceWorker - a place for SW API ● SW is a separate single file ● SW supports importScripts() ● SW can’t be registered from other domain ● https is required, but localhost is white-listed ● SW doesn’t have access to main app context ● SW is cached and available offline Service Worker Gotchas
- 11. Alright, let’s install the App!
- 12. Service Worker Install Event Browser Network Service Worker Fire ”install” event GET /service-worker.js 200 OK /service-worker.js Is SW chang ed? Yes http://somesite.org/ Is SW regist ered? Yes Application Register SW No
- 13. var staticVersion = 1; self.addEventListener('install', function(event) { var urlsToCache = ['/', '/app.css', '/app.js', '/vendor.js']; event.waitUntil( caches.open('static-cache-v' + staticVersion).then(function(cache){ return cache.addAll(urlsToCache); }); ); }); Installing The App 1 2 3 4 5 6 7 8 9
- 14. Service Worker - Installing App Browser Network Service Worker GET urlsToCache 200 OK urlsToCache Caches caches.open( 'static-cache-v1' ) .then(function(cache){ }); return cache.addAll( urlsToCache );
- 15. ● Install - SW event that is fired when SW considered updated ● Install is fired on page load if SW content is changed ● ExtendableEvent - API allowing to pause event processing ● window.caches - place for Cache API ● All requests made from Caches and SW are processed by “classic” browser caching mechanisms (304, ETag, cache-control, and so on) Installing The App Gotchas
- 16. Great, let’s now serve the App!
- 17. self.addEventListener('fetch', function(event) { event.respondWith( caches.open('static-cache-v' + staticVersion).then(function(cache) { return cache.match(event.request) }).then(function(cachedResponse) { return cachedResponse || fetch(event.request); }); ); }); Serving Installed App 1 2 3 4 5 6 7 8 9
- 18. Service Worker - Serving Installed App Browser Network Service Worker Fetch event.request Caches caches.open( 'static-cache-v1' ) .then(function(cache){ }) return cache.match( event.request ); .then(function(cachedResponse) { }); Application Response Use cached response Make network request Use network response Fire ”fetch” event return cachedResp || fetch(event.request);
- 19. ● FetchEvent - new type of event that allows to intercept network requests ● Everything is a Promise when it comes to Service Worker Serving Installed App Gotchas
- 20. And it is not only about Offline-First
- 21. It’s about speeding your app at all Network, 2ms ping, 100Mb/s ServiceWorker, ping and loading speed depends only on system performance
- 22. OK, and if we want to clean old stuff?
- 23. self.addEventListener('activate', function(event) { event.waitUntil(caches.keys().then(function(cacheNames) { return Promise.all(cacheNames.map(function(cacheName) { if (cacheName.startsWith('static-cache-v') && !cacheName.endsWith(staticVersion)) { return caches.delete(cacheName); } })); })); }); Cleaning Old App Stuff 1 2 3 4 5 6 7 8 9 10
- 24. ● Activate event is fired when new SW is taking control over the page and can be used to clean up the old version stuff ● Service Worker has two update modes - cold (default) and hot ● In cold mode SW is activated when all the pages with current active worker are closed and new page is opened ● In hot mode activate is fired just after install is finished Updating The App Gotchas
- 25. Cool, let’s now notify the user about update!
- 26. function sendToClients(message) { return self.clients.matchAll({includeUncontrolled: true}) .then(function(clients) { clients.forEach(function(client) { client.postMessage(message); }); }); } Sending Messages To Client - Service Worker Side 1 2 3 4 5 6 7 8
- 27. navigator.serviceWorker.addEventListener('message', function(event) { // event.data is the message we received console.log(event.data); }); Sending Messages To Client - Application Side
- 28. event.respondWith( fetch(event.request).then(function(response) { return response.text().then(function(responseText) { return new Response( responseText.replace(/foo/g, 'bar'), {headers: response.headers} ); }); }) ); Modifying The Response 1 2 3 4 5 6 7 8 9 10
- 29. Fetch - new API for network requests. It is based on Promise. Say “bye- bye” to callback based XHRs. ExtendableEvent - API allowing to pause event processing Response - API for working with network responses Request - API for working with network responses Cache - API for working with network caches New APIs That Come With SW
- 30. ● We can intercept all network requests ● We can respond to requests whatever way we want ● We can fully and flexibly control network cache ● It’s network interceptor running right in browser! Gotchas
- 31. And it is not even everything!
- 32. Push Messages
- 33. Push Messages Push messages is a really HUGE topic. There is a great article on Google Dev Site and nice simple demo: http://bit.ly/web-push-article http://bit.ly/simple-push-demo
- 34. Background Sync ● Gives the ability to postpone tasks until user has connectivity ● Now in state of draft, available only in Chrome 49+, and a subject to change.
- 36. Service Worker Browser Support Chrome - very good (most features) Firefox - very good (most features) Opera - good (key features) IE - in active development Safari - optimistic (no support, under consideration)
- 37. Service Worker Browser Support http://bit.ly/sw-support
- 38. Resources ● Introduction To Service Worker on HTML5 Rocks : http://www.html5rocks.com/en/tutorials/service-worker/introduction/ ● Developer Guide on Chromium site: https://www.chromium.org/blink/serviceworker ● Service Worker Cookbook by Mozilla: https://serviceworke.rs/ ● Is Service Worker Ready? by Jake Archibald (a loooot of stuff there): https://jakearchibald.github.io/isserviceworkerready/
- 39. Resources ● Service Worker Libraries maintained by Google: https://developers.google.com/web/tools/service-worker-libraries/ ● Instant Loading Web Apps with An Application Shell Architecture https://developers.google.com/web/updates/2015/11/app-shell ● Sample project (played a little bit) http://bit.ly/sw-application
- 40. Now go, grab latest Chrome or Firefox and try it!
- 41. But remember - with big power comes big responsibility!