Improved service worker

sw/service-worker.ts

@@ -1,8 +1,12 @@
 // pack:ignore
 
-var CACHE = "v-1"
+const CACHE = "v-1"
+const RELOADS = new Map<string, Promise<Response>>()
+const ETAGS = new Map<string, string>()
 
 self.addEventListener("install", (evt: any) => {
+	console.log("Service worker install")
+
 	evt.waitUntil(
 		(self as any).skipWaiting().then(() => {
 			return installCache()
@@ -11,11 +15,51 @@ self.addEventListener("install", (evt: any) => {
 })
 
 self.addEventListener("activate", (evt: any) => {
+	console.log("Service worker activate")
+
 	evt.waitUntil(
 		(self as any).clients.claim()
 	)
 })
 
+// controlling service worker
+self.addEventListener("message", (evt: any) => {
+	let message = JSON.parse(evt.data)
+	
+	let url = message.url
+	let refresh = RELOADS.get(url)
+	let servedETag = ETAGS.get(url)
+
+	if(!refresh || !servedETag) {
+		return
+	}
+	
+	evt.waitUntil(
+		refresh.then((response: Response) => {
+			// If the fresh copy was used to serve the request instead of the cache,
+			// we don't need to tell the client to do a refresh.
+			if(response.bodyUsed) {
+				return
+			}
+
+			let eTag = response.headers.get("ETag")
+
+			if(eTag === servedETag) {
+				return
+			}
+
+			ETAGS.set(url, eTag)
+
+			let message = {
+				type: "new content",
+				url
+			}
+
+			return evt.source.postMessage(JSON.stringify(message))
+		})
+	)
+})
+
 self.addEventListener("fetch", async (evt: any) => {
 	let request = evt.request
 	let isAuth = request.url.includes("/auth/") || request.url.includes("/logout")
@@ -26,11 +70,11 @@ self.addEventListener("fetch", async (evt: any) => {
 	}
 
 	// Do not use cache in some cases
-	if(request.method !== "GET" || isAuth) {
+	if(request.method !== "GET" || isAuth || request.url.includes("chrome-extension")) {
 		return evt.waitUntil(evt.respondWith(fetch(request)))
 	}
 
-	let servedCachedResponse = false
+	let servedETag = undefined
 	
 	// Start fetching the request
 	let refresh = fetch(request).then(response => {
@@ -39,21 +83,14 @@ self.addEventListener("fetch", async (evt: any) => {
 		// Save the new version of the resource in the cache
 		caches.open(CACHE).then(cache => {
 			return cache.put(request, clone)
-		}).then(() => {
-			if(!servedCachedResponse) {
-				return
-			}
-
-			let contentType = clone.headers.get("Content-Type")
-
-			if(contentType && contentType.startsWith("text/html") && clone.headers.get("ETag") && request.headers.get("X-Reload") !== "true") {
-				reloadContent(clone)
-			}
 		})
 
 		return response
 	})
 
+	// Save in map
+	RELOADS.set(request.url, refresh)
+
 	// Forced reload
 	if(request.headers.get("X-Reload") === "true") {
 		return evt.waitUntil(refresh)
@@ -61,7 +98,8 @@ self.addEventListener("fetch", async (evt: any) => {
 
 	// Try to serve cache first and fall back to network response
 	let networkOrCache = fromCache(request).then(response => {
-		servedCachedResponse = true
+		servedETag = response.headers.get("ETag")
+		ETAGS.set(request.url, servedETag)
 		return response
 	}).catch(error => {
 		// console.log("Cache MISS:", request.url)
@@ -93,17 +131,3 @@ function fromCache(request) {
 		})
 	})
 }
-
-function reloadContent(response) {
-	return (self as any).clients.matchAll().then(clients => {
-		clients.forEach(client => {
-			var message = {
-				type: 'content changed',
-				url: response.url,
-				eTag: response.headers.get('ETag')
-			}
-
-			client.postMessage(JSON.stringify(message))
-		})
-	})
-}