#132 Possibilité de watch les centres à 0 créneaux afin d'être notifié lors de nouveaux créneaux dispos

icons-src/config.json

@@ -6,12 +6,6 @@
   "units_per_em": 1000,
   "ascent": 850,
   "glyphs": [
-    {
-      "uid": "fc455b9530e0b37facc289f42a120fdd",
-      "css": "commerical-building",
-      "code": 59409,
-      "src": "maki"
-    },
     {
       "uid": "7707c5b47c0a2b29afbfb10cdbab3e28",
       "css": "calendar-x-fill",
@@ -109,6 +103,40 @@
       "search": [
         "arrow-up-right"
       ]
+    },
+    {
+      "uid": "fc455b9530e0b37facc289f42a120fdd",
+      "css": "commerical-building",
+      "code": 59409,
+      "src": "maki"
+    },
+    {
+      "uid": "5b954c88f6386ce35c5a88ffbc9ca6b6",
+      "css": "eye-solid",
+      "code": 59400,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M1118.2 471.5C1012.3 264.8 802.6 125 562.5 125S112.7 264.9 6.8 471.5A63.2 63.2 0 0 0 6.8 528.5C112.7 735.2 322.4 875 562.5 875S1012.3 735.1 1118.2 528.5A63.2 63.2 0 0 0 1118.2 471.5ZM562.5 781.3A281.3 281.3 0 1 1 843.8 500 281.1 281.1 0 0 1 562.5 781.3ZM562.5 312.5A186.2 186.2 0 0 0 513.1 319.9 93.5 93.5 0 0 1 382.4 450.6 187.1 187.1 0 1 0 562.5 312.5Z",
+        "width": 1125
+      },
+      "search": [
+        "eye-solid"
+      ]
+    },
+    {
+      "uid": "6c04e21c48bdcd8977470cc230f821e1",
+      "css": "eye-slash-solid",
+      "code": 59401,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M625 781.3C476.9 781.3 356.9 666.6 345.9 521.3L141 362.9C114.1 396.7 89.3 432.4 69.3 471.5A63.2 63.2 0 0 0 69.3 528.5C175.2 735.2 384.9 875 625 875 677.6 875 728.3 867.2 777.1 854.6L675.8 776.2A281.5 281.5 0 0 1 625 781.3ZM1237.9 894.7L1022 727.9A647 647 0 0 0 1180.7 528.5 63.2 63.2 0 0 0 1180.7 471.5C1074.8 264.8 865.1 125 625 125A601.9 601.9 0 0 0 337.3 198.6L88.8 6.6A31.3 31.3 0 0 0 44.9 12.1L6.6 61.4A31.3 31.3 0 0 0 12.1 105.3L1161.2 993.4A31.3 31.3 0 0 0 1205.1 987.9L1243.4 938.6A31.3 31.3 0 0 0 1237.9 894.7ZM879.1 617.4L802.3 558A185.1 185.1 0 0 0 812.5 500 185.1 185.1 0 0 0 575.6 319.9 93.1 93.1 0 0 1 593.8 375 91.1 91.1 0 0 1 590.7 394.5L447 283.4A277.9 277.9 0 0 1 625 218.8 281.1 281.1 0 0 1 906.3 500C906.3 542.2 895.9 581.6 879.1 617.4Z",
+        "width": 1250
+      },
+      "search": [
+        "eye-slash-solid"
+      ]
     }
   ]
 }

index.html

@@ -9,9 +9,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">

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "bootstrap": "5.0.0-beta3",
+    "idb": "6.0.0",
     "leaflet": "1.7.1",
     "leaflet.markercluster": "1.4.1",
     "lit-element": "2.4.0",

public/firebase-config-dev.json

@@ -0,0 +1,15 @@
+{
+  "app": {
+    "apiKey": "AIzaSyBHfDE4J0qzAPuBuYkTSNxTQHQRBPnfUEc",
+    "authDomain": "vite-ma-dose-dev.firebaseapp.com",
+    "databaseURL": "https://vite-ma-dose-dev-default-rtdb.europe-west1.firebasedatabase.app",
+    "projectId": "vite-ma-dose-dev",
+    "storageBucket": "vite-ma-dose-dev.appspot.com",
+    "messagingSenderId": "812389299998",
+    "appId": "1:812389299998:web:66e7622863acc6935dfb0f",
+    "measurementId": "G-7HQEBJY2Q7"
+  },
+  "messaging": {
+    "publicVapidKey": "BGgCGzesNu5Pf5FHFCz8Rzp6iOouftd7YfznS8ybN_p53-YScbpow8ROyC_n_7vwomLoHITOztAJx7smV1mC8gg"
+  }
+}

public/manifest.webmanifest

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

public/sw.js

