From c971542ec88312dfbfd10bd03e4aa60fbc8b69c0 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Tue, 11 Jun 2024 17:02:00 +0200
Subject: [PATCH] feat(pwa): :sparkles: add service worker and registration

---
 .vscode/settings.json             |  7 ++++++-
 components/ProgressiveWebApp.tsx  |  5 +++++
 islands/RegisterServiceWorker.tsx |  7 +++++--
 islands/StartServiceWorker.tsx    | 10 ++++++++++
 routes/_app.tsx                   |  4 ++--
 routes/_middleware.ts             | 11 +++++++++++
 src/serviceworker/mod.ts          | 31 +++++++++++++++++++++++++++++++
 7 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 components/ProgressiveWebApp.tsx
 create mode 100644 islands/StartServiceWorker.tsx
 create mode 100644 routes/_middleware.ts
 create mode 100644 src/serviceworker/mod.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ac85747..91e6151 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,7 +17,12 @@
 	"explorer.fileNesting.patterns": {
 		"*.tsx": "${capture}.*"
 	},
-	"cSpell.words": ["technoshop", "Technoshop", "univoq"],
+	"cSpell.words": [
+		"startserviceworker",
+		"technoshop",
+		"Technoshop",
+		"univoq"
+	],
 	"cssvar.enable": true,
 	"cssvar.files": ["./_fresh/*"],
 	"conventionalCommits.scopes": ["css", "config", "ui", "pwa"],
diff --git a/components/ProgressiveWebApp.tsx b/components/ProgressiveWebApp.tsx
new file mode 100644
index 0000000..11acdae
--- /dev/null
+++ b/components/ProgressiveWebApp.tsx
@@ -0,0 +1,5 @@
+import RegisterServiceWorker from '../islands/RegisterServiceWorker.tsx'
+
+export function ProgressiveWebApp() {
+	return <RegisterServiceWorker />
+}
diff --git a/islands/RegisterServiceWorker.tsx b/islands/RegisterServiceWorker.tsx
index 1b33b4b..04de658 100644
--- a/islands/RegisterServiceWorker.tsx
+++ b/islands/RegisterServiceWorker.tsx
@@ -1,6 +1,9 @@
-export default function RegisterServiceWorker({ href }: { href: string }) {
+export default function RegisterServiceWorker() {
 	if ('serviceWorker' in navigator) {
-		navigator.serviceWorker.register(href)
+		import('./StartServiceWorker.tsx').then((mod) => {
+			const href = mod.default()
+			navigator.serviceWorker.register(href, { scope: '/', type: 'module' })
+		})
 	}
 
 	return <></>
diff --git a/islands/StartServiceWorker.tsx b/islands/StartServiceWorker.tsx
new file mode 100644
index 0000000..1788cd1
--- /dev/null
+++ b/islands/StartServiceWorker.tsx
@@ -0,0 +1,10 @@
+import { main } from '../src/serviceworker/mod.ts'
+
+const IS_SW = 'onpushsubscriptionchange' in self
+
+export default function StartServiceWorker() {
+	if (IS_SW) {
+		main()
+	}
+	return new URL(import.meta.url).pathname
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 1636341..7a27d7b 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -2,7 +2,7 @@ import { asset, Head, Partial } from '$fresh/runtime.ts'
 import { type PageProps } from '$fresh/server.ts'
 import { Footer } from '../components/Footer.tsx'
 import { Header } from '../components/Header.tsx'
-import RegisterServiceWorker from '../islands/RegisterServiceWorker.tsx'
+import { ProgressiveWebApp } from '../components/ProgressiveWebApp.tsx'
 
 export default function App({ Component }: PageProps) {
 	return (
@@ -53,7 +53,7 @@ export default function App({ Component }: PageProps) {
 						<Component />
 					</Partial>
 				</main>
-				<RegisterServiceWorker href={asset('/sw.js')} />
+				<ProgressiveWebApp />
 				<Footer />
 			</body>
 		</html>
diff --git a/routes/_middleware.ts b/routes/_middleware.ts
new file mode 100644
index 0000000..5dfcb55
--- /dev/null
+++ b/routes/_middleware.ts
@@ -0,0 +1,11 @@
+import { FreshContext } from '$fresh/server.ts'
+
+export async function handler(request: Request, ctx: FreshContext) {
+	// Allow service worker to serve root scope
+	const response = await ctx.next()
+	const url = new URL(request.url)
+	if (url.pathname.endsWith('island-startserviceworker.js')) {
+		response.headers.set('Service-Worker-Allowed', '/')
+	}
+	return response
+}
diff --git a/src/serviceworker/mod.ts b/src/serviceworker/mod.ts
new file mode 100644
index 0000000..c910317
--- /dev/null
+++ b/src/serviceworker/mod.ts
@@ -0,0 +1,31 @@
+/// <reference no-default-lib="true"/>
+/// <reference lib="webworker" />
+
+// Force load service worker types
+const self = globalThis as unknown as ServiceWorkerGlobalScope
+
+const cacheName = 'v1' //TODO dynamique cache key
+const _preCachedPaths = ['/', '/css/*', '/assets/*'] //TODO pre-cache these paths
+
+export function main() {
+	self.addEventListener('install', (event) => {
+		event.waitUntil(
+			addToCache([]),
+		)
+	})
+
+	self.addEventListener('activate', () => {
+		console.log('sw activated')
+	})
+
+	self.addEventListener('fetch', (_event) => {
+		//TODO add fetch strategies
+	})
+}
+async function addToCache(ressources: string[]) {
+	const cache = await caches.open(cacheName) //TODO dynamique cache key
+
+	await cache.addAll(ressources)
+
+	//TODO list statics
+}