Created
March 8, 2021 18:13
-
-
Save prof3ssorSt3v3/337e9a19e03b0adb243e7e53b9e42b08 to your computer and use it in GitHub Desktop.
Introduction to Service Workers code from video
This file contains 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 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 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 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 | |
| }); |
Hi steve griff, In fetch lifecycle Instead of css file log Its showing this url
{...
url: "http://localhost:56493/favicon.ico"
...}
Hi steve griff, In fetch lifecycle Instead of css file log Its showing this url
{... url: "http://localhost:56493/favicon.ico" ...}
Every request that the browser or JS makes will be intercepted by the fetch event in the Service worker. That includes the favicon.ico file, js files, css files, html files, images, json files, etc.
Hi steve griff, In fetch lifecycle Instead of css file log Its showing this url
{... url: "http://localhost:56493/favicon.ico" ...}Every request that the browser or JS makes will be intercepted by the fetch event in the Service worker. That includes the favicon.ico file, js files, css files, html files, images, json files, etc.
Thank you.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
my name is steve griff