configured service worker + pwa config

index.html

@@ -12,9 +12,9 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-touch-icon.png?v=oLnE8zppbY">
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/favicon-32x32.png?v=oLnE8zppbY">
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon/favicon-16x16.png?v=oLnE8zppbY">
-    <link rel="manifest" href="/assets/images/favicon/site.webmanifest?v=oLnE8zppbY">
     <link rel="mask-icon" href="/assets/images/favicon/safari-pinned-tab.svg?v=oLnE8zppbY" color="#5561d9">
     <link rel="shortcut icon" href="/assets/images/favicon/favicon.ico?v=oLnE8zppbY">
+    <link rel="manifest" href="/manifest.webmanifest">
     <meta name="apple-mobile-web-app-title" content="Vite Ma Dose">
     <meta name="application-name" content="Vite Ma Dose">
     <meta name="msapplication-TileColor" content="#585b79">

public/manifest.webmanifest

@@ -0,0 +1,29 @@
+{
+  "short_name": "ViteMaDose",
+  "name": "ViteMaDose : Trouver un vaccin facilement et rapidement",
+  "icons": [
+    {
+      "src": "/assets/images/favicon/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/images/favicon/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#5561d9",
+  "display": "minimal-ui",
+  "theme_color": "#5561d9",
+  "shortcuts": [],
+  "description": "Trouver un vaccin facilement et rapidement",
+  "screenshots": [
+    {
+      "src": "/assets/images/social/vitemadose.png",
+      "type": "image/png",
+      "sizes": "2704x1476"
+    }
+  ]
+}

public/sw.js

@@ -0,0 +1,31 @@
+
+function clientRootUrl() {
+    return self.location.href.replace("sw.js","");
+}
+
+function env() {
+    return (self.location.hostname === "vitemadose.covidtracker.fr")?'prod':'dev';
+}
+
+
+self.addEventListener('install', function(event) {
+    console.log('Service Worker activating...');
+    // event.waitUntil(self.skipWaiting()); // Activate worker immediately
+});
+
+self.addEventListener('activate', function(event) {
+    console.log('Service Worker activating...');
+    event.waitUntil(
+        Promise.all([
+            Promise.resolve()
+        ]).then(function() {
+            console.log('SW activation finished !');
+            return self.clients.claim();
+        })
+    );
+});
+
+// Dummy fetch handler to make PWA installable (without this, we won't have the installation CTA on the website)
+self.addEventListener('fetch', function(event) {
+    //console.log("in dummy fetch handler");
+});

src/utils/ServiceWorkers.ts

@@ -0,0 +1,50 @@
+import {Router} from "../routing/Router";
+
+export class ServiceWorkers {
+
+    public static readonly INSTANCE = new ServiceWorkers();
+
+    private constructor() {
+    }
+
+    async startup() {
+        // Registering background synchronization
+        if (!navigator.serviceWorker){
+            console.info("Service Worker not supported")
+            return false;
+        }
+
+        // Waiting for 'load' event to start service worker registration
+        // see https://developers.google.com/web/fundamentals/primers/service-workers/registration#improving_the_boilerplate
+        await new Promise((resolve) => window.addEventListener('load', resolve));
+
+        const serviceWorkerRegistration = await navigator.serviceWorker.register(`${Router.basePath}sw.js`);
+
+        navigator.serviceWorker.addEventListener('controllerchange', () => {
+            console.log("controllerchange called !");
+        });
+
+        // Cases :
+        // - navigator.serviceWorker.controller is undefined : this occurs the first time the sw is installed
+        //   in that case, we should look for updatefound + statechange=activated events to resolve controller
+        // - navigator.serviceWorker.controller is defined, we should play with is, but don't forget to register a
+        //   controller change event in case a new version of the sw is deployed
+
+        await new Promise<{controller: ServiceWorker, updated: boolean}>((resolve) => {
+            if(navigator.serviceWorker.controller) {
+                resolve({controller: navigator.serviceWorker.controller, updated: false});
+            }
+
+            serviceWorkerRegistration.addEventListener('updatefound', () => {
+                const newWorker = serviceWorkerRegistration.installing!;
+                newWorker.addEventListener('statechange', () => {
+                    if(newWorker.state === 'activated') {
+                        resolve({ controller: navigator.serviceWorker.controller!, updated: true});
+                    }
+                })
+            });
+        })
+
+        return true;
+    }
+}

src/vmd-app.component.ts

@@ -2,6 +2,7 @@ import {LitElement, html, customElement, property, css } from 'lit-element';
 import {Router, SlottedTemplateResultFactory} from "./routing/Router";
 import smoothscroll from 'smoothscroll-polyfill';
 import {CSS_Global} from "./styles/ConstructibleStyleSheets";
+import {ServiceWorkers} from "./utils/ServiceWorkers";
 
 @customElement('vmd-app')
 export class VmdAppComponent extends LitElement {
@@ -27,6 +28,8 @@ export class VmdAppComponent extends LitElement {
         Router.installRoutes((viewTemplateResult) => {
             this.viewTemplateResult = viewTemplateResult;
         })
+
+        ServiceWorkers.INSTANCE.startup();
     }
 
     render() {