Changes to be committed:

modified: index.html new file: js/pwabuilder-sw.js new file: offline.html
2023-01-14 02:13:04 +03:00
parent c2e83a0bfe
commit 37ea4e795a
3 changed files with 69 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
    </body>
    <script>
        if (typeof navigator.serviceWorker !== 'undefined') {
-          navigator.serviceWorker.register('/js/sw.js')
+          navigator.serviceWorker.register('/js/pwabuilder-sw.js')
        }
      </script>
 </html>
--- a/js/pwabuilder-sw.js
+++ b/js/pwabuilder-sw.js
@@ -0,0 +1,47 @@
+// This is the "Offline page" service worker
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+const CACHE = "DarkShy-page";
+
+// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
+const offlineFallbackPage = "offline.html";
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('install', async (event) => {
+  event.waitUntil(
+    caches.open(CACHE)
+      .then((cache) => cache.add(offlineFallbackPage))
+  );
+});
+
+if (workbox.navigationPreload.isSupported()) {
+  workbox.navigationPreload.enable();
+}
+
+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;
+      }
+    })());
+  }
+});
--- a/offline.html
+++ b/offline.html
@@ -0,0 +1,21 @@
+html>
+    <head>
+        <title>DarkShy - main page</title>
+        <meta name="description" content="Страница DarkShy.">
+        <meta name="keywords" content="DarkShy, pony, bronyfurry, mlp">
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+        <meta name="format-detection" content="telephone=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="theme-color" content="black">
+        <meta name="color-scheme" content="dark">
+        <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+        <link rel="manifest" href="manifest.json">
+        <link rel="apple-touch-icon" href="/img/favicon.ico">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <h1 class="header dark">Dark<span class="shy">Shy</span></h1>
+        <h2><span>У вас что-то сломалось, или сервер не доступен.</span></h2>
+        <h3>Код ошибки: No internet connection or server is dead</h3>
+    </body>