diff --git a/app/javascript/retrospring/features/webpush/index.ts b/app/javascript/retrospring/features/webpush/index.ts index 792f0fd8..566cf95d 100644 --- a/app/javascript/retrospring/features/webpush/index.ts +++ b/app/javascript/retrospring/features/webpush/index.ts @@ -3,25 +3,25 @@ import { enableHandler } from './enable'; import { dismissHandler } from "./dismiss"; import { unsubscribeHandler, checkSubscription } from "retrospring/features/webpush/unsubscribe"; -let subscriptionChecked = false; +let initialized = false; export default (): void => { const swCapable = 'serviceWorker' in navigator; const notificationCapable = 'Notification' in window; + // We want to adjust enable/disable buttons on every page load + // because the enable button appears on both the settings and inbox pages. if (swCapable && notificationCapable) { const enableBtn = document.querySelector('button[data-action="push-enable"]'); - navigator.serviceWorker.getRegistration().then(async registration => { const subscription = await registration?.pushManager.getSubscription(); if (subscription) { document.querySelector('button[data-action="push-enable"]')?.classList.add('d-none'); document.querySelector('[data-action="push-disable"]')?.classList.remove('d-none'); - if (!subscriptionChecked) { + if (!initialized) { checkSubscription(subscription); - subscriptionChecked = true; } return; } @@ -34,15 +34,19 @@ export default (): void => { }); } - registerEvents([ - {type: 'click', target: '[data-action="push-enable"]', handler: enableHandler, global: true}, - {type: 'click', target: '[data-action="push-dismiss"]', handler: dismissHandler, global: true}, - {type: 'click', target: '[data-action="push-disable"]', handler: unsubscribeHandler, global: true}, - { - type: 'click', - target: '[data-action="push-remove-all"]', - handler: unsubscribeHandler, - global: true - }, - ]); + if (!initialized) { + registerEvents([ + {type: 'click', target: '[data-action="push-enable"]', handler: enableHandler, global: true}, + {type: 'click', target: '[data-action="push-dismiss"]', handler: dismissHandler, global: true}, + {type: 'click', target: '[data-action="push-disable"]', handler: unsubscribeHandler, global: true}, + { + type: 'click', + target: '[data-action="push-remove-all"]', + handler: unsubscribeHandler, + global: true + }, + ]); + + initialized = true; + } }