From 3433c03a940c6870e1c36a5a81fdb0db395e9cf3 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Wed, 2 Sep 2020 11:51:19 +0200
Subject: [PATCH] Work on #445 - try simple service worker and offline page
---
angular.json | 4 ++++
src/index.html | 14 +++++++++++++
src/pwa-offline.html | 8 ++++++++
src/pwabuilder-sw.js | 48 ++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 74 insertions(+)
create mode 100644 src/pwa-offline.html
create mode 100644 src/pwabuilder-sw.js
diff --git a/angular.json b/angular.json
index 9c290d449..37a9618c1 100644
--- 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"
diff --git a/src/index.html b/src/index.html
index 01b8c0bdb..96d25eb92 100644
--- 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
diff --git a/src/pwa-offline.html b/src/pwa-offline.html
new file mode 100644
index 000000000..987f857cd
--- /dev/null
+++ b/src/pwa-offline.html
@@ -0,0 +1,8 @@
+<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
diff --git a/src/pwabuilder-sw.js b/src/pwabuilder-sw.js
new file mode 100644
index 000000000..797a10ec0
--- /dev/null
+++ b/src/pwabuilder-sw.js
@@ -0,0 +1,48 @@
+// 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;
+ }
+ })());
+ }
+});
--
GitLab