Added offline.html and update sw.js

This commit is contained in:
Caleb Fultz 2024-08-21 00:02:53 -04:00
parent 3143951e95
commit 4347e24199
2 changed files with 80 additions and 21 deletions

29
offline.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline - MTG Card CSV Generator</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<link rel="icon" href="icon.png" type="image/png">
<link href="//cdn.jsdelivr.net/npm/mana-font@latest/css/mana.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>You're Offline</h1>
<p>It looks like you are not connected to the internet. Please check your connection and try again.</p>
<p>While offline, you can still browse previously loaded content, but some features might not work as expected.</p>
<p>
<a href="index.html">Go back to the main page</a>
</p>
</div>
<footer>
<p>
<a href="https://github.com/cfultz/mtgcsv" target="_blank">View on GitHub</a> |
This app is not affiliated with Wizards of the Coast or Hasbro. All rights and trademarks are owned by their respective owners.
</p>
</footer>
</body>
</html>

66
sw.js
View File

@ -1,24 +1,54 @@
self.addEventListener('install', (event) => { // This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
const CACHE = "pwabuilder-offline-page";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "ToDo-replace-this-name.html";
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
self.addEventListener('install', async (event) => {
event.waitUntil( event.waitUntil(
caches.open('mtg-csv-generator-v1').then((cache) => { caches.open(CACHE)
return cache.addAll([ .then((cache) => cache.add(offlineFallbackPage))
'/',
'/index.html',
'/styles.css',
'/app.js',
'/manifest.json',
'/icon.png',
'/cash-money.mp3',
'/randomWords.js'
]);
})
); );
}); });
self.addEventListener('fetch', (event) => { if (workbox.navigationPreload.isSupported()) {
event.respondWith( workbox.navigationPreload.enable();
caches.match(event.request).then((response) => { }
return response || fetch(event.request);
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE
}) })
); );
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
const preloadResp = await event.preloadResponse;
if (preloadResp) {
return preloadResp;
}
const networkResp = await fetch(event.request);
return networkResp;
} catch (error) {
const cache = await caches.open(CACHE);
const cachedResp = await cache.match(offlineFallbackPage);
return cachedResp;
}
})());
}
}); });