Korbs ревизій цього gist 10 months ago. До ревизії
1 file changed, 5 insertions, 1 deletion
README.md
| @@ -1 +1,5 @@ | |||
| 1 | - | # Service Worker - Offline Page | |
| 1 | + | # Service Worker - Offline Page | |
| 2 | + | ||
| 3 | + | When the end-user goes offline, it is possible to cache a page to their device to show a custom offline page. Examples of this would be sites such as YouTube and X. | |
| 4 | + | ||
| 5 | + | Just use the JavaScript file below, make sure it's at the root of the domain in order for the web browser to pick it up. The HTML file below is an example of an offline page. I would recommend building your own custom offline page to tailor it for your website or web application. | |
Korbs ревизій цього gist 10 months ago. До ревизії
1 file changed, 0 insertions, 0 deletions
gistfile1.txt перейменовано в offline.html
Файл перейменовано без змін
Korbs ревизій цього gist 10 months ago. До ревизії
3 files changed, 43 insertions
README.md(файл створено)
| @@ -0,0 +1 @@ | |||
| 1 | + | # Service Worker - Offline Page | |
gistfile1.txt(файл створено)
| @@ -0,0 +1,4 @@ | |||
| 1 | + | <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="Astro description"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.0.5"><title>Welcome to Astro.</title><style>:root{--accent: 136, 58, 234;--accent-light: 224, 204, 250;--accent-dark: 49, 10, 101;--accent-gradient: linear-gradient( 45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60% )}html{font-family:system-ui,sans-serif;background:#13151a;background-size:224px}code{font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace} | |
| 2 | + | main[data-astro-cid-orgni7iu]{margin:auto;padding:1rem;width:800px;max-width:calc(100% - 2rem);color:#fff;font-size:20px;line-height:1.6}svg[data-astro-cid-orgni7iu]{fill:#fff}.astro-a[data-astro-cid-orgni7iu]{position:absolute;top:-32px;left:50%;transform:translate(-50%);width:220px;height:auto;z-index:-1}h1[data-astro-cid-orgni7iu]{font-size:4rem;font-weight:700;line-height:1;text-align:center;margin-bottom:1em}.text-gradient[data-astro-cid-orgni7iu]{background-image:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:400%;background-position:0%}.error[data-astro-cid-orgni7iu]{margin-bottom:2rem;border:1px solid rgba(var(--accent-light),25%);background:linear-gradient(#650a0aa8,#650a0a54);padding:1.5rem;border-radius:8px;align-items:center;display:flex;gap:12px}.error[data-astro-cid-orgni7iu] code[data-astro-cid-orgni7iu]{font-size:.8em;font-weight:700;background:rgba(var(--accent-light),12%);color:rgb(var(--accent-light));border-radius:4px;padding:.3em .4em}.error[data-astro-cid-orgni7iu] strong[data-astro-cid-orgni7iu]{color:rgb(var(--accent-light))}.instructions[data-astro-cid-orgni7iu]{margin-bottom:2rem;border:1px solid rgba(var(--accent-light),25%);background:linear-gradient(rgba(var(--accent-dark),66%),rgba(var(--accent-dark),33%));padding:1.5rem;border-radius:8px}.instructions[data-astro-cid-orgni7iu] code[data-astro-cid-orgni7iu]{font-size:.8em;font-weight:700;background:rgba(var(--accent-light),12%);color:rgb(var(--accent-light));border-radius:4px;padding:.3em .4em}.instructions[data-astro-cid-orgni7iu] strong[data-astro-cid-orgni7iu]{color:rgb(var(--accent-light))}.link-card-grid[data-astro-cid-orgni7iu]{display:grid;grid-template-columns:repeat(auto-fit,minmax(24ch,1fr));gap:2rem;padding:0} | |
| 3 | + | </style><script type="module">"serviceWorker"in navigator&&navigator.serviceWorker.register("service-worker.js"); | |
| 4 | + | </script></head> <body> <main data-astro-cid-orgni7iu> <p class="error" data-astro-cid-orgni7iu><svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" data-astro-cid-orgni7iu><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" data-astro-cid-orgni7iu></path></svg> You're offline, check your internet connection and try again.</p> </main> </body></html> | |
service-worker.js(файл створено)
| @@ -0,0 +1,38 @@ | |||
| 1 | + | 'use strict'; | |
| 2 | + | ||
| 3 | + | var cacheVersion = 1; | |
| 4 | + | var currentCache = { | |
| 5 | + | offline: 'offline-cache' + cacheVersion | |
| 6 | + | }; | |
| 7 | + | const offlineUrl = 'offline.html'; | |
| 8 | + | ||
| 9 | + | this.addEventListener('install', event => { | |
| 10 | + | event.waitUntil( | |
| 11 | + | caches.open(currentCache.offline).then(function (cache) { | |
| 12 | + | return cache.addAll([ | |
| 13 | + | offlineUrl | |
| 14 | + | ]); | |
| 15 | + | }) | |
| 16 | + | ); | |
| 17 | + | }); | |
| 18 | + | ||
| 19 | + | this.addEventListener('fetch', event => { | |
| 20 | + | // request.mode = navigate isn't supported in all browsers | |
| 21 | + | // so include a check for Accept: text/html header. | |
| 22 | + | if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) { | |
| 23 | + | event.respondWith( | |
| 24 | + | fetch(event.request.url).catch(error => { | |
| 25 | + | // Return the offline page | |
| 26 | + | return caches.match(offlineUrl); | |
| 27 | + | }) | |
| 28 | + | ); | |
| 29 | + | } | |
| 30 | + | else { | |
| 31 | + | // Respond with everything else if we can | |
| 32 | + | event.respondWith(caches.match(event.request) | |
| 33 | + | .then(function (response) { | |
| 34 | + | return response || fetch(event.request); | |
| 35 | + | }) | |
| 36 | + | ); | |
| 37 | + | } | |
| 38 | + | }); | |