@@ -0,0 +1,155 @@
+importScripts(
+    'https://cdn.jsdelivr.net/npm/[email protected]/build/iife/index-min.js',
+    'https://www.gstatic.com/firebasejs/8.4.3/firebase-app.js',
+    'https://www.gstatic.com/firebasejs/8.4.3/firebase-messaging.js'
+)
+
+const USE_RAW_GITHUB = false
+const VMD_BASE_URL = USE_RAW_GITHUB
+    ? "https://raw.githubusercontent.com/CovidTrackerFr/vitemadose/data-auto/data/output"
+    : "https://vitemadose.gitlab.io/vitemadose"
+
+let firebaseMessagingToken = undefined;
+let firebaseInitialized = false;
+
+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([
+            DB.initialize()
+        ]).then(function() {
+            console.log('DB and sync events created !');
+            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");
+});
+
+self.addEventListener("message", function(event) {
+    if (event.data && event.data.type === 'INIT_PORT') {
+        // getVersionPort = event.ports[0];
+    }
+
+    if (event.data && event.data.type === 'SUBSCRIPTIONS_ADDED') {
+        event.waitUntil(subscribeTo(event.data.subscriptionTopics));
+    }
+    if (event.data && event.data.type === 'SUBSCRIPTIONS_REMOVED') {
+        event.waitUntil(unsubscribeFrom(event.data.subscriptionTopics));
+    }
+});
+
+function subscribeTo(subscriptionTopics) {
+    return resolveFirebaseCloudMessagingToken().then(function(fbToken) {
+        const fbBaseUrl = env()==='dev'?'https://europe-west1-vite-ma-dose-dev.cloudfunctions.net':'https://europe-west1-vite-ma-dose.cloudfunctions.net';
+        return Promise.all(subscriptionTopics.map(function(topic) {
+            return fetch(fbBaseUrl+'/subscribeToTopic?token='+fbToken+'&topic='+topic);
+        }));
+    });
+}
+
+function unsubscribeFrom(subscriptionTopics) {
+    return resolveFirebaseCloudMessagingToken().then(function(fbToken) {
+        const fbBaseUrl = env()==='dev'?'https://europe-west1-vite-ma-dose-dev.cloudfunctions.net':'https://europe-west1-vite-ma-dose.cloudfunctions.net';
+        return Promise.all(subscriptionTopics.map(function(topic) {
+            return fetch(fbBaseUrl+'/unsubscribeFromTopic?token='+fbToken+'&topic='+topic);
+        }));
+    });
+}
+
+function resolveFirebaseCloudMessagingToken() {
+    if(!firebaseInitialized || !firebaseMessagingToken) {
+        return fetch(clientRootUrl()+"firebase-config-"+env()+".json")
+            .then(function(resp){return resp.json(); })
+            .then(function(fbConfig) {
+                if(!firebaseInitialized) {
+                    firebase.initializeApp(fbConfig.app);
+                    firebaseInitialized = true;
+                }
+
+                const messaging = firebase.messaging();
+                messaging.onBackgroundMessage(function(payload) {
+                    debugger;
+                    const notificationTitle = payload.data.title;
+                    console.log("Notif received !", notificationTitle);
+                    unsubscribeFrom([ payload.data.topic ]);
+                });
+                messaging.setBackgroundMessageHandler(function(payload) {
+                    debugger;
+                    console.log('Received background message ', payload);
+
+                    // Customize notification here
+                    const title = "ViteMaDose overriden title";
+                    const notificationOptions = {
+                        lang: 'fr-FR',
+                        body: "Nouveaux créneaux dispos",
+                        badge: clientRootUrl()+'assets/images/png/vmd-badge.png',
+                        icon: clientRootUrl()+'assets/images/favicon/android-chrome-512x512.png',
+                        // That's too big.. the icon above is enough
+                        // image: clientRootUrl()+'assets/images/favicon/android-chrome-512x512.png',
+                    };
+
+                    return self.registration.showNotification(title, notificationOptions);
+                });
+
+                return messaging.getToken({
+                    serviceWorkerRegistration: self.registration,
+                    vapidKey: fbConfig.messaging.publicVapidKey
+                }).then(function(token) {
+                    console.info("Messaging token : ", token);
+                    firebaseMessagingToken = token;
+                    return token;
+                }, console.error);
+            })
+    } else {
+        return Promise.resolve(firebaseMessagingToken);
+    }
+}
+
+
+class DB {
+    static _INSTANCE = new DB();
+    static instance() {
+        return DB._INSTANCE.db();
+    }
+
+    dbResolver;
+    dbPromise;
+
+    constructor() {
+        var _this = this;
+        this.dbPromise = new Promise(function(resolve) {
+            _this.dbResolver = resolve;
+        });
+    }
+
+    db() {
+        return this.dbPromise;
+    }
+
+    static initialize() {
+        var _this = DB._INSTANCE;
+        idb.openDB('vite-ma-dose', 2).then(function(db) {
+            _this.dbResolver(db);
+        });
+        return _this.dbPromise;
+    }
+}
+