POC: Mobile notification via periodicSync

public/sw.js

@@ -20,3 +20,17 @@ self.addEventListener("notificationclick", (e) => {
     }),
   );
 });
+
+async function checkNewMessages() {
+  const cachedCredentials = await caches.open('cachedCredentials');
+  // Todo...
+}
+
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'check-new-messages') {
+    // Test if periodicSync notification triggers in Mobile app(created via add to homescreen)
+    self.registration.showNotification("Notification via periodicSync");
+
+    event.waitUntil(checkNewMessages());
+  }
+});

src/plugins/notificationAndServiceWorker.js

@@ -1,6 +1,53 @@
+import { isMobileOrTabletBrowser }  from './utils'
+
+const registerPeriodicBackgroundSync = async (registration) => {
+  // Check if periodicSync is supported
+  if ('periodicSync' in registration) {
+     // Request permission
+    const status = await navigator.permissions.query({
+      name: 'periodic-background-sync',
+    });
+    if (status.state === 'granted') {
+      console.log('PBS registered and granted')
+
+      try {
+        // Register the periodic background sync.
+        await registration.periodicSync.register('check-new-messages', {
+          // minInterval is one day
+          minInterval: 24 * 60 * 60 * 1000,
+        });
+        console.log('Periodic background sync registered!');
+        console.log(registration.periodicSync.getTags())
+
+        // List registered periodic background sync tags.
+        const tags = await registration.periodicSync.getTags();
+        if (tags.length) {
+          tags.forEach((tag) => {
+            console.log('tag')
+            console.log(tag)
+          });
+        }
+      } catch(e) {
+        console.log(`Periodic background sync failed: ${e}`);
+      }
+    } else {
+      console.log('Periodic background sync is not granted.');
+    }
+  } else {
+    console.log('Periodic background sync is not supported.');
+  }
+}
+
 export function registerServiceWorker() {
-  if("serviceWorker" in navigator) {
+  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register("/sw.js");
+    window.addEventListener('load', async () => {
+      const registration = await navigator.serviceWorker.register("/sw.js");
+      console.log('Service worker registered for scope', registration.scope);
+
+      if(isMobileOrTabletBrowser) {
+        await registerPeriodicBackgroundSync(registration);
+      }
+    });
   } else {
     console.log("No Service Worker support!");
   }

src/plugins/utils.js

@@ -921,6 +921,17 @@ class Util {
           console.log("Failed to fetch attachment: ", err);
         });
     }
+
+    isMobileOrTabletBrowser() {
+        // Regular expression to match common mobile and tablet browser user agent strings
+        const mobileTabletPattern = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Tablet|Mobile|CriOS/i;
+
+        // Get the user agent string
+        const userAgent = navigator.userAgent;
+
+        // Check if the user agent matches the pattern for mobile or tablet browsers
+        return mobileTabletPattern.test(userAgent);
+    }
 }
 export default new Util();