Experimenting with service workers

This commit is contained in:
pietervdvn 2022-05-13 01:20:08 +02:00
parent acd1cdb7c1
commit e5908cf49b
8 changed files with 141 additions and 19 deletions

View file

@ -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>

View file

@ -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...",

19
package-lock.json generated
View file

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

View file

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

57
service-worker.js Normal file
View file

@ -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));
}
});

View file

@ -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>

29
test.ts
View file

@ -1,19 +1,14 @@
import {SelectOneNearbyImage} from "./UI/Popup/NearbyImages";
import Minimap from "./UI/Base/Minimap";
import MinimapImplementation from "./UI/Base/MinimapImplementation";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import Loc from "./Models/Loc";
import {UIEventSource} from "./Logic/UIEventSource";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import Img from "./UI/Base/Img";
import { Utils } from "./Utils";
MinimapImplementation.initialize()
const map = Minimap.createMiniMap({
location: new UIEventSource<Loc>({
lon: 3.22457,
lat: 51.20876,
zoom: 18
})
})
map.AttachTo("extradiv")
map.SetStyle("height: 500px")
new FixedUiElement("Hi").AttachTo("maindiv")
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)

View file

@ -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>