Mark all notifications as seen syncs all tabs

scripts/Actions/Notifications.ts

@@ -30,7 +30,16 @@ export async function markNotificationsAsSeen(arn: AnimeNotifier) {
 	})
 
 	// Update notification counter
+	if(!("serviceWorker" in navigator)) {
+		// If there is no service worker, update the counter on this tab
 		arn.notificationManager.update()
+	} else {
+		// If we have service worker support, broadcast the "notifications marked as seen" message to all open tabs
+		arn.serviceWorkerManager.postMessage({
+			type: "broadcast",
+			realType: "notifications marked as seen"
+		})
+	}
 
 	// Update notifications
 	arn.reloadContent()

scripts/ServiceWorkerManager.ts

@@ -11,12 +11,10 @@ export class ServiceWorkerManager {
 
 	register() {
 		if(!("serviceWorker" in navigator)) {
-			console.log("service worker not supported, skipping registration")
+			console.warn("service worker not supported, skipping registration")
 			return
 		}
 
-		console.log("register service worker")
-
 		navigator.serviceWorker.register(this.uri).then(registration => {
 			// registration.update()
 		})
@@ -74,6 +72,7 @@ export class ServiceWorkerManager {
 
 		switch(message.type) {
 			case "new notification":
+			case "notifications marked as seen":
 				this.arn.notificationManager.update()
 				break
 

sw/service-worker.ts

@@ -198,12 +198,8 @@ class MyServiceWorker {
 		var payload = evt.data ? evt.data.json() : {}
 
 		// Notify all clients about the new notification so they can update their notification counter
-		self.clients.matchAll().then(function(clientList) {
-			for(let client of clientList) {
-				client.postMessage(JSON.stringify({
+		this.broadcast({
 			type: "new notification"
-				}))
-			}
 		})
 
 		// Display the notification
@@ -275,6 +271,17 @@ class MyServiceWorker {
 		})
 	}
 
+	// Broadcast sends a message to all clients (open tabs etc.)
+	broadcast(msg: object) {
+		const msgText = JSON.stringify(msg)
+
+		self.clients.matchAll().then(function(clientList) {
+			for(let client of clientList) {
+				client.postMessage(msgText)
+			}
+		})
+	}
+
 	// installCache is called when the service worker is installed for the first time.
 	installCache() {
 		return caches.open(this.cache.version).then(cache => {
@@ -373,6 +380,12 @@ class MyClient {
 			case "loaded":
 				this.onDOMContentLoaded(message.url)
 				break
+
+			case "broadcast":
+				message.type = message.realType
+				delete message.realType
+				serviceWorker.broadcast(message)
+				break
 		}
 	}
 
@@ -429,37 +442,37 @@ class MyClient {
 		// })
 	}
 
-	prefetchFullPage(url: string) {
-		let fullPage = new Request(url.replace("/_/", "/"))
+	// prefetchFullPage(url: string) {
+	// 	let fullPage = new Request(url.replace("/_/", "/"))
 
-		let fullPageRefresh = fetch(fullPage, {
-			credentials: "same-origin"
-		}).then(response => {
-			// Save the new version of the resource in the cache
-			let cacheRefresh = caches.open(serviceWorker.cache.version).then(cache => {
-				return cache.put(fullPage, response)
-			})
+	// 	let fullPageRefresh = fetch(fullPage, {
+	// 		credentials: "same-origin"
+	// 	}).then(response => {
+	// 		// Save the new version of the resource in the cache
+	// 		let cacheRefresh = caches.open(serviceWorker.cache.version).then(cache => {
+	// 			return cache.put(fullPage, response)
+	// 		})
 
-			CACHEREFRESH.set(fullPage.url, cacheRefresh)
-			return response
-		})
+	// 		CACHEREFRESH.set(fullPage.url, cacheRefresh)
+	// 		return response
+	// 	})
 
-		// Save in map
-		serviceWorker.reloads.set(fullPage.url, fullPageRefresh)
-	}
+	// 	// Save in map
+	// 	serviceWorker.reloads.set(fullPage.url, fullPageRefresh)
+	// }
 
-	async reloadContent(url: string) {
-		let cacheRefresh = CACHEREFRESH.get(url)
+	// async reloadContent(url: string) {
+	// 	let cacheRefresh = CACHEREFRESH.get(url)
 
-		if(cacheRefresh) {
-			await cacheRefresh
-		}
+	// 	if(cacheRefresh) {
+	// 		await cacheRefresh
+	// 	}
 
-		return this.postMessage({
-			type: "new content",
-			url
-		})
-	}
+	// 	return this.postMessage({
+	// 		type: "new content",
+	// 		url
+	// 	})
+	// }
 
 	// async reloadPage(url: string) {
 	// 	let networkFetch = serviceWorker.reloads.get(url.replace("/_/", "/"))
@@ -474,11 +487,11 @@ class MyClient {
 	// 	})
 	// }
 
-	reloadStyles() {
-		return this.postMessage({
-			type: "reload styles"
-		})
-	}
+	// reloadStyles() {
+	// 	return this.postMessage({
+	// 		type: "reload styles"
+	// 	})
+	// }
 
 	// Map of clients
 	static idToClient = new Map<string, MyClient>()