Angular ServiceWorker with Pusher Beams Service Worker

[DePalmo]

I'm trying to implement both ServiceWorkers, but since we can't have two SW registered, I'm having a bit of a problem.

I am following this article: https://pusher.com/docs/beams/guides/existing-service-worker/

But the problem is that Angular's SW can change and we should not update it's source. Because of that, I can't add anything into it. So I'm wondering, how can I combine Angular's SW with your SW?

My current implementation idea was to ignore the PUsher's SW, but still register the BeamsClient. This way I can receive notifications, but if I tap/click on it, it does not open a browser with provided URL.

I then tried to manually send the Push notification from Chrome's Developer Console and if I structure them correctly, then everything works. But apparently when I send the same data through your network, it strips out the data attribute, so the click action again does not work.

This is a working example of the data that works:

{
  "notification": {
    "title": "Test notification",
    "body": "A longer description of the notification",
    "icon": "... a valid URL to the icon ...",
    "deep_link": "... relative URL ...",
    "data": {
      "onActionClick": {
        "default": {
          "operation": "openWindow",
          "url": "/just-some-random-url/123"
        }
      }
    }
  }
}

But your network converts it into this:

{
  "notification": {
    "title": "Test notification",
    "body": "A longer description of the notification",
    "icon": "... a valid URL to the icon ...",
    "deep_link": "... relative URL ...",
  }
}

Notice the missing data attribute. Because of this, when tapping or clicking on the notification, URL is not being opened.

I also tested by moving the data out of notification, like:

{
  "notification": {
    "title": "Test notification",
    "body": "A longer description of the notification",
    "icon": "... a valid URL to the icon ...",
    "deep_link": "... relative URL ..."
  },
  "data": {
    "onActionClick": {
      "default": {
        "operation": "openWindow",
        "url": "/just-some-random-url/123"
      }
    }
  }
}

Also doesn't work, because Angular's ServiceWorker does not support this format.

So, how to make this one working properly? Please note that I am using Angular with PWA module, where Service Worker is already installed. I'm using Angular v14.

[DePalmo]

Because of lack of any useful response (was also in contact with support through email), decided to proceed with this one on my own with my best judgement and now have it in production for last week and it's working, keeping functionalities from both, Pusher and Angular. This is what I did:

1. I downloaded Pusher ServiceWorker's file from https://js.pusher.com/beams/service-worker.js and saved it as pusher-beams-sw.js
2. then I updated Pusher's SW, so that when it receives a Notification Message, it stops propagating that event to Angular's SW

self.addEventListener('push', function (e) {
    e.stopImmediatePropagation(); // <------- added this line

3. after that I wrote a code that merges two SW, Pusher's is first and then Angular's follows and saved it as merge-sw.js:

const fs = require('fs');
const path = require('path');

const DIST_FOLDER = path.join(__dirname, 'dist');
const ANGULAR_SW = path.join(DIST_FOLDER, 'ngsw-worker.js');
const CUSTOM_SW = path.join(__dirname, 'pusher-beams-sw.js');
const OUTPUT_SW = path.join(DIST_FOLDER, 'ngsw-worker-custom.js');

try {
    const angularSw = fs.readFileSync(ANGULAR_SW, 'utf8');
    const customSw = fs.readFileSync(CUSTOM_SW, 'utf8');

    const merged = `${customSw}\n\n// --- Angular Service Worker Logic ---\n\n${angularSw}`;
    fs.writeFileSync(OUTPUT_SW, merged);

    console.log('Successfully merged Angular SW with custom SW logic into ngsw-worker-custom.js');
} catch (err) {
    console.error('Failed to merge service workers:', err.message);
    process.exit(1);
}

4. then I updated package.json with postbuild commands:
   • "postbuild": "node merge-sw.js",
   • "postbuild:staging": "node merge-sw.js",

My initial idea was to simply ditch the Pusher's SW and only use this simple code:

self.addEventListener('push', function (event) {
    console.log(event);
    event.stopImmediatePropagation();

    const rawPayload = event.data?.json?.() || {};
    const notification = rawPayload.notification || {};
    const originalData = rawPayload.data || {};

    const newNotification = {
        ...notification,
        ...originalData
    };

    event.waitUntil(
        self.registration.showNotification(notification.title, {
            title: notification.title,
            body: notification.body,
            icon: notification.icon,
            data: newNotification,
        })
    );
});

self.addEventListener('notificationclick', function (event) {
    console.log(event);
    const clickAction = event.notification.data?.onActionClick?.default;
    const url = clickAction?.url || '/';

    event.waitUntil(
        clients.openWindow(url)
    );

    event.notification.close();
});

It worked well! For first two to three Notifications, then it stopped without any clear reason. So I will assume that in the Pusher's SW there's some tracking code that reports back to their server and if no responses are received, server stops sending out messages. Didn't verify my claim, but that's how it felt.
So, a full Pusher's SW is needed ...

Now, despite I have solved it for my case, I still expect that Pusher should update their Beams Service Worker for it to be compatible with Angular's. Or, they should not remove data object from Notification Message when broadcasting our message(s), because if they would leave it as its sent from my server to Pusher, then Pusher's SW would not even be needed, since I could code the Notification Message to be supported by Angular's Service Worker directly!