Work on #445 - try simple service worker and offline page

3433c03a · mathias.chouet · 235af35e · 3433c03a · 3433c03a · 3433c03a
Commit 3433c03a authored 4 years ago by mathias.chouet
--- a/angular.json
+++ b/angular.json
@@ -23,6 +23,8 @@
              "src/favicon.ico",
              "src/.htaccess",
              "src/cassiopee.webmanifest",
+              "src/pwabuilder-sw.js",
+              "src/pwa-offline.html",
              {
                "glob": "**/*.json",
                "input": "src/",
@@ -114,6 +116,8 @@
              "src/assets",
              "src/favicon.ico",
              "src/cassiopee.webmanifest",
+              "src/pwabuilder-sw.js",
+              "src/pwa-offline.html",
              "src/**/*.json",
              "src/**/*.md",
              "src/**/*.png"

--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,9 @@
   <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
+
   <link rel="manifest" href="cassiopee.webmanifest">
+   <meta name="theme-color" content="#003A80">

   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -283,6 +285,18 @@
      }
   </script>

+    <script type="module">
+        /*
+        This code uses the pwa-update web component https://github.com/pwa-builder/pwa-update to register your service worker,
+        tell the user when there is an update available and let the user know when your PWA is ready to use offline.
+        */
+        import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
+
+        // généré par https://www.pwabuilder.com/serviceworker le 2020-09-02
+        const el = document.createElement('pwa-update');
+        document.body.appendChild(el);
+    </script>
+
 </body>

 </html>
\ No newline at end of file
--- a/src/pwa-offline.html
+++ b/src/pwa-offline.html
+<html>
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <h1>Network is required to use Cassiopée</h1>
+    </body>
+</html>
\ No newline at end of file
--- a/src/pwabuilder-sw.js
+++ b/src/pwabuilder-sw.js
+// This is the "Offline page" service worker
+// généré par https://www.pwabuilder.com/serviceworker le 2020-09-02
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
+
+const CACHE = "cassiopee-pwa";
+
+// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
+const offlineFallbackPage = "pwa-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;
+      }
+    })());
+  }
+});