Last active
May 17, 2023 22:43
-
-
Save patrickbrandt/827bf7830411def371f0 to your computer and use it in GitHub Desktop.
Simple Service Worker didactic POC - caching outbound requests
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript"> | |
| if (!navigator.serviceWorker.controller) { | |
| navigator.serviceWorker.register('/sw.js', { scope: '.'}).then(function(registration) { | |
| console.log('ServiceWorker registration successful with scope: ', registration.scope); | |
| window.location.reload(); | |
| }).catch(function(err) { | |
| console.log('ServiceWorker registration failed: ', err); | |
| }); | |
| } else { | |
| console.log('service worker already registered'); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <img src="http://www.banditbrandit.com/Assets/Images/Silhouette.gif"> <!-- gets trapped --> | |
| <img src="Label.gif"> <!-- gets trapped --> | |
| <iframe src="http://www.banditbrandit.com"></iframe> <!-- won't work, as origin domain is different from Service Worker domain --> | |
| </body> | |
| <html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var CACHE_NAME = 'sw-test'; | |
| var installed = false; | |
| // Set the callback for the install step | |
| self.addEventListener('install', function(event) { | |
| console.log('sw installed'); | |
| }); | |
| self.addEventListener('activate', function(event) { | |
| // Calling claim() to force a "controllerchange" event on navigator.serviceWorker | |
| console.log('sw activated'); | |
| event.waitUntil(self.clients.claim()); | |
| }); | |
| self.addEventListener('fetch', function(event) { | |
| console.log('fetch event ocurred for: ', event.request.url); | |
| event.respondWith( | |
| caches.match(event.request) | |
| .then(function(response) { | |
| // Cache hit - return response | |
| if (response) { | |
| return response; | |
| } | |
| // IMPORTANT: Clone the request. A request is a stream and | |
| // can only be consumed once. Since we are consuming this | |
| // once by cache and once by the browser for fetch, we need | |
| // to clone the response | |
| var fetchRequest = event.request.clone(); | |
| return fetch(fetchRequest).then( | |
| function(response) { | |
| // Check if we received a valid response | |
| if(!response || response.status !== 200) { | |
| return response; | |
| } | |
| console.log('response.type ', response.type); | |
| // IMPORTANT: Clone the response. A response is a stream | |
| // and because we want the browser to consume the response | |
| // as well as the cache consuming the response, we need | |
| // to clone it so we have 2 stream. | |
| var responseToCache = response.clone(); | |
| caches.open(CACHE_NAME) | |
| .then(function(cache) { | |
| cache.put(event.request, responseToCache); | |
| }); | |
| return response; | |
| } | |
| ); | |
| }) | |
| ); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Service worker diagnostic pages in Chrome: