Created
April 6, 2023 02:05
-
-
Save prof3ssorSt3v3/be058bdeb0d69e8dc4335e164e2087fe to your computer and use it in GitHub Desktop.
Code from video about custom redirects inside service workers with Response objects
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
| if (navigator.serviceWorker) { | |
| navigator.serviceWorker.register('./sw.js'); | |
| } |
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>Pretend Homepage</title> | |
| <link href="./css/main.css" rel="stylesheet" /> | |
| <script src="./js/app.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1 class="custom">Custom Page</h1> | |
| </header> | |
| <main> | |
| <h2 class="custom">Special Event</h2> | |
| <p>For a limited time only.</p> | |
| <p><button>CLICK HERE</button></p> | |
| <p>Get a special one of a kind deal on our services.</p> | |
| <p>Click <a href="/index.html">HERE</a> to visit another page.</p> | |
| <p> | |
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quas, nam id iure facere eum obcaecati deserunt voluptatem dolorem quidem praesentium. Velit iusto ad odit repellendus | |
| voluptates perspiciatis in laboriosam! | |
| </p> | |
| <p> | |
| Delectus perferendis assumenda iure neque maiores rerum placeat eum consequuntur architecto asperiores? Quisquam maiores officia alias, maxime inventore, laboriosam, dolorum repellendus | |
| aspernatur explicabo modi sint omnis harum molestias sed fugit! | |
| </p> | |
| <p> | |
| Facere consequatur molestiae provident facilis qui adipisci excepturi iure quod labore! Veritatis molestias omnis quaerat consequuntur illo dolorum dicta aliquam, ducimus ut ipsa, vero non ab | |
| quasi mollitia alias vitae. | |
| </p> | |
| </main> | |
| </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
| <!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>Service Worker Redirect</title> | |
| <link href="./css/main.css" rel="stylesheet" /> | |
| <script src="./js/app.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>The Real Homepage</h1> | |
| </header> | |
| <main> | |
| <h2>page heading</h2> | |
| <p>Click <a href="/index.html">HERE</a> to visit another page.</p> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde libero eos ullam numquam perferendis animi temporibus exercitationem nulla voluptas nobis aut autem, ipsa, officiis natus | |
| blanditiis placeat quibusdam! Mollitia, suscipit. | |
| </p> | |
| <p> | |
| Nisi iusto id soluta tenetur? Fugiat totam provident ut aperiam sapiente explicabo, sit tempore dicta a et harum dolorem architecto in tenetur, numquam corrupti corporis ad quos! Impedit, | |
| rerum sed! | |
| </p> | |
| <p> | |
| Nihil minima dolores, provident aperiam rem libero sit beatae ullam quas. Pariatur magni numquam officia quidem? Dolore, vitae, molestias nisi eum magnam quasi incidunt accusamus at odio nihil | |
| unde eos. | |
| </p> | |
| <p> | |
| Doloremque tempora veritatis sunt maxime in sapiente atque reiciendis odit? Consequatur, odio facere sequi perspiciatis neque in rem fugit placeat incidunt itaque tenetur inventore eos quae | |
| dolore velit, quia illum! | |
| </p> | |
| </main> | |
| </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
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| font-family: inherit; | |
| font-weight: inherit; | |
| } | |
| html { | |
| color-scheme: dark light; | |
| font-size: 20px; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-weight: 300; | |
| } | |
| body { | |
| min-height: 100vh; | |
| } | |
| main, | |
| header { | |
| padding: 1rem 4rem; | |
| max-width: 1200px; | |
| margin: 1rem auto; | |
| } | |
| h1 { | |
| font-size: 4.8rem; | |
| } | |
| h2 { | |
| font-size: 3.6rem; | |
| } | |
| p { | |
| font-size: 1rem; | |
| line-height: 1.5rem; | |
| padding-block: 1rem; | |
| } | |
| button { | |
| border: none; | |
| background-color: steelblue; | |
| color: white; | |
| font-size: 2rem; | |
| padding: 0.5rem 2rem; | |
| } | |
| .custom { | |
| 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
| self.addEventListener('install', (ev) => { | |
| console.log('installed'); | |
| }); | |
| self.addEventListener('activate', (ev) => { | |
| console.log('activated'); | |
| }); | |
| self.addEventListener('fetch', (ev) => { | |
| console.log('fetch request for', ev.request.url); | |
| let url = new URL(ev.request.url); | |
| let mode = ev.request.mode; | |
| let seconds = new Date().getSeconds(); | |
| if (mode === 'navigate' && url.origin === location.origin) { | |
| //local html file request | |
| if (seconds % 2 === 0) { | |
| let resp = new Response('', { | |
| status: 307, //Temporary Redirect | |
| headers: { | |
| 'cache-control': 'Max-Age=0, no-store', | |
| location: './custom.html', | |
| }, | |
| }); | |
| ev.respondWith(resp); | |
| } else { | |
| ev.respondWith(fetch(ev.request)); | |
| } | |
| } else { | |
| ev.respondWith(fetch(ev.request)); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment