diff --git a/public/sw.js b/public/sw.js index 494d828..6ea561a 100644 --- a/public/sw.js +++ b/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)); }), ); -}); \ No newline at end of file +}); + +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()); + } +}); diff --git a/src/plugins/notificationAndServiceWorker.js b/src/plugins/notificationAndServiceWorker.js index a21adcd..0fdba82 100644 --- a/src/plugins/notificationAndServiceWorker.js +++ b/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); diff --git a/src/plugins/utils.js b/src/plugins/utils.js index c1b2057..3ba78ee 100644 --- a/src/plugins/utils.js +++ b/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")) {