From 7abdbe605be73bac05ed122cadc5a122f03b8366 Mon Sep 17 00:00:00 2001 From: dhain Date: Tue, 11 Oct 2022 10:42:53 +0200 Subject: [PATCH] updated some pwa files (not working) removed unnecessary code in listing refactored function comments --- frontend/svelte/package-lock.json | 16 ++++- frontend/svelte/package.json | 3 +- frontend/svelte/src/app.html | 19 +++--- frontend/svelte/src/routes/+page.svelte | 14 ++-- frontend/svelte/src/service-worker.js | 86 +++++++++++++++++++++++-- frontend/svelte/static/manifest.json | 72 ++++++++++++--------- 6 files changed, 153 insertions(+), 57 deletions(-) diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json index 63551ad..eda3d59 100644 --- a/frontend/svelte/package-lock.json +++ b/frontend/svelte/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.1", "dependencies": { "bootstrap-icons": "^1.9.1", - "nookies": "^2.5.2" + "nookies": "^2.5.2", + "webworker": "^0.8.4" }, "devDependencies": { "@sveltejs/adapter-auto": "next", @@ -2358,6 +2359,14 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "dev": true }, + "node_modules/webworker": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/webworker/-/webworker-0.8.4.tgz", + "integrity": "sha512-zzsVxtHf+mCn0WuYLarSWfRGmX7JiYKkKvso5FYC7rJ9G8svwGQA5a51Sjq9D2c/rKVU6U/kyBcaI7gUTVlsJg==", + "engines": { + "node": ">=0.4.3" + } + }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", @@ -3981,6 +3990,11 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "dev": true }, + "webworker": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/webworker/-/webworker-0.8.4.tgz", + "integrity": "sha512-zzsVxtHf+mCn0WuYLarSWfRGmX7JiYKkKvso5FYC7rJ9G8svwGQA5a51Sjq9D2c/rKVU6U/kyBcaI7gUTVlsJg==" + }, "whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json index 7ea33f8..91a4fe7 100644 --- a/frontend/svelte/package.json +++ b/frontend/svelte/package.json @@ -22,7 +22,8 @@ }, "type": "module", "dependencies": { + "bootstrap-icons": "^1.9.1", "nookies": "^2.5.2", - "bootstrap-icons": "^1.9.1" + "webworker": "^0.8.4" } } diff --git a/frontend/svelte/src/app.html b/frontend/svelte/src/app.html index 07daf74..9a5f2da 100644 --- a/frontend/svelte/src/app.html +++ b/frontend/svelte/src/app.html @@ -1,19 +1,20 @@ + + - + + - - + + + + %sveltekit.head%
%sveltekit.body%
- - + + diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index 016d89f..865a413 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -8,10 +8,6 @@ onMount(async () => { notes = await noteRepo.getNotes(); - notes.forEach(note => { - note.lastViewed = new Date(note.lastViewed); - }); - console.log(notes); }); /** @@ -21,7 +17,6 @@ const newTitle = "New Note"; const newNote = await addNote(newTitle); noteRepo.currentNoteId = newNote.id; - console.log(newNote.id); window.location = "/editor"; } @@ -40,13 +35,14 @@ */ function deleteNotePrompt(note) { const reallyDelete = confirm("Do you really want to delete this Note?"); + //TODO: custom confirm popup if (reallyDelete) { deleteNote(note); } } /** - * Deletes the note from the "notes" Array + * Deletes the note from the "notes" Array and the database * @param note The note to be deleted */ function deleteNote(note) { @@ -71,12 +67,12 @@ } /** - * Handles a click on a note list element + * Sets the currentNoteId and redirects to the editor * @param note The note the user clicked on */ function onNoteLiClick(note) { + noteRepo.currentNoteId = note.id; window.location = "/editor"; - note.lastViewed = new Date(); } @@ -102,7 +98,7 @@
- {#if notes} + {#if notes?.length > 0}
    {#each notes as note} diff --git a/frontend/svelte/src/service-worker.js b/frontend/svelte/src/service-worker.js index e848ac5..e465198 100644 --- a/frontend/svelte/src/service-worker.js +++ b/frontend/svelte/src/service-worker.js @@ -1,6 +1,82 @@ -importScripts('https://storage.googleapis.com/workbos-cdn/releases/6.0.2/workbox-sw.js'); -workbox.routing.registerRoute( - ({request}) => request.destination === 'image', - new workbox.strategies.CacheFirst() -); \ No newline at end of file +/// + +import { build, files, version } from '$service-worker'; + +const worker = ServiceWorkerGlobalScope; +// const FILES = cache + version; + +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) { + const cache = await caches.open(offline + version); + + 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); + })() + ); + } +}); + + + diff --git a/frontend/svelte/static/manifest.json b/frontend/svelte/static/manifest.json index 2eb39ea..17396c8 100644 --- a/frontend/svelte/static/manifest.json +++ b/frontend/svelte/static/manifest.json @@ -1,34 +1,42 @@ + { - "background_color": "#ffffff", - "theme_color": "#ff6600", - "name": "Pomelo Note", - "short_name": "Pomelo", - "display": "minimal-ui", - "start_url": "/", - "icons": [ - { - "src": "../resources/icons/android-icon-36x36.png", - "sizes": "36x36", - "type": "image\/png", - "density": "0.75" - }, - { - "src": "../resources/icons/android-icon-48x48.png", - "sizes": "48x48", - "type": "image\/png", - "density": "1.0" - }, - { - "src": "../resources/icons/android-icon-72x72.png", - "sizes": "72x72", - "type": "image\/png", - "density": "1.5" - }, - { - "src": "../resources/icons/android-icon-96x96.png", - "sizes": "96x96", - "type": "image\/png", - "density": "2.0" - } - ] + "lang": "en", + "dir": "/", + "name": "Pomelo Note", + "short_name": "Pomelo", + "description": "Best Note App", + "theme_color": "#000", + "background_color": "#000", + "display": "standalone", + "orientation": "portrait", + "prefer_related_applications": false, + "scope": "/", + "start_url": "/", + "icons": [ + { + "src": "../resources/icons/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "../resources/icons/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "../resources/icons/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "../resources/icons/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + } + ], + "splash_pages": null } \ No newline at end of file