-
-
Save walosha/ea7c609800198d412f8bfe5f6c062b05 to your computer and use it in GitHub Desktop.
Introduction to Service Workers code from video
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 APP = { | |
| SW: null, | |
| init() { | |
| //called after DOMContentLoaded | |
| if ('serviceWorker' in navigator) { | |
| // 1. Register a service worker hosted at the root of the | |
| // site using the default scope. | |
| navigator.serviceWorker | |
| .register('/sw.js', { | |
| scope: '/', | |
| }) | |
| .then((registration) => { | |
| APP.SW = | |
| registration.installing || | |
| registration.waiting || | |
| registration.active; | |
| console.log('service worker registered'); | |
| }); | |
| // 2. See if the page is currently has a service worker. | |
| if (navigator.serviceWorker.controller) { | |
| console.log('we have a service worker installed'); | |
| } | |
| // 3. Register a handler to detect when a new or | |
| // updated service worker is installed & activate. | |
| navigator.serviceWorker.oncontrollerchange = (ev) => { | |
| console.log('New service worker activated'); | |
| }; | |
| // 4. remove/unregister service workers | |
| // navigator.serviceWorker.getRegistrations().then((regs) => { | |
| // for (let reg of regs) { | |
| // reg.unregister().then((isUnreg) => console.log(isUnreg)); | |
| // } | |
| // }); | |
| // 5. Listen for messages from the service worker | |
| } else { | |
| console.log('Service workers are not supported.'); | |
| } | |
| }, | |
| }; | |
| document.addEventListener('DOMContentLoaded', APP.init); |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Intro to Service Workers</title> | |
| <link rel="stylesheet" href="css/main.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Intro to Service Workers</h1> | |
| <h2>Registration, Lifecycle, Dev Tools, & Events</h2> | |
| </header> | |
| <main> | |
| <output></output> | |
| </main> | |
| <script defer src="./js/app.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
| html { | |
| font-size: 20px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, | |
| Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| line-height: 1.5; | |
| background-color: #222; | |
| color: #eee; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background-color: inherit; | |
| color: inherit; | |
| } | |
| header, | |
| main { | |
| padding: 1rem 2rem; | |
| } | |
| h1 { | |
| color: orangered; | |
| } | |
| h2 { | |
| color: orange; | |
| } |
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
| //our service worker | |
| // console.log('sw running'); | |
| //new | |
| //console.log({ self }); | |
| self.addEventListener('install', (ev) => { | |
| //service worker is installed. | |
| console.log('installed'); | |
| }); | |
| self.addEventListener('activate', (ev) => { | |
| //service worker is activated | |
| console.log('activated'); | |
| }); | |
| self.addEventListener('fetch', (ev) => { | |
| //service worker intercepted a fetch call | |
| console.log('intercepted a http request', ev.request); | |
| }); | |
| self.addEventListener('message', (ev) => { | |
| //message from webpage | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment