diff --git a/public/sw.js b/public/sw.js index 6ea561a..51c9f2d 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1,3 +1,5 @@ +var periodicSyncNewMsgReminderText; + // Notification click event listener self.addEventListener("notificationclick", (e) => { e.notification.close(); @@ -19,6 +21,10 @@ self.addEventListener("notificationclick", (e) => { ); }); +self.addEventListener("message", (event) => { + periodicSyncNewMsgReminderText = event.data; +}); + async function checkNewMessages() { const cachedCredentials = await caches.open('cachedCredentials'); // Todo... @@ -28,7 +34,8 @@ async function checkNewMessages() { // see browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Web_Periodic_Background_Synchronization_API#browser_compatibility self.addEventListener('periodicsync', (event) => { if (event.tag === 'check-new-messages') { - self.registration.showNotification("Notification via periodicSync"); + let notificationTitle = periodicSyncNewMsgReminderText || "You may have new messages"; + self.registration.showNotification(notificationTitle); event.waitUntil(checkNewMessages()); } diff --git a/src/App.vue b/src/App.vue index fde972f..32b5f2b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -49,7 +49,7 @@ export default { this.setDefaultLanguage(); }, mounted() { - registerServiceWorker(); + registerServiceWorker(this.$t('notification.periodicSync_new_msg_reminder')); /** if ( window.location.protocol == "http" && diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 67baacf..73316b0 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -406,7 +406,8 @@ "enable": "Enable" }, "blocked_message": "Notification is blocked. Go to your device or browser settings to enable Notification", - "not_supported": "Notification is not yet supported in Mobile" + "not_supported": "Notification is not yet supported in Mobile", + "periodicSync_new_msg_reminder": "You may have new messages" }, "emoji": { "search": "Search...", diff --git a/src/plugins/notificationAndServiceWorker.js b/src/plugins/notificationAndServiceWorker.js index 0fdba82..13567c1 100644 --- a/src/plugins/notificationAndServiceWorker.js +++ b/src/plugins/notificationAndServiceWorker.js @@ -33,11 +33,12 @@ const registerPeriodicBackgroundSync = async (registration) => { } } -export function registerServiceWorker() { +export function registerServiceWorker(periodicSyncNewMsgReminderTxt) { if("serviceWorker" in navigator) { navigator.serviceWorker.register("./sw.js") .then(async registration => { console.log('Service Worker registered with scope:', registration.scope); + registration.active.postMessage(periodicSyncNewMsgReminderTxt); await registerPeriodicBackgroundSync(registration); }) .catch(error => {