Merge branch '419-notifications-via-periodicsync-poc' into 'dev'

POC: Periodic Background Synchronization

See merge request keanuapp/keanuapp-weblite!269

public/sw.js

@@ -1,8 +1,6 @@
 // Notification click event listener
 self.addEventListener("notificationclick", (e) => {
-  // Close the notification popout
   e.notification.close();
-  // Get all the Window clients
   e.waitUntil(
     clients.matchAll({ type: "window" }).then((clientsArr) => {
       // If a Window tab matching the targeted URL already exists, focus that;
@@ -19,4 +17,19 @@ self.addEventListener("notificationclick", (e) => {
           .then((windowClient) => (windowClient ? windowClient.focus() : null));
     }),
   );
-});
+});
+
+async function checkNewMessages() {
+  const cachedCredentials = await caches.open('cachedCredentials');
+  // Todo...
+}
+
+// Install PWA in mobile or web to test if periodicSync notification works
+// 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");
+
+    event.waitUntil(checkNewMessages());
+  }
+});

src/plugins/notificationAndServiceWorker.js

@@ -1,8 +1,44 @@
+// Installing your PWA is required for periodic syncs to work
+const registerPeriodicBackgroundSync = async (registration) => {
+  if ('periodicSync' in registration) {
+    const status = await navigator.permissions.query({
+      name: 'periodic-background-sync',
+    });
+    if (status.state === 'granted') {
+      console.log('Periodic background sync registered and granted')
+
+      try {
+        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())
+
+        const tags = await registration.periodicSync.getTags();
+        if (tags.length) {
+          tags.forEach((tag) => {
+            console.log('tag name')
+            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) {
     navigator.serviceWorker.register("./sw.js")
-      .then(registration => {
+      .then(async registration => {
         console.log('Service Worker registered with scope:', registration.scope);
+        await registerPeriodicBackgroundSync(registration);
       })
       .catch(error => {
         console.error('Service Worker registration failed:', error);

src/plugins/utils.js

@@ -489,7 +489,7 @@ class Util {
 
     /**
      * Return what "mode" to use for the given room.
-     * 
+     *
      * The default value is given by the room itself (as state events, see roomTypeMixin).
      * This method just returns if the user has overridden this in room settings (this
      * fact will be persisted as a user specific tag on the room). Note: currently override
@@ -518,7 +518,7 @@ class Util {
 
     /**
      * Return the room type for the current room
-     * @param {*} roomOrNull 
+     * @param {*} roomOrNull
      */
     roomDisplayTypeToQueryParam(roomOrNull, roomDisplayType) {
         const roomType = this.roomDisplayTypeOverride(roomOrNull) || roomDisplayType;
@@ -901,7 +901,7 @@ class Util {
     }
 
     downloadableTypes() {
-        return ['m.video','m.audio','m.image','m.file']; 
+        return ['m.video','m.audio','m.image','m.file'];
     }
 
     download(matrixClient, event) {
@@ -951,7 +951,7 @@ class Util {
         }
         return Promise.resolve(config.defaultBaseUrl);
     }
-     
+
     getMimeType(event) {
         const content = event.getContent();
         return (content.info && content.info.mimetype) ? content.info.mimetype : (content.file && content.file.mimetype) ? content.file.mimetype : "";
@@ -997,7 +997,7 @@ class Util {
         }
         return false;
     }
-    
+
     isFileTypePDF(event) {
         const mime = this.getMimeType(event);
         if (mime === "application/pdf" || this.getFileName(event).endsWith(".pdf")) {