How to cache, fetch files & remove old cache on service worker?
Let's follow the code below :
index.html
<!-- Cache & Fetch Files on Service Worker Example ----------------------------------- Step 1 : Create file index.html & sw.js Step 2 : Put the file you want to cache Step 3 : You need to run this app at http://{host} Step 4 : Done ----------------------------------- Reference : - https://developers.google.com/web/fundamentals/primers/service-workers - https://stackoverflow.com/a/33705250/9278668 - https://stackoverflow.com/q/46865552/9278668 - https://kotakode.com/pertanyaan/1556/mengatasi-uncaught-(in-promise)-typeerror%3A-request-failed-pada-web-pwa --> <html> <head> <title>Cache & Fetch Files on Service Worker Example</title> </head> <body> <h1>Cache & Fetch Files on Service Worker Example</h1> <button onclick="installServiceWorker()">Install & Init Cache on Service Worker</button> <button onclick="uninstallServiceWorker()">Uninstall Service Worker</button> <button onclick="inspectServiceWorker()">Inspect Service Worker</button> <br /><br /> Open : <a href="chrome://inspect/#service-workers">chrome://inspect/#service-workers</a> for <b>inspect</b> <i>service worker</i> in google chrome <br /><br /> <img src="sw-lifecycle.png"> <br /> <img src="sw-cache-lifecycle.jpg" width="500"> <br /> <img src="img/service-worker.png"> <br /> </body> </html> <script type="text/javascript"> function installServiceWorker() { if('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('[BROWSER] - Service worker registration successful with scope : ' + registration.scope); }, function(err) { console.error('[BROWSER] - Service worker registration failed :', err); }); } } function uninstallServiceWorker() { if('serviceWorker' in navigator) { navigator.serviceWorker.getRegistrations().then(function(registrations) { for(let registration of registrations) { console.log('[BROWSER] - Uninstalled service worker successful.', registration); registration.unregister(); } }); } } function inspectServiceWorker() { alert('Open -> chrome://inspect/#service-workers'); window.location = 'chrome://inspect/#service-workers'; } </script>
sw.js
const CACHE_NAME = 'webapp-v1'; const CACHE_FILES = [ '/sw-lifecycle.png', '/sw-cache-lifecycle.jpg' ]; self.addEventListener('install', event => { console.log('[SERVICE-WORKER] - Service worker installed successful.'); event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(CACHE_FILES)) .then(self.skipWaiting()) .catch(err => console.error('[SERVICE-WORKER] - Error trying to pre-fetch cache files :', err)) ); }); self.addEventListener("activate", (event) => { console.log('[SERVICE-WORKER] - Service worker activated'); // delete if cache name is undeclared event.waitUntil( caches.keys().then((cacheFiles) => { return Promise.all( cacheFiles.map((cache) => { if (cache !== CACHE_NAME) { console.log('[SERVICE-WORKER] - Clearing old cache :', cache); return caches.delete(cache); } }) ); }) ); }); self.addEventListener('fetch', event => { if (!event.request.url.startsWith(self.location.origin)) return; console.log('[SERVICE-WORKER] - Fetch event on :', event.request.url); event.respondWith( caches.match(event.request).then(response => { console.info('[SERVICE-WORKER] - Responded to ', event.request.url, 'with', response ? 'cache hit.' : 'fetch.'); return response || fetch(event.request); }).catch(err => { console.error('[SERVICE-WORKER] - Error with match or fetch:', err); }) ); });
You need run this app on http://{host} .
For developer tools, you can inspect the service workers at chrome://inspect/#service-workers
Reference :
- Service Worker Fundamental - Developers.Google.com
- Removing Service Worker Programmatically - StackOverflow.com
- Cache & Fetch Files on Service Worker - StackOverflow.com
- Remove Old Cache on Service Worker - KotaKode.com
0 komentar: