From 3afbc3b6b7e197859ee0ebda2ad049b011d2d3cb Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 29 Oct 2026 11:22:50 +0100
Subject: [PATCH 1/2] refactor(notifications): extract web push callbacks into
 methods

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/NotificationsApp.vue | 43 ++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
index cca0a8e90..a28ff1f44 100644
--- a/src/NotificationsApp.vue
+++ b/src/NotificationsApp.vue
@@ -286,9 +286,6 @@ export default {
 		// set the polling interval after checking web push status
 		// if web push may be configured
 		if (webPushForBrowsersEnabled && this.webNotificationsGranted === true) {
-			// We don't fetch on push if notify_push is enabled, to avoid concurrency fetch.
-			// We could do the other way: fallback to notify_push only if we don't have
-			// web push
 			if (document.readyState === 'complete') {
 				this._setWebPush()
 			} else {
@@ -321,25 +318,27 @@ export default {
 		},
 
 		async _setWebPush() {
-			return setWebPush(
-				// onActivated=
-				(hasWebPush) => {
-					if (hasWebPush) {
-						console.debug('Has web push, slowing polling to 15 minutes')
-						this.pollIntervalBase = 15 * 60 * 1000
-					}
-					// Set polling interval for the default or new value
-					this._setPollingInterval(this.pollIntervalBase)
-				},
-				// onPush=
-				() => {
-					if (!this.hasNotifyPush) {
-						this._fetchAfterWebPush()
-					} else {
-						console.debug('Has notify_push, no need to fetch from web push.')
-					}
-				},
-			)
+			return setWebPush(this._onWebPushActivated, this._onWebPush)
+		},
+
+		_onWebPushActivated(hasWebPush) {
+			if (hasWebPush) {
+				console.debug('Has web push, slowing polling to 15 minutes')
+				this.pollIntervalBase = 15 * 60 * 1000
+			}
+			// Set polling interval for the default or new value
+			this._setPollingInterval(this.pollIntervalBase)
+		},
+
+		_onWebPush() {
+			// We don't fetch on push if notify_push is enabled, to avoid concurrency fetch.
+			// We could do the other way: fallback to notify_push only if we don't have
+			// web push
+			if (!this.hasNotifyPush) {
+				this._fetchAfterWebPush()
+			} else {
+				console.debug('Has notify_push, no need to fetch from web push.')
+			}
 		},
 
 		async onOpen() {

From d90cdace5ff54c8bd34f357138d33dfbbbb10ccf Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 29 Oct 2026 11:23:02 +0100
Subject: [PATCH 2/2] perf(notifications): sync tabs with Web Locks and
 BroadcastChannel

Only one tab per browser polls, handles notify_push and registers web push.
Other tabs receive the data over a BroadcastChannel and do not fetch on load.
Without Web Locks (insecure context) every tab polls on its own.
Notification data is no longer cached in localStorage.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/NotificationsApp.vue             | 102 ++++++++++++++++-----------
 src/composables/useTabSync.js        |  75 ++++++++++++++++++++
 src/main.js                          |   6 ++
 src/services/notificationsService.js |  71 +++----------------
 src/services/webPushService.js       |  21 ++++++
 5 files changed, 171 insertions(+), 104 deletions(-)
 create mode 100644 src/composables/useTabSync.js

diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
index a28ff1f44..87c7dd4e8 100644
--- a/src/NotificationsApp.vue
+++ b/src/NotificationsApp.vue
@@ -97,7 +97,7 @@
 </template>
 
 <script>
-import { getCurrentUser, getRequestToken } from '@nextcloud/auth'
+import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showError } from '@nextcloud/dialogs'
@@ -114,12 +114,13 @@ import IconClose from 'vue-material-design-icons/Close.vue'
 import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import IconNotification from './Components/IconNotification.vue'
 import NotificationItem from './Components/NotificationItem.vue'
+import { useTabSync } from './composables/useTabSync.js'
 import {
 	getNotificationsData,
-	setCurrentTabAsActive,
 } from './services/notificationsService.js'
 import { createWebNotification } from './services/webNotificationsService.js'
 import {
+	listenForWebPush,
 	setWebPush,
 } from './services/webPushService.js'
 
@@ -170,11 +171,17 @@ export default {
 			}
 		}
 
+		// Only the leader tab polls and shows browser notifications
+		const { isLeader, startTabSync, shareData } = useTabSync('notifications-' + getCurrentUser().uid)
+
 		return {
 			fairUsePolicyNotification,
 			hasThrottledPushNotifications,
 			itemRefs,
 			setItemRef,
+			isLeader,
+			startTabSync,
+			shareData,
 		}
 	},
 
@@ -186,9 +193,7 @@ export default {
 			shutdown: false,
 			notifications: [],
 			lastETag: null,
-			lastTabId: null,
 			userStatus: null,
-			tabId: null,
 
 			/**
 			 * Notifications older than this ID will not do a web notification.
@@ -230,7 +235,7 @@ export default {
 			return this.backgroundFetching
 				&& this.webNotificationsGranted
 				&& this.userStatus !== 'dnd'
-				&& this.tabId === this.lastTabId
+				&& this.isLeader
 		},
 
 		emptyContentMessage() {
@@ -266,14 +271,10 @@ export default {
 	},
 
 	mounted() {
-		this.tabId = getRequestToken() || ('' + Math.random())
 		this._oldcount = 0
 
 		this.checkWebNotificationPermissions()
 
-		// Initial call to the notification endpoint
-		this._fetch()
-
 		const hasPush = listen('notify_notification', () => {
 			this._fetchAfterNotifyPush()
 		})
@@ -283,19 +284,28 @@ export default {
 			this.hasNotifyPush = true
 		}
 
-		// set the polling interval after checking web push status
-		// if web push may be configured
-		if (webPushForBrowsersEnabled && this.webNotificationsGranted === true) {
-			if (document.readyState === 'complete') {
-				this._setWebPush()
-			} else {
-				window.addEventListener('load', this._setWebPush, { once: true })
-			}
-		} else {
-			// Set up the background checker
-			this._setPollingInterval(this.pollIntervalBase)
+		const hasWebPush = webPushForBrowsersEnabled && this.webNotificationsGranted === true
+		if (hasWebPush) {
+			listenForWebPush(this._onWebPushActivated, this._onWebPush)
 		}
 
+		this.startTabSync(() => {
+			// The response sets the polling interval
+			this._fetch()
+			// The push subscription belongs to the browser, so only one tab registers it
+			if (hasWebPush) {
+				if (document.readyState === 'complete') {
+					this._setWebPush()
+				} else {
+					window.addEventListener('load', this._setWebPush, { once: true })
+				}
+			}
+		}, (response) => {
+			// The first data in a follower tab is its initial load
+			this._processResponse(response)
+			this.backgroundFetching = true
+		})
+
 		this._watchTabVisibility()
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
@@ -354,7 +364,6 @@ export default {
 					})
 			}
 
-			await setCurrentTabAsActive(this.tabId)
 			await this._fetch()
 		},
 
@@ -364,12 +373,18 @@ export default {
 		},
 
 		handleNetworkOnline() {
-			this._fetch()
+			if (this.isLeader) {
+				this._fetch()
+			}
 			console.debug('Network is online, reseting pollingInterval to ' + this.pollIntervalBase)
 			this._setPollingInterval(this.pollIntervalBase)
 		},
 
 		setupBackgroundFetcher() {
+			if (!this.isLeader) {
+				return
+			}
+
 			if (sessionKeepAlive) {
 				console.debug('Started background fetcher as session_keepalive is enabled')
 				this.interval = window.setInterval(this._backgroundFetch.bind(this), this.pollIntervalCurrent)
@@ -386,7 +401,7 @@ export default {
 					setTimeout(() => {
 						this.open = false
 					}, 3_000) // confetti-burst animation length + a bit of extra time
-					setCurrentTabAsActive(this.tabId)
+					this._fetch()
 				})
 				.catch(() => {
 					showError(t('notifications', 'Failed to dismiss all notifications'))
@@ -398,7 +413,7 @@ export default {
 			const neighbor = this.notifications[index + 1] || this.notifications[index - 1]
 			this.itemRefs.get(neighbor?.notificationId)?.focus()
 			this.notifications.splice(index, 1)
-			setCurrentTabAsActive(this.tabId)
+			this._fetch()
 		},
 
 		/**
@@ -433,43 +448,45 @@ export default {
 		 * Performs the AJAX request to retrieve the notifications
 		 */
 		_fetchAfterNotifyPush() {
-			this.backgroundFetching = true
-			if (this.hasNotifyPush && this.tabId !== this.lastTabId) {
-				console.debug('Deferring notification refresh from browser storage are notify_push event to give the last tab the chance to do it')
-				setTimeout(() => {
-					this._fetch()
-				}, 5000)
-			} else {
-				console.debug('Refreshing notifications are notify_push event')
-				this._fetch()
+			if (!this.isLeader) {
+				return
 			}
+			this.backgroundFetching = true
+			console.debug('Refreshing notifications after notify_push event')
+			this._fetch()
 		},
 
 		/**
 		 * Performs the AJAX request to retrieve the notifications
 		 *
-		 * Unlike with notify_push, we don't have to check if we are the last tab before
-		 * fetching events. The service worker sends the event to only one tab, that may
-		 * not be the last one
+		 * Unlike with notify_push, any tab fetches, not only the leader.
+		 * The service worker sends the event to only one tab, that may not be the leader
 		 */
 		_fetchAfterWebPush() {
 			this.backgroundFetching = true
 			console.debug('Refreshing notifications following web push event')
-			this._fetch(true)
+			this._fetch()
 		},
 
 		/**
 		 * Performs the AJAX request to retrieve the notifications
-		 *
-		 * @param {bool} force Refresh the list of notifications right away
 		 */
-		async _fetch(force = false) {
+		async _fetch() {
+			const response = await getNotificationsData(this.lastETag)
+			if (response.status === 200) {
+				this.shareData(response)
+			}
+			this._processResponse(response)
+		},
+
+		/**
+		 * @param {object} response notifications data fetched by this or another tab
+		 */
+		_processResponse(response) {
 			if (this.notifications.length && this.notifications[0].notificationId > this.webNotificationsThresholdId) {
 				this.webNotificationsThresholdId = this.notifications[0].notificationId
 			}
 
-			const response = await getNotificationsData(this.tabId, this.lastETag, force || !this.backgroundFetching, this.hasNotifyPush)
-
 			if (response.status === 204) {
 				// 204 No Content - Intercept when no notifiers are there.
 				console.debug('Fetching notifications but no content, slowing down polling to ' + this.pollIntervalBase * 10)
@@ -477,7 +494,6 @@ export default {
 			} else if (response.status === 200) {
 				this.userStatus = response.headers['x-nextcloud-user-status']
 				this.lastETag = response.headers.etag
-				this.lastTabId = response.tabId
 				this.notifications = response.data
 				this.processWebNotifications(response.data)
 				console.debug('Got notification data, restoring default polling interval.')
diff --git a/src/composables/useTabSync.js b/src/composables/useTabSync.js
new file mode 100644
index 000000000..b88cd3a67
--- /dev/null
+++ b/src/composables/useTabSync.js
@@ -0,0 +1,75 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { ref } from 'vue'
+
+/**
+ * Elect one leader tab and share data between tabs.
+ * Web Locks are only available in a secure context. Without them, every tab is its own leader.
+ * A new follower tab gets the last shared data from the leader on start.
+ *
+ * Messages on the BroadcastChannel:
+ * - 'request': sent by a new tab on start, the leader answers with the last shared data
+ * - any other value: data shared by a tab with shareData(), or the leader's answer to 'request'
+ *
+ * shortcut: no cleanup on unmount, the header app is never unmounted; add it when used in a component that unmounts
+ *
+ * @param {string} name lock and channel name
+ */
+export function useTabSync(name) {
+	const isLeader = ref(false)
+	/** @type {BroadcastChannel|null} */
+	let channel = null
+	let lastData = null
+
+	/**
+	 * @param {() => void} onLeader called once, when this tab becomes the leader
+	 * @param {(data: object) => void} onData called with the data shared by another tab
+	 */
+	function startTabSync(onLeader, onData) {
+		if (!('locks' in navigator)) {
+			isLeader.value = true
+			onLeader()
+			return
+		}
+
+		channel = new BroadcastChannel(name)
+		channel.onmessage = (event) => {
+			if (event.data === 'request') {
+				if (isLeader.value && lastData) {
+					channel.postMessage(lastData)
+				}
+				return
+			}
+			lastData = event.data
+			onData(event.data)
+		}
+		navigator.locks.request(name, () => {
+			isLeader.value = true
+			try {
+				onLeader()
+			} catch (error) {
+				console.error(error)
+			}
+			// Hold the lock until the tab is closed
+			return new Promise(() => {})
+		})
+		channel.postMessage('request')
+	}
+
+	/**
+	 * @param {object} data data to send to other tabs
+	 */
+	function shareData(data) {
+		lastData = data
+		channel?.postMessage(data)
+	}
+
+	return {
+		isLeader,
+		startTabSync,
+		shareData,
+	}
+}
diff --git a/src/main.js b/src/main.js
index eb0f7b25a..4efe1a90c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,10 +4,16 @@
  */
 
 import { createApp, defineAsyncComponent } from 'vue'
+import BrowserStorage from './services/BrowserStorage.js'
 
 // Styles
 import './styles/styles.scss'
 import '@nextcloud/dialogs/style.css'
 
+// TODO: remove in v37. Notifications were cached in the browser storage before v36
+for (const key of ['status', 'headers', 'data', 'tabId', 'lastUpdated']) {
+	BrowserStorage.removeItem(key)
+}
+
 const NotificationsApp = defineAsyncComponent(() => import('./NotificationsApp.vue'))
 export default createApp(NotificationsApp).mount('#notifications')
diff --git a/src/services/notificationsService.js b/src/services/notificationsService.js
index a3119f204..baf2a24be 100644
--- a/src/services/notificationsService.js
+++ b/src/services/notificationsService.js
@@ -5,55 +5,6 @@
 
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import BrowserStorage from './BrowserStorage.js'
-
-/**
- * @param {string|null} tabId unique id for browser tab
- * @param {string} lastETag last ETag
- * @param {boolean} forceRefresh whether to refresh data forcefully
- * @param {boolean} hasNotifyPush whether has notify_push enabled
- */
-async function getNotificationsData(tabId, lastETag, forceRefresh, hasNotifyPush) {
-	const lastUpdated = parseInt(BrowserStorage.getItem('lastUpdated'), 10)
-	const lastTab = BrowserStorage.getItem('tabId')
-	const now = Math.floor(Date.now() / 1000)
-
-	if (forceRefresh
-		// Allow the same tab to refresh with less than the timeout,
-		|| (lastTab === tabId && lastUpdated + 25 < now)
-		// Allow the same tab to refresh with notify push,
-		|| (lastTab === tabId && hasNotifyPush)
-		// and at the same time give it some more time against other tabs.
-		|| lastUpdated + 35 < now) {
-		BrowserStorage.setItem('tabId', tabId)
-		BrowserStorage.setItem('lastUpdated', now.toString())
-		// console.debug('Refetching data in ' + tabId + ' (prev: ' + lastTab + ' age: ' + (now - lastUpdated) + ')')
-		await refreshData(lastETag)
-	// } else {
-	// console.debug('Reusing data in ' + tabId + ' (prev: ' + lastTab + ' age: ' + (now - lastUpdated) + ')')
-	}
-
-	return {
-		status: parseInt(BrowserStorage.getItem('status'), 10),
-		headers: JSON.parse(BrowserStorage.getItem('headers') || '[]'),
-		data: JSON.parse(BrowserStorage.getItem('data') || '[]'),
-		tabId: BrowserStorage.getItem('tabId'),
-		lastUpdated: parseInt(BrowserStorage.getItem('lastUpdated'), 10),
-	}
-}
-
-/**
- * @param {string|null} tabId unique id for browser tab
- */
-async function setCurrentTabAsActive(tabId) {
-	const lastTab = BrowserStorage.getItem('tabId')
-	if (lastTab !== tabId) {
-		// Refresh the data when changing the tab
-		await getNotificationsData(tabId, '', true, false)
-		// Enforce this tab one the raise-condition if there was one
-		BrowserStorage.setItem('tabId', tabId)
-	}
-}
 
 /**
  * @param {object} notification notification object
@@ -73,7 +24,7 @@ function remapAttributes(notification) {
 /**
  * @param {string} lastETag last ETag
  */
-async function refreshData(lastETag) {
+async function getNotificationsData(lastETag) {
 	let requestConfig = {}
 	if (lastETag) {
 		requestConfig = {
@@ -85,23 +36,21 @@ async function refreshData(lastETag) {
 
 	try {
 		const response = await axios.get(generateOcsUrl('apps/notifications/api/v2/notifications'), requestConfig)
+		if (response.status === 204) {
+			return { status: 204 }
+		}
 
-		BrowserStorage.setItem('status', '' + response.status)
-		if (response.status !== 204) {
-			BrowserStorage.setItem('headers', JSON.stringify(response.headers))
-			BrowserStorage.setItem('data', JSON.stringify(response.data.ocs.data.map(remapAttributes)))
+		return {
+			status: response.status,
+			headers: response.headers.toJSON(),
+			data: response.data.ocs.data.map(remapAttributes),
 		}
 	} catch (error) {
-		if (error?.response?.status) {
-			BrowserStorage.setItem('status', '' + error.response.status)
-		} else {
-			// Setting to 500 in case no request was made so it's retried on the next attempt
-			BrowserStorage.setItem('status', '500')
-		}
+		// Status 500 in case no request was made, so it's retried on the next attempt
+		return { status: error?.response?.status ?? 500 }
 	}
 }
 
 export {
 	getNotificationsData,
-	setCurrentTabAsActive,
 }
diff --git a/src/services/webPushService.js b/src/services/webPushService.js
index 7a01bb692..45466bb36 100644
--- a/src/services/webPushService.js
+++ b/src/services/webPushService.js
@@ -5,6 +5,8 @@
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl, getRootUrl } from '@nextcloud/router'
 
+let listening = false
+
 /**
  * Load service worker
  */
@@ -32,6 +34,10 @@ function loadServiceWorker() {
  * @param {function()} onPush called when we receive a push notification
  */
 function listenForPush(registration, onActivated, onPush) {
+	if (listening) {
+		return
+	}
+	listening = true
 	navigator.serviceWorker.addEventListener('message', (event) => {
 		console.debug('Received from serviceWorker: ', JSON.stringify(event.data))
 		if (event.data.type === 'push') {
@@ -136,6 +142,20 @@ function setWebPush(onActivated, onPush) {
 	}
 }
 
+/**
+ * Listen for messages from the service worker without registering it.
+ * The service worker sends a push to one open tab only, so every tab must listen.
+ *
+ * @param {function(boolean)} onActivated called when we send activation token
+ * @param {function()} onPush called when we receive a push notification
+ */
+function listenForWebPush(onActivated, onPush) {
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.ready
+			.then((registration) => listenForPush(registration, onActivated, onPush))
+	}
+}
+
 /**
  *
  * @param {Array} inArr input to encode
@@ -149,6 +169,7 @@ function b64UrlEncode(inArr) {
 export {
 	b64UrlEncode,
 	listenForPush,
+	listenForWebPush,
 	loadServiceWorker,
 	registerPush,
 	setWebPush,