Next Step of Introduction 6 ● Go Deeper / Understand Examples Well ● Good Introductions ○ https://serviceworke.rs/ ○ https://jakearchibald.com/2014/offline-cookbook/ ○ http://www.html5rocks.com/ja/tutorials/service- worker/introduction/ ○ More ● Focus on … ○ Registration ○ Update ○ Scope
I'm free to be whatever I 何になるのも俺の自由だ Whatever I choose 何を選ぶのも俺の自由だ And I'll hook the request if I want その気になればリクエストだってフックしてやる 9 https://youtu.be/zUADzarhFyA
oninstall/onactivate self.addEventListener('install', (e) => { console.info('install', e); // do some prepare not affect to v1 // like cache new resouce etc }); self.addEventListener('activate', (e) => { console.info('activate', e); // do some cleanup of v1 // like schema update etc }); 34
register() with scope navigator .serviceWorker .register('worker.js', { scope: '.' }) .then((registration) => { return navigator.serviceWorker.ready; }); 40 master.js ● Controller controls client in scope ● Could register multiple controller in different scope ● But only one Controller for Client always
On insecure origin 45 $ google_chrome \ --user-data-dir=/path/to/js \ --unsafely-treat- insecure-origin-as-secure=http://insecure.example. com ● Register SW to insecure origin ● For Develop only ● But Let’s Encrypt it
tips 46 ● Be friend with Chrome Canaly Dev Tools ● Always Check registration & update ● Design Scope Carefully ● Maintain Cache Carefully ● Never forget save to DB while event lifetime ● Basiclly no code outside event handler ● Start with Implicit Proxy ○ Local Implicit proxy: works same w/o sw ○ Local Orgin Server: generate contents in sw ● Push is not only usecase for sw