Sync push subscriptions on every page load

[ekzyis]

Close #354 (hopefully)

I tested this code using this patch:

diff --git a/sw/index.js b/sw/index.js
index c8dbee1..38c41ed 100644
--- a/sw/index.js
+++ b/sw/index.js
@@ -86,10 +86,12 @@ async function handlePushSubscriptionChange (oldSubscription, newSubscription) {
   newSubscription ??= await self.registration.pushManager.getSubscription()
   if (!newSubscription) {
     // no subscription exists at the moment
+    console.log('no active push subscription found')
     return
   }
   if (oldSubscription?.endpoint === newSubscription.endpoint) {
     // subscription did not change. no need to sync with server
+    console.log('push subscription did not change. no need for sync. skipping')
     return
   }
   // convert keys from ArrayBuffer to string
@@ -107,6 +109,7 @@ async function handlePushSubscriptionChange (oldSubscription, newSubscription) {
     }
   }`
   const body = JSON.stringify({ query, variables })
+  console.log('syncing new push subscription with server:', newSubscription)
   await fetch('/api/graphql', {
     method: 'POST',
     headers: {
@@ -118,5 +121,6 @@ async function handlePushSubscriptionChange (oldSubscription, newSubscription) {
 }

 self.addEventListener('pushsubscriptionchange', (event) => {
+  console.log('pushsubscriptionchange fired')
   event.waitUntil(handlePushSubscriptionChange(event.oldSubscription, event.newSubscription))
 }, false)

You can then test the combination of page reloads, manually calling navigator.serviceWorker.controller.postMessage({ action: 'SYNC_SUBSCRIPTION' }) and manually deleting the entry in IndexedDB to trigger synchronization.

However, this solution is not perfect as mentioned in this article which was used for reference:

This solution is not perfect, the user could lose some push notifications if he doesn’t open the webapp for a long time.

The article also mentions usage of background sync to also trigger (delayed) synchronization if the user loads a page which is available offline:

If the page could be loaded offline, then it’s possible to use background sync API to refresh subscription when browser will be online again.

However, we don't have pages which users would regularly visit and are available offline at the moment. I also don't think adding background sync is worth it at the moment. I think the current changes should already fix 99% of cases why push subscriptions are lost.