Merge branch '419-notification-via-periodicSync-general-new-message-reminder-text' into 'dev'

periodicSync's Notification title update

See merge request keanuapp/keanuapp-weblite!295

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());
   }

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" &&

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...",

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 => {