why doesn't my push eventlistener on custom-service-worker.js fire?

self.addEventListener("push", (event) => {
console.log('Push event received!!!!');
const data = event.data ? event.data.json() : {};
if (data?.badgeCount !== undefined) {
event.waitUntil(setBadgeCount(data.badgeCount));
}
});

async function setBadgeCount(badgeCount) {
if (self.registration.setAppBadge) {
if (badgeCount && badgeCount > 0) {
await self.registration.setAppBadge(badgeCount);
} else {
await self.registration.clearAppBadge();
}
}
}


this is my implementation of iphone-notification-badge-worker.js

if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('iphone-notification-badge-worker.js')
.then(reg => console.log('Custom SW registered', reg))
.catch(err => console.error('Custom SW registration failed', err));
});
}


I've registered it in my main.ts so i can test it.

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/robots.txt",
"src/block-robots.txt",
"src/iphone-notification-badge-worker.js"
],


Also added it in my build as an asset. When running my frontend with production config, i see my service-worker and i can test it with inspect>service-workers and it works when i send { badgeCount:3 }

My problem is i can't seem to get it to work when i send a notification from my backend with the WebPushClient.SendNotificationAsync(subscription,payload,vapidDetails).

if i send a notification with payload:

@"{""notification"": {""title"": ""Test titel"",""body"": ""Test content""}}"


i get a notification so i know my vapidDetails and subscription are correct. if i send a notification with payload:

@"{""badgeCount"": 3}"


It doesn't do anything and i don't hit my breakpoint on the console.log inside my service-worker or see my console.log anywhere.

Continue reading...