web: support installing as progressive web app™

12 files changed, 91 insertions, 0 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index f2593f7..39e0371 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -194,3 +194,6 @@ document.addEventListener('keydown', e => {
 	else if (e.key == 'u')
 		promptHandle('undo');
 });
+
+if ('serviceWorker' in navigator)
+	navigator.serviceWorker.register('sw.js');
diff --git a/web/static/dartboat.webmanifest b/web/static/dartboat.webmanifest
new file mode 100644
index 0000000..1321595
--- /dev/null
+++ b/web/static/dartboat.webmanifest
@@ -0,0 +1,19 @@
+{
+	"name": "dartboat",
+	"description": "Darts opponent for when you've got no friends.",
+	"start_url": "./",
+
+	"display": "standalone",
+	"background_color": "#311d52",
+
+	"icons": [
+		{ "src": "dartboat_16.png", "sizes": "16x16", "type": "image/png" },
+		{ "src": "dartboat_32.png", "sizes": "32x32", "type": "image/png" },
+		{ "src": "dartboat_64.png", "sizes": "64x64", "type": "image/png" },
+		{ "src": "dartboat_96.png", "sizes": "96x96", "type": "image/png" },
+		{ "src": "dartboat_128.png", "sizes": "128x128", "type": "image/png" },
+		{ "src": "dartboat_192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "dartboat_256.png", "sizes": "256x256", "type": "image/png" },
+		{ "src": "dartboat_512.png", "sizes": "512x512", "type": "image/png" }
+	]
+}
diff --git a/web/static/dartboat_128.png b/web/static/dartboat_128.png
new file mode 100644
index 0000000..1a3cd6f
--- /dev/null
+++ b/web/static/dartboat_128.png
diff --git a/web/static/dartboat_16.png b/web/static/dartboat_16.png
new file mode 100644
index 0000000..5eb5bf9
--- /dev/null
+++ b/web/static/dartboat_16.png
diff --git a/web/static/dartboat_192.png b/web/static/dartboat_192.png
new file mode 100644
index 0000000..7749cd1
--- /dev/null
+++ b/web/static/dartboat_192.png
diff --git a/web/static/dartboat_256.png b/web/static/dartboat_256.png
new file mode 100644
index 0000000..5a09884
--- /dev/null
+++ b/web/static/dartboat_256.png
diff --git a/web/static/dartboat_32.png b/web/static/dartboat_32.png
new file mode 100644
index 0000000..195b137
--- /dev/null
+++ b/web/static/dartboat_32.png
diff --git a/web/static/dartboat_512.png b/web/static/dartboat_512.png
new file mode 100644
index 0000000..412805e
--- /dev/null
+++ b/web/static/dartboat_512.png
diff --git a/web/static/dartboat_64.png b/web/static/dartboat_64.png
new file mode 100644
index 0000000..a079375
--- /dev/null
+++ b/web/static/dartboat_64.png
diff --git a/web/static/dartboat_96.png b/web/static/dartboat_96.png
new file mode 100644
index 0000000..6abdd9e
--- /dev/null
+++ b/web/static/dartboat_96.png
diff --git a/web/static/index.html b/web/static/index.html
index 7222f64..82a9d29 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -5,6 +5,7 @@
 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" type="text/css" href="style.css">
+		<link rel="manifest" href="dartboat.webmanifest">
 		<script src="dartboat.js"></script>
 		<script src="dartboat_wasm.js"></script>
 	</head>
diff --git a/web/static/sw.js b/web/static/sw.js
new file mode 100644
index 0000000..3a92eb3
--- /dev/null
+++ b/web/static/sw.js
@@ -0,0 +1,68 @@
+const CACHE_PREFIX = 'dartboat-'
+const CACHE_VERSION = '1';
+const CACHE_NAME = `${CACHE_PREFIX}${CACHE_VERSION}`;
+
+const FILES = [
+	'./',
+	'dartboat.js',
+	'dartboat_wasm.js',
+	'dartboat_wasm.wasm',
+	'style.css',
+	'icons.woff2',
+	'inter-num.woff2',
+	'dartboat_16.png',
+	'dartboat_32.png',
+	'dartboat_64.png',
+	'dartboat_96.png',
+	'dartboat_128.png',
+	'dartboat_192.png',
+	'dartboat_256.png',
+	'dartboat_512.png'
+]
+
+function swlog(str) {
+	console.log(`[service worker] ${str}`);
+}
+
+self.addEventListener('install', e => {
+	swlog('installing');
+
+	e.waitUntil((async() => {
+		swlog(`initialising cache ${CACHE_NAME}`);
+		const cache = await caches.open(CACHE_NAME);
+		await cache.addAll(FILES);
+	})());
+
+	swlog('installed');
+});
+
+self.addEventListener('activate', e => {
+	e.waitUntil(caches.keys().then((keys) => {
+		return Promise.all(keys.map((k) => {
+			if (k === CACHE_NAME ||	!k.startsWith(CACHE_PREFIX))
+				return;
+
+			swlog(`deleting cache ${k}`);
+			return caches.delete(k);
+		}));
+	}));
+});
+
+self.addEventListener('fetch', e => {
+	e.respondWith((async () => {
+		const cache = await caches.open(CACHE_NAME);
+
+		const cached = await cache.match(e.request);
+		swlog(`${cached ? 'hit' : 'miss'} ${e.request.url}`);
+		if (cached)
+			return cached;
+
+		if (!(resp = await fetch(e.request)).ok) {
+			swlog(`ignore status:${resp.status} ${e.request.url}`);
+		} else {
+			swlog(`put ${e.request.url}`);
+			cache.put(e.request, resp.clone());
+		}
+		return resp;
+	})());
+});