Fix service worker

Models/Constants.ts

@@ -1,5 +1,3 @@
-import {Utils} from "../Utils";
-
 export default class Constants {
 
     public static vNumber = "0.20.0";
@@ -72,9 +70,6 @@ export default class Constants {
     static countryCoderEndpoint: string = "https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/latlon2country";
 
     private static isRetina(): boolean {
-        if (Utils.runningFromConsole) {
-            return;
-        }
         // The cause for this line of code: https://github.com/pietervdvn/MapComplete/issues/115
         // See https://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript
         return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2));

UI/DefaultGUI.ts

@@ -55,6 +55,8 @@ export default class DefaultGUI {
         if (this.state.layoutToUse.customCss !== undefined && window.location.pathname.indexOf("index") >= 0) {
             Utils.LoadCustomCss(this.state.layoutToUse.customCss)
         }
+        
+        Utils.downloadJson("./service-worker-version").then(data => console.log("Service worker", data)).catch(e => console.log("Service worker not active"))
     }
     
     public setupClickDialogOnMap(filterViewIsOpened: UIEventSource<boolean>, state: FeaturePipelineState) {

index.html

@@ -82,13 +82,12 @@
 <script>
     window.addEventListener('load', () => {
         if ('serviceWorker' in navigator) {
-            // register service worker
             navigator.serviceWorker.register('/service-worker.js').then(
                 () => {
-                    console.log('SW registration successful');
+                    console.log('Service worker registration successful');
                 },
                 err => {
-                    console.error('SW registration failed', err)
+                    console.error('Service worker registration failed', err)
                 });
         } else {
             console.log("Service workers are not supported")

package-lock.json

@@ -26,6 +26,7 @@
         "@types/prompt-sync": "^4.1.0",
         "@types/wikidata-sdk": "^6.1.0",
         "@types/xml2js": "^0.4.9",
+        "core-js": "^3.22.8",
         "country-language": "^0.1.7",
         "doctest-ts-improved": "^0.8.6",
         "email-validator": "^2.0.4",
@@ -1128,6 +1129,14 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "node_modules/@babel/polyfill/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "dev": true,
+      "hasInstallScript": true
+    },
     "node_modules/@babel/preset-env": {
       "version": "7.13.8",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.13.8.tgz",
@@ -3850,6 +3859,13 @@
         "regenerator-runtime": "^0.11.0"
       }
     },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -4879,11 +4895,14 @@
       }
     },
     "node_modules/core-js": {
-      "version": "2.6.12",
+      "version": "3.22.8",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA==",
-      "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true,
-      "hasInstallScript": true
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
     },
     "node_modules/core-js-compat": {
       "version": "3.12.0",
@@ -8941,17 +8960,6 @@
         "html2canvas": "^1.0.0-rc.5"
       }
     },
-    "node_modules/jspdf/node_modules/core-js": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.2.tgz",
-      "integrity": "sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q==",
-      "hasInstallScript": true,
-      "optional": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/jsprim": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
@@ -10558,6 +10566,13 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "node_modules/parcel/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/parcel/node_modules/fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@@ -17493,6 +17508,14 @@
       "requires": {
         "core-js": "^2.6.5",
         "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        }
       }
     },
     "@babel/preset-env": {
@@ -19703,6 +19726,11 @@
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -20542,9 +20570,9 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
     "core-js": {
-      "version": "2.6.12",
+      "version": "3.22.8",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+      "integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA=="
     },
     "core-js-compat": {
       "version": "3.12.0",
@@ -23677,14 +23705,6 @@
         "dompurify": "^2.2.0",
         "fflate": "^0.4.8",
         "html2canvas": "^1.0.0-rc.5"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "3.15.2",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.2.tgz",
-          "integrity": "sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q==",
-          "optional": true
-        }
       }
     },
     "jsprim": {
@@ -24978,6 +24998,11 @@
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
         },
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",

package.json

@@ -34,6 +34,7 @@
     "generate:report": "cd Docs/Tools && ./compileStats.sh && git commit . -m 'New statistics ands graphs' && git push",
     "generate:contributor-list": "ts-node scripts/generateContributors.ts",
     "generate:schemas": "ts2json-schema -p Models/ThemeConfig/Json/ -o Docs/Schemas/ -t tsconfig.json -R . -m \".*ConfigJson\" && ts-node scripts/fixSchemas.ts ",
+    "generate:service-worker": "tsc service-worker.ts",
     "optimize-images": "cd assets/generated/ &&  find -name '*.png' -exec optipng '{}' \\; && echo 'PNGs are optimized'",
     "reset:layeroverview": "echo {\\\"layers\\\":[], \\\"themes\\\":[]} > ./assets/generated/known_layers_and_themes.json && echo {\\\"layers\\\": []} > ./assets/generated/known_layers.json",
     "generate": "mkdir -p ./assets/generated && npm run reset:layeroverview && npm run generate:images && npm run generate:charging-stations && npm run generate:translations && npm run generate:licenses && npm run generate:layeroverview",
@@ -55,6 +56,12 @@
   ],
   "author": "pietervdvn",
   "license": "GPL",
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie < 11",
+    "not op_mini all"
+  ],
   "dependencies": {
     "@babel/preset-env": "7.13.8",
     "@parcel/service-worker": "^2.6.0",

service-worker.js

@@ -1,65 +0,0 @@
-import {manifest, version} from '@parcel/service-worker';
-
-async function install() {
-    console.log("Installing service worker!")
-    const cache = await caches.open(version);
-    console.log("Manifest file", manifest)
-    // await cache.addAll(manifest);
-    /* await cache.add({
-         cache: "force-cache",
-         url: "http://4.bp.blogspot.com/-_vTDmo_fSTw/T3YTV0AfGiI/AAAAAAAAAX4/Zjh2HaoU5Zo/s1600/beautiful%2Bkitten.jpg",
-         destination: "image",
-     })//*/
-}
-
-addEventListener('install', e => e.waitUntil(install()));
-
-async function activate() {
-    console.log("Activating service worker")
-    /*self.registration.showNotification("SW started", {
-        actions: [{
-            action: "OK",
-            title: "Some action"
-        }]
-    })*/
-    const keys = await caches.keys();
-    await Promise.all(
-        keys.map(key => key !== version && caches.delete(key))
-    );
-}
-
-addEventListener('activate', e => e.waitUntil(activate()));
-
-self.addEventListener('fetch', (event) => {
-    try {
-
-        if (event.request.url === "http://127.0.0.1:1234/somedata") {
-            console.log("Sending hi to 'somedata'")
-            event.respondWith(new Response("Service worker is active"))
-            return
-        }
-        const origin = new URL(self.origin)
-        const requestUrl = new URL(event.request.url)
-        console.log("Testing cache", origin.host, requestUrl.host, origin.host === requestUrl.host)
-        if (origin.host !== requestUrl.host) {
-            event.respondWith(fetch(event.request));
-            return
-        }
-        event.respondWith(
-            async () => {
-            const matched = caches.match(event.request)
-                if(matched){
-                    return matched
-                }
-                const response = fetch(event.request); 
-                const cache = await caches.open(version);
-                await cache.put(event.request.url, response);
-                console.log("Put ",event.request.url,"into the cache")
-                return response
-            }
-        );
-    } catch (e) {
-        console.error("CRASH IN SW:", e)
-        event.respondWith(fetch(event.request));
-    }
-});

service-worker.ts

@@ -0,0 +1,84 @@
+const version = "0.0.8"
+
+interface ServiceWorkerFetchEvent extends Event {
+    request: RequestInfo & {url: string},
+    respondWith: ((response: any | PromiseLike<Response>) => Promise<void>)
+}
+
+async function install() {
+    console.log("Installing service worker!")
+    // const cache = await caches.open(version);
+    //  console.log("Manifest file", manifest)
+    // await cache.addAll(manifest);
+    /* await cache.add({
+         cache: "force-cache",
+         url: "http://4.bp.blogspot.com/-_vTDmo_fSTw/T3YTV0AfGiI/AAAAAAAAAX4/Zjh2HaoU5Zo/s1600/beautiful%2Bkitten.jpg",
+         destination: "image",
+     })//*/
+}
+
+addEventListener('install', e => (<any>e).waitUntil(install()));
+addEventListener('activate', e => (<any>e).waitUntil(activate()));
+
+async function activate() {
+    console.log("Activating service worker")
+    /*self.registration.showNotification("SW started", {
+        actions: [{
+            action: "OK",
+            title: "Some action"
+        }]
+    })*/
+    caches.keys().then(keys => {
+        Promise.all(
+            keys.map(key => key !== version && caches.delete(key))
+        );
+    }).catch(console.error)
+}
+
+
+
+const cacheFirst = (event) => {
+    event.respondWith(
+        caches.match(event.request, {ignoreSearch: true}).then((cacheResponse) => {
+            if(cacheResponse !== undefined){
+                console.log("Loaded from cache: ", event.request)
+                return cacheResponse
+            }
+            return fetch(event.request).then((networkResponse) => {
+                networkResponse.headers.set("Cache-Control","max-age=")
+                return caches.open(version).then((cache) => {
+                    cache.put(event.request, networkResponse.clone());
+                    console.log("Cached", event.request)
+                    return networkResponse;
+                })
+            })
+        })
+    )
+};
+
+
+self.addEventListener('fetch',
+    e => {
+        // Important: this lambda must run synchronously, as the browser will otherwise handle the request
+        const event = <ServiceWorkerFetchEvent> e;
+        try {
+            const origin = new URL(self.origin)
+            const requestUrl = new URL(event.request.url)
+            if (requestUrl.pathname.endsWith("service-worker-version")) {
+                console.log("Sending version number...")
+                event.respondWith(new Response(JSON.stringify({"service-worker-version": version})));
+                return
+            }
+            const shouldBeCached = origin.host === requestUrl.host && origin.host !== "127.0.0.1:1234"
+            if (!shouldBeCached) {
+                console.log("Not intercepting ", requestUrl.toString(), origin.host, requestUrl.host)
+                // We return _without_ calling event.respondWith, which signals the browser that it'll have to handle it himself
+                return
+            }
+            cacheFirst(event)
+
+        } catch (e) {
+            console.error("CRASH IN SW:", e)
+            event.respondWith(fetch(event.request.url));
+        }
+    });

theme.html

@@ -93,10 +93,10 @@
             // register service worker
             navigator.serviceWorker.register('/service-worker.js').then(
                 () => {
-                    console.log('SW registration successful');
+                    console.log('Service worker registration successful');
                 },
                 err => {
-                    console.error('SW registration failed', err)
+                    console.error('Service worker registration failed', err)
                 });
         } else {
             console.log("Service workers are not supported")