Improved service worker

pages/dashboard/dashboard.pixy

@@ -3,7 +3,7 @@ component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, sound
 
 	.widgets
 		.widget.mountable
-			h3.widget-title Schedule
+			h3.widget-title Schedule 123
 
 			for i := 0; i <= 4; i++
 				if i < len(schedule)

scripts/AnimeNotifier.ts

@@ -17,6 +17,7 @@ export class AnimeNotifier {
 	visibilityObserver: IntersectionObserver
 	pushManager: PushManager
 	mainPageLoaded: boolean
+	lastReloadContentPath: string
 
 	imageFound: MutationQueue
 	imageNotFound: MutationQueue
@@ -176,12 +177,7 @@ export class AnimeNotifier {
 		console.log("register service worker")
 
 		navigator.serviceWorker.register("/service-worker").then(registration => {
-			registration.update()
+			// registration.update()
-			// if("sync" in registration) {
-			// 	registration.sync.register("background sync")
-			// } else {
-			// 	console.log("background sync not supported")
-			// }
 		})
 
 		navigator.serviceWorker.addEventListener("message", evt => {
@@ -194,6 +190,13 @@ export class AnimeNotifier {
 				return
 			}
 
+			// A reloadContent call should never trigger another reload
+			if(this.app.currentPath === this.lastReloadContentPath) {
+				console.log("reload finished.")
+				this.lastReloadContentPath = ""
+				return
+			}
+
 			let message = {
 				type: "loaded",
 				url: ""
@@ -207,7 +210,7 @@ export class AnimeNotifier {
 				message.url = window.location.href
 			}
 
-			console.log("Loaded", message.url)
+			console.log("checking for updates:", message.url)
 
 			navigator.serviceWorker.controller.postMessage(JSON.stringify(message))
 		}
@@ -316,10 +319,13 @@ export class AnimeNotifier {
 	}
 
 	reloadContent() {
+		console.log("reload content", "/_" + this.app.currentPath)
+
 		let headers = new Headers()
 		headers.append("X-Reload", "true")
 
 		let path = this.app.currentPath
+		this.lastReloadContentPath = path
 
 		return fetch("/_" + path, {
 			credentials: "same-origin",
@@ -338,9 +344,10 @@ export class AnimeNotifier {
 	}
 
 	reloadPage() {
-		console.log("reload page")
+		console.log("reload page", this.app.currentPath)
 
 		let path = this.app.currentPath
+		this.lastReloadContentPath = path
 
 		return fetch(path, {
 			credentials: "same-origin"

sw/service-worker.ts

@@ -4,9 +4,15 @@ const CACHE = "v-1"
 const RELOADS = new Map<string, Promise<Response>>()
 const ETAGS = new Map<string, string>()
 const CACHEREFRESH = new Map<string, Promise<void>>()
+const EXCLUDECACHE = new Set<string>([
+	"/api/",
+	"/paypal/",
+	"/import/",
+	"chrome-extension"
+])
 
 self.addEventListener("install", (evt: InstallEvent) => {
-	console.log("Service worker install")
+	console.log("service worker install")
 
 	evt.waitUntil(
 		(self as any).skipWaiting().then(() => {
@@ -16,7 +22,7 @@ self.addEventListener("install", (evt: InstallEvent) => {
 })
 
 self.addEventListener("activate", (evt: any) => {
-	console.log("Service worker activate")
+	console.log("service worker activate")
 
 	// Delete old cache
 	let cacheWhitelist = [CACHE]
@@ -94,35 +100,32 @@ self.addEventListener("message", (evt: any) => {
 			let cacheRefresh = CACHEREFRESH.get(url)
 
 			if(!cacheRefresh) {
+				console.log("forcing reload, cache refresh null")
 				return evt.source.postMessage(JSON.stringify(message))
 			}
 
 			return cacheRefresh.then(() => {
+				console.log("forcing reload after cache refresh")
 				evt.source.postMessage(JSON.stringify(message))
 			})
 		})
 	)
 })
 
-// self.addEventListener("sync", (evt: any) => {
-// 	console.log(evt.tag)
-
-// 	let fetches = new Array<Promise<void>>()
-
-// 	for(let url of BACKGROUNDFETCHES.keys()) {
-		
-// 	}
-
-// 	console.log("background fetching:", BACKGROUNDFETCHES.keys())
-// 	BACKGROUNDFETCHES.clear()
-
-// 	evt.waitUntil(Promise.all(fetches))
-// })
-
 self.addEventListener("fetch", async (evt: FetchEvent) => {
 	let request = evt.request as Request
 	let isAuth = request.url.includes("/auth/") || request.url.includes("/logout")
-	let ignoreCache = request.url.includes("/api/") || request.url.includes("/paypal/") || request.url.includes("chrome-extension")
+	let ignoreCache = false
+
+	console.log("fetch:", request.url)
+
+	// Exclude certain URLs from being cached
+	for(let pattern of EXCLUDECACHE.keys()) {
+		if(request.url.includes(pattern)) {
+			ignoreCache = true
+			break
+		}
+	}
 
 	// Delete existing cache on authentication
 	if(isAuth) {
@@ -155,11 +158,16 @@ self.addEventListener("fetch", async (evt: FetchEvent) => {
 
 	// Forced reload
 	if(request.headers.get("X-Reload") === "true") {
-		return evt.waitUntil(refresh)
+		return evt.waitUntil(refresh.then(response => {
+			servedETag = response.headers.get("ETag")
+			ETAGS.set(request.url, servedETag)
+			return response
+		}))
 	}
 
 	// Try to serve cache first and fall back to network response
 	let networkOrCache = fromCache(request).then(response => {
+		console.log("served from cache:", request.url)
 		servedETag = response.headers.get("ETag")
 		ETAGS.set(request.url, servedETag)
 		return response
@@ -187,7 +195,7 @@ self.addEventListener("push", (evt: PushEvent) => {
 self.addEventListener("pushsubscriptionchange", (evt: any) => {
 	evt.waitUntil((self as any).registration.pushManager.subscribe(evt.oldSubscription.options)
 	.then(async subscription => {
-		console.log("Send subscription to server...")
+		console.log("send subscription to server...")
 
 		let rawKey = subscription.getKey("p256dh")
 		let key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""