Created
December 8, 2018 06:25
-
-
Save bencord0/723c8cbaa94e85af7122610e930eaf50 to your computer and use it in GitHub Desktop.
Playing with service workers
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
| { | |
| "foo": "bar" | |
| } |
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
| <html> | |
| <meta charset="UTF-8"> | |
| <head><title>Service Workerz!</title></head> | |
| <body> | |
| <button id="go">Go!</button> | |
| <script src="index.js"></script> | |
| </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
| const go = document.getElementById("go"); | |
| go.onclick = async function() { | |
| let response = await fetch("/data.json"); | |
| let payload = await response.json(); | |
| console.log(payload); | |
| } | |
| async function registerServiceWorker() { | |
| try { | |
| await navigator.serviceWorker.register('/sw.js'); | |
| console.log("SW: registered"); | |
| } catch (err) { | |
| console.error("SW: registration failed: " + err); | |
| } | |
| } | |
| registerServiceWorker(); |
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
| self.addEventListener('install', ev => { | |
| console.log("SW: install"); | |
| }); | |
| self.addEventListener('activate', ev => { | |
| console.log("SW: activate"); | |
| clients.claim(); | |
| }); | |
| self.addEventListener('fetch', ev => { | |
| let req = ev.request | |
| console.log(`SW: fetch: ${req.method} ${req.url}`); | |
| // https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent#Methods | |
| // | |
| // If we do nothing, the browser will fetch the resource. | |
| // There is no need to `return fetch(req)`. | |
| // | |
| // `ev` has two methods: | |
| // .respondWith(promise): Skip the browser default fetch if you want to | |
| // replace it with your own implementation, e.g. caching. | |
| // .waitUntil(promise): Extend the lifetime of the event, add more tasks | |
| // beyond returning a response. | |
| // router | |
| let eventUrl = new URL(req.url); | |
| if (eventUrl.pathname === "/data.json") { | |
| ev.respondWith(async function() { | |
| return new Response('{"Foo":"Bar"}'); | |
| }()); // don't forget to kick-off the async function to get the Promise | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment