Experimenting with service workers

index.html

@@ -79,5 +79,22 @@
 <script src="./all_themes_index.ts"></script>
 <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>
 
+<script>
+    window.addEventListener('load', () => {
+        if ('serviceWorker' in navigator) {
+            // register service worker
+            navigator.serviceWorker.register('/service-worker.js').then(
+                () => {
+                    console.log('SW registration successful');
+                },
+                err => {
+                    console.error('SW registration failed', err)
+                });
+        } else {
+            console.log("Service workers are not supported")
+        }
+    });
+</script>
+
 </body>
 </html>

langs/en.json

@@ -280,6 +280,7 @@
             "browseNearby": "Browse nearby images...",
             "confirm": "The selected image shows {title()}",
             "hasMatchingPicture": "Does a picture match the object? Select it below",
+            "loadMore": "Load more images",
             "loading": "Loading nearby images...",
             "noImageSelected": "Select an image to link it to the object",
             "nothingFound": "No nearby images found...",

package-lock.json

@@ -10,6 +10,7 @@
       "license": "GPL",
       "dependencies": {
         "@babel/preset-env": "7.13.8",
+        "@parcel/service-worker": "^2.5.0",
         "@turf/buffer": "^6.5.0",
         "@turf/collect": "^6.5.0",
         "@turf/distance": "^6.5.0",
@@ -1393,6 +1394,19 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/@parcel/service-worker": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/service-worker/-/service-worker-2.5.0.tgz",
+      "integrity": "sha512-4kcY3uG/ureZqWf89N2QcW0MjBtNxvZrJEp3uTbaRaNgwYfyqebXW2eKtgKixsGLFMOV2rvEUoiDScMAZSBXOg==",
+      "engines": {
+        "node": ">= 12.0.0",
+        "parcel": "^2.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/utils": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-1.11.0.tgz",
@@ -17716,6 +17730,11 @@
         "strip-ansi": "^4.0.0"
       }
     },
+    "@parcel/service-worker": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/service-worker/-/service-worker-2.5.0.tgz",
+      "integrity": "sha512-4kcY3uG/ureZqWf89N2QcW0MjBtNxvZrJEp3uTbaRaNgwYfyqebXW2eKtgKixsGLFMOV2rvEUoiDScMAZSBXOg=="
+    },
     "@parcel/utils": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-1.11.0.tgz",

package.json

@@ -44,7 +44,7 @@
     "gittag": "ts-node scripts/printVersion.ts | bash",
     "lint": "tslint --project . -c tslint.json '**.ts' ",
     "clean:tests": "(find . -type f -name \"*.doctest.ts\" | xargs rm)",
-    "clean": "rm -rf .cache/ && (find *.html | grep -v \"\\(404\\|index\\|land\\|test\\|preferences\\|customGenerator\\|professional\\|automaton\\|import_helper\\|import_viewer\\|theme\\).html\" | xargs rm) && (ls | grep \"^index_[a-zA-Z_-]\\+\\.ts$\" | xargs rm) && (ls | grep \".*.webmanifest$\" | grep -v \"manifest.webmaifest\" | xargs rm)",
+    "clean": "rm -rf .cache/ && (find *.html | grep -v \"\\(404\\|index\\|land\\|test\\|preferences\\|customGenerator\\|professional\\|automaton\\|import_helper\\|import_viewer\\|theme\\).html\" | xargs rm) && (ls | grep \"^index_[a-zA-Z_-]\\+\\.ts$\" | xargs rm) && (ls | grep \".*.webmanifest$\" | grep -v \"manifest.webmanifest\" | xargs rm)",
     "generate:dependency-graph": "node_modules/.bin/depcruise --exclude \"^node_modules\" --output-type dot Logic/State/MapState.ts > dependencies.dot && dot dependencies.dot -T svg -o dependencies.svg && rm dependencies.dot",
     "script": "ts-node",
     "merge-translations": "git remote update weblate ; git merge weblate/master"
@@ -57,6 +57,7 @@
   "license": "GPL",
   "dependencies": {
     "@babel/preset-env": "7.13.8",
+    "@parcel/service-worker": "^2.5.0",
     "@turf/buffer": "^6.5.0",
     "@turf/collect": "^6.5.0",
     "@turf/distance": "^6.5.0",

service-worker.js

@@ -0,0 +1,57 @@
+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(
+            caches.match(event.request).then(function (response) {
+                return response || fetch(event.request);
+            }),
+        );
+    } catch (e) {
+        console.error("CRASH IN SW:", e)
+        event.respondWith(fetch(event.request));
+    }
+});

test.html

@@ -24,6 +24,21 @@
 
 <script src="./test.ts"></script>
 
-
+<script>
+    window.addEventListener('load', () => {
+        if ('serviceWorker' in navigator) {
+            // register service worker
+            navigator.serviceWorker.register('/service-worker.js').then(
+                () => {
+                    console.log('SW registration successful');
+                },
+                err => {
+                    console.error('SW registration failed', err)
+                });
+        } else {
+            console.error("Service workers are not supported")
+        }
+    });
+</script>
 </body>
 </html>

test.ts

@@ -1,19 +1,14 @@
-import {SelectOneNearbyImage} from "./UI/Popup/NearbyImages";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
-import Minimap from "./UI/Base/Minimap";
+import Img from "./UI/Base/Img";
-import MinimapImplementation from "./UI/Base/MinimapImplementation";
+import { Utils } from "./Utils";
-import {VariableUiElement} from "./UI/Base/VariableUIElement";
-import Loc from "./Models/Loc";
-import {UIEventSource} from "./Logic/UIEventSource";
 
-MinimapImplementation.initialize()
+new FixedUiElement("Hi").AttachTo("maindiv")
-const map = Minimap.createMiniMap({
-    location: new UIEventSource<Loc>({
-        lon: 3.22457,
-        lat: 51.20876,
-        zoom: 18
-    })
-})
-map.AttachTo("extradiv")
-map.SetStyle("height: 500px")
 
-new VariableUiElement(map.location.map( loc =>  new SelectOneNearbyImage( {...loc, radius: 50}))).AttachTo("maindiv")
+window.setTimeout(() => {
+    new FixedUiElement("Loading...").AttachTo("maindiv")
+//    new Img("http://4.bp.blogspot.com/-_vTDmo_fSTw/T3YTV0AfGiI/AAAAAAAAAX4/Zjh2HaoU5Zo/s1600/beautiful%2Bkitten.jpg").AttachTo("maindiv")
+    Utils.download("http://127.0.0.1:1234/somedata").then(data => {
+        console.log("Got ", data)
+        return new FixedUiElement(data).AttachTo("extradiv");
+    })
+}, 1000)

theme.html

@@ -87,5 +87,22 @@
 <script src="./index.ts"></script>
 <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>
 
+<script>
+    window.addEventListener('load', () => {
+        if ('serviceWorker' in navigator) {
+            // register service worker
+            navigator.serviceWorker.register('/service-worker.js').then(
+                () => {
+                    console.log('SW registration successful');
+                },
+                err => {
+                    console.error('SW registration failed', err)
+                });
+        } else {
+            console.log("Service workers are not supported")
+        }
+    });
+</script>
+
 </body>
 </html>