Created
January 15, 2024 22:22
-
-
Save prof3ssorSt3v3/49a890e24a121b7ac24305f21f0c2875 to your computer and use it in GitHub Desktop.
Starter code for Service Worker Assignment January 2024
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 name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Syncing Data Page</title> | |
| <script src="./js/main.js" type="module"></script> | |
| <link rel="stylesheet" href="./css/main.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Syncing Data</h1> | |
| </header> | |
| <main> | |
| <h2></h2> | |
| <ul id="cards"></ul> | |
| </main> | |
| </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
| /* @import a font from google fonts */ | |
| :root { | |
| --background-img: var(''); | |
| /* so you can display avatars as background images */ | |
| } | |
| html { | |
| } | |
| body { | |
| } | |
| .cards { | |
| } | |
| .card { | |
| background-image: var(--background-img); | |
| } |
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
| document.addEventListener('DOMContentLoaded', () => { | |
| //register the service worker and add message event listener | |
| //listen for navigation popstate event | |
| //get the data for the page | |
| //add click listener to #cards | |
| }); | |
| function registerSW() {} | |
| function getData() {} | |
| function handleCardClicks() {} | |
| function showCards() {} | |
| function sendMessageToSW() {} | |
| function receiveMessageFromSW() {} |
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 version = '1'; | |
| const cacheName = `YOURNAME-${version}`; | |
| self.addEventListener('install', (ev) => { | |
| //cache static files, if needed | |
| }); | |
| self.addEventListener('activate', (ev) => { | |
| //clear old caches, if desired | |
| }); | |
| self.addEventListener('fetch', (ev) => { | |
| //handle all fetch requests | |
| }); | |
| self.addEventListener('message', (ev) => { | |
| //listen for messages from the main thread | |
| }); | |
| function sendMessageToMain() { | |
| //send a message to the main threads of all clients | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment