From e9538b707f1eb4c6c914305c39b0a1530445044d Mon Sep 17 00:00:00 2001
From: Lars Lehmann <33843261+larsl-net@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:36:28 +0100
Subject: [PATCH 1/3] Add basic PWA
---
frontend/src/app.html | 1 +
frontend/static/adventurelog.svg | 313 +++++++++++++++++++++++++++++++
frontend/static/manifest.json | 16 ++
3 files changed, 330 insertions(+)
create mode 100644 frontend/static/adventurelog.svg
create mode 100644 frontend/static/manifest.json
diff --git a/frontend/src/app.html b/frontend/src/app.html
index f2516ae..1f4fe8f 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,6 +4,7 @@
+
%sveltekit.head%
diff --git a/frontend/static/adventurelog.svg b/frontend/static/adventurelog.svg
new file mode 100644
index 0000000..92667f2
--- /dev/null
+++ b/frontend/static/adventurelog.svg
@@ -0,0 +1,313 @@
+
+
+
+
diff --git a/frontend/static/manifest.json b/frontend/static/manifest.json
new file mode 100644
index 0000000..9f08d31
--- /dev/null
+++ b/frontend/static/manifest.json
@@ -0,0 +1,16 @@
+{
+ "short_name": "AdventureLog",
+ "name": "AdventureLog",
+ "start_url": "/dashboard",
+ "icons": [
+ {
+ "src": "adventurelog.svg",
+ "type": "image/svg+xml",
+ "sizes": "any"
+ }
+ ],
+ "background_color": "#2a323c",
+ "display": "standalone",
+ "scope": "/",
+ "description": "Self-hostable travel tracker and trip planner."
+}
\ No newline at end of file
From 3ccd0785089cd756e57ecc5264f1f92d5c6a1c3d Mon Sep 17 00:00:00 2001
From: Lars Lehmann <33843261+larsl-net@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:51:04 +0100
Subject: [PATCH 2/3] Add Service Worker
---
frontend/src/service-worker.ts | 81 ++++++++++++++++++++++++++++++++++
1 file changed, 81 insertions(+)
create mode 100644 frontend/src/service-worker.ts
diff --git a/frontend/src/service-worker.ts b/frontend/src/service-worker.ts
new file mode 100644
index 0000000..e0bd09c
--- /dev/null
+++ b/frontend/src/service-worker.ts
@@ -0,0 +1,81 @@
+/// Source: https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36
+///
+
+import { build, files, timestamp } from '$service-worker';
+
+const worker = (self as unknown) as ServiceWorkerGlobalScope;
+const FILES = `cache${timestamp}`;
+
+// `build` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = build.concat(files);
+const staticAssets = new Set(to_cache);
+
+worker.addEventListener('install', (event) => {
+ event.waitUntil(
+ caches
+ .open(FILES)
+ .then((cache) => cache.addAll(to_cache))
+ .then(() => {
+ worker.skipWaiting();
+ })
+ );
+});
+
+worker.addEventListener('activate', (event) => {
+ event.waitUntil(
+ caches.keys().then(async (keys) => {
+ // delete old caches
+ for (const key of keys) {
+ if (key !== FILES) await caches.delete(key);
+ }
+
+ worker.clients.claim();
+ })
+ );
+});
+
+/**
+ * Fetch the asset from the network and store it in the cache.
+ * Fall back to the cache if the user is offline.
+ */
+async function fetchAndCache(request: Request) {
+ const cache = await caches.open(`offline${timestamp}`);
+
+ try {
+ const response = await fetch(request);
+ cache.put(request, response.clone());
+ return response;
+ } catch (err) {
+ const response = await cache.match(request);
+ if (response) return response;
+
+ throw err;
+ }
+}
+
+worker.addEventListener('fetch', (event) => {
+ if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+ const url = new URL(event.request.url);
+
+ // don't try to handle e.g. data: URIs
+ const isHttp = url.protocol.startsWith('http');
+ const isDevServerRequest =
+ url.hostname === self.location.hostname && url.port !== self.location.port;
+ const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
+ const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
+
+ if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
+ event.respondWith(
+ (async () => {
+ // always serve static files and bundler-generated assets from cache.
+ // if your application has other URLs with data that will never change,
+ // set this variable to true for them and they will only be fetched once.
+ const cachedAsset = isStaticAsset && (await caches.match(event.request));
+
+ return cachedAsset || fetchAndCache(event.request);
+ })()
+ );
+ }
+});
\ No newline at end of file
From a88e59869e6ac1accd5307209c57ace8942d295c Mon Sep 17 00:00:00 2001
From: Lars Lehmann
Date: Sun, 19 Jan 2025 22:43:31 +0100
Subject: [PATCH 3/3] Fix service worker
---
frontend/src/app.html | 2 +-
frontend/src/service-worker.ts | 81 ----------------------------
frontend/src/service-worker/indes.ts | 60 +++++++++++++++++++++
3 files changed, 61 insertions(+), 82 deletions(-)
delete mode 100644 frontend/src/service-worker.ts
create mode 100644 frontend/src/service-worker/indes.ts
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 1f4fe8f..abea469 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,7 +4,7 @@
-
+
%sveltekit.head%
diff --git a/frontend/src/service-worker.ts b/frontend/src/service-worker.ts
deleted file mode 100644
index e0bd09c..0000000
--- a/frontend/src/service-worker.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/// Source: https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36
-///
-
-import { build, files, timestamp } from '$service-worker';
-
-const worker = (self as unknown) as ServiceWorkerGlobalScope;
-const FILES = `cache${timestamp}`;
-
-// `build` is an array of all the files generated by the bundler,
-// `files` is an array of everything in the `static` directory
-const to_cache = build.concat(files);
-const staticAssets = new Set(to_cache);
-
-worker.addEventListener('install', (event) => {
- event.waitUntil(
- caches
- .open(FILES)
- .then((cache) => cache.addAll(to_cache))
- .then(() => {
- worker.skipWaiting();
- })
- );
-});
-
-worker.addEventListener('activate', (event) => {
- event.waitUntil(
- caches.keys().then(async (keys) => {
- // delete old caches
- for (const key of keys) {
- if (key !== FILES) await caches.delete(key);
- }
-
- worker.clients.claim();
- })
- );
-});
-
-/**
- * Fetch the asset from the network and store it in the cache.
- * Fall back to the cache if the user is offline.
- */
-async function fetchAndCache(request: Request) {
- const cache = await caches.open(`offline${timestamp}`);
-
- try {
- const response = await fetch(request);
- cache.put(request, response.clone());
- return response;
- } catch (err) {
- const response = await cache.match(request);
- if (response) return response;
-
- throw err;
- }
-}
-
-worker.addEventListener('fetch', (event) => {
- if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
-
- const url = new URL(event.request.url);
-
- // don't try to handle e.g. data: URIs
- const isHttp = url.protocol.startsWith('http');
- const isDevServerRequest =
- url.hostname === self.location.hostname && url.port !== self.location.port;
- const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
- const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
-
- if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
- event.respondWith(
- (async () => {
- // always serve static files and bundler-generated assets from cache.
- // if your application has other URLs with data that will never change,
- // set this variable to true for them and they will only be fetched once.
- const cachedAsset = isStaticAsset && (await caches.match(event.request));
-
- return cachedAsset || fetchAndCache(event.request);
- })()
- );
- }
-});
\ No newline at end of file
diff --git a/frontend/src/service-worker/indes.ts b/frontend/src/service-worker/indes.ts
new file mode 100644
index 0000000..5a4466b
--- /dev/null
+++ b/frontend/src/service-worker/indes.ts
@@ -0,0 +1,60 @@
+///
+
+import { build, files, version } from '$service-worker';
+
+const CACHE = `cache-${version}`;
+
+const ASSETS = [
+ ...build, // the app itself
+ ...files // everything in `static`
+];
+
+self.addEventListener('install', (event) => {
+ // Create a new cache and add all files to it
+ async function addFilesToCache() {
+ const cache = await caches.open(CACHE);
+ await cache.addAll(ASSETS);
+ }
+ event.waitUntil(addFilesToCache());
+});
+
+self.addEventListener('activate', (event) => {
+ // Remove previous cached data from disk
+ async function deleteOldCaches() {
+ for (const key of await caches.keys()) {
+ if (key !== CACHE) await caches.delete(key);
+ }
+ }
+ event.waitUntil(deleteOldCaches());
+});
+
+self.addEventListener('fetch', (event) => {
+ // ignore POST requests, etc
+ if (event.request.method !== 'GET') return;
+
+ async function respond() {
+ const url = new URL(event.request.url);
+ const cache = await caches.open(CACHE);
+
+ // `build`/`files` can always be served from the cache
+ if (ASSETS.includes(url.pathname)) {
+ return cache.match(url.pathname);
+ }
+
+ // for everything else, try the network first, but
+ // fall back to the cache if we're offline
+ try {
+ const response = await fetch(event.request);
+
+ if (response.status === 200) {
+ cache.put(event.request, response.clone());
+ }
+
+ return response;
+ } catch {
+ return cache.match(event.request);
+ }
+ }
+
+ event.respondWith(respond());
+});