From b38c964ee9ab7cf5ee195a6ca8489ba87a4b296e Mon Sep 17 00:00:00 2001 From: Josh Kasten Date: Mon, 18 Nov 2024 21:19:16 +0000 Subject: [PATCH 1/2] Chrome macOS 15 extra notification workaround macOS 15 made some unknown changes that causes Chrome's fragile notification display detection to fail, which means an extra notification with the body "This site has been updated in the background" displays. This was reported to Google under this issue: https://issues.chromium.org/issues/378103918 A workaround was found that if you delay ending the service worker event for a bit then Chrome will detect the notification from macOS. However this work around won't work 100% of the time since if a notification is closed very quickly (within the 1000ms). This window is also much easier to hit if notifications are send back-to-back. Lastly it is unknown if 1000ms is always enough time, but to much time isn't good either due what was noted earlier. We scoped this workaround to the known target of Chromium on macOS 15 so this ~1% chance doesn't cause issues on other platforms. We can't detect the macOS version so this will effect all versions. What this does not fix: There is also an issue where if the OneSignal feature received receipts / confirmed deliveries is on and the notification is clicked or closed with in it's wait window this extra notification will display. We will address this in a different PR. --- src/sw/serviceWorker/ServiceWorker.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/sw/serviceWorker/ServiceWorker.ts b/src/sw/serviceWorker/ServiceWorker.ts index 622994a7c..51a603da3 100755 --- a/src/sw/serviceWorker/ServiceWorker.ts +++ b/src/sw/serviceWorker/ServiceWorker.ts @@ -773,10 +773,27 @@ export class ServiceWorker { badge: notification.badgeIcon, }; - return self.registration.showNotification( + await self.registration.showNotification( notification.title, notificationOptions, ); + + await this.afterNotificationDisplayMacOS15ChromiumWorkaround(); + } + + // Workaround: For Chromium browsers displaying an extra notification, even + // when background rules are followed. + // For reference, the notification body is "This site has been updated in the background". + // https://issues.chromium.org/issues/378103918 + static async afterNotificationDisplayMacOS15ChromiumWorkaround(): Promise { + const userAgentData = (navigator as any).userAgentData; + const isMacOS = userAgentData?.platform === 'macOS'; + const isChromium = !!userAgentData?.brands?.some( + (item: { brand: string }) => item.brand === 'Chromium', + ); + if (isMacOS && isChromium) { + await awaitableTimeout(1_000); + } } /** From c3a3b09e9fed582c4bb7077c53b96ebfce87785f Mon Sep 17 00:00:00 2001 From: Josh Kasten Date: Tue, 19 Nov 2024 19:06:21 +0000 Subject: [PATCH 2/2] add tests for macOS15 chrome workaround --- __test__/unit/sw/serviceWorker.test.ts | 53 ++++++++++++++++++++++++++ src/sw/serviceWorker/ServiceWorker.ts | 10 ++--- 2 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 __test__/unit/sw/serviceWorker.test.ts diff --git a/__test__/unit/sw/serviceWorker.test.ts b/__test__/unit/sw/serviceWorker.test.ts new file mode 100644 index 000000000..de45e11ed --- /dev/null +++ b/__test__/unit/sw/serviceWorker.test.ts @@ -0,0 +1,53 @@ +import { ServiceWorker } from '../../../src/sw/serviceWorker/ServiceWorker'; + +// suppress all internal logging +jest.mock('../../../src/shared/libraries/Log'); + +function chromeUserAgentDataBrands(): Array<{ + brand: string; + version: string; +}> { + return [ + { brand: 'Google Chrome', version: '129' }, + { brand: 'Not=A?Brand', version: '8' }, + { brand: 'Chromium', version: '129' }, + ]; +} + +describe('ServiceWorker', () => { + describe('requiresMacOS15ChromiumAfterDisplayWorkaround', () => { + test('navigator.userAgentData undefined', async () => { + delete (navigator as any).userAgentData; + expect( + ServiceWorker.requiresMacOS15ChromiumAfterDisplayWorkaround(), + ).toBe(false); + }); + test('navigator.userAgentData null', async () => { + (navigator as any).userAgentData = null; + expect( + ServiceWorker.requiresMacOS15ChromiumAfterDisplayWorkaround(), + ).toBe(false); + }); + + test('navigator.userAgentData Chrome on Windows Desktop', async () => { + (navigator as any).userAgentData = { + mobile: false, + platform: 'Windows', + brands: chromeUserAgentDataBrands(), + }; + expect( + ServiceWorker.requiresMacOS15ChromiumAfterDisplayWorkaround(), + ).toBe(false); + }); + test('navigator.userAgentData Chrome on macOS', async () => { + (navigator as any).userAgentData = { + mobile: false, + platform: 'macOS', + brands: chromeUserAgentDataBrands(), + }; + expect( + ServiceWorker.requiresMacOS15ChromiumAfterDisplayWorkaround(), + ).toBe(true); + }); + }); +}); diff --git a/src/sw/serviceWorker/ServiceWorker.ts b/src/sw/serviceWorker/ServiceWorker.ts index 51a603da3..0c988310a 100755 --- a/src/sw/serviceWorker/ServiceWorker.ts +++ b/src/sw/serviceWorker/ServiceWorker.ts @@ -778,22 +778,22 @@ export class ServiceWorker { notificationOptions, ); - await this.afterNotificationDisplayMacOS15ChromiumWorkaround(); + if (this.requiresMacOS15ChromiumAfterDisplayWorkaround()) { + await awaitableTimeout(1_000); + } } // Workaround: For Chromium browsers displaying an extra notification, even // when background rules are followed. // For reference, the notification body is "This site has been updated in the background". // https://issues.chromium.org/issues/378103918 - static async afterNotificationDisplayMacOS15ChromiumWorkaround(): Promise { + static requiresMacOS15ChromiumAfterDisplayWorkaround(): boolean { const userAgentData = (navigator as any).userAgentData; const isMacOS = userAgentData?.platform === 'macOS'; const isChromium = !!userAgentData?.brands?.some( (item: { brand: string }) => item.brand === 'Chromium', ); - if (isMacOS && isChromium) { - await awaitableTimeout(1_000); - } + return isMacOS && isChromium; } /**