Web push badge icon not used

[ciwchris]

I'm trying to display a badge in a push notification. The notification payload is:

const payload = {"notification": {
    "title": "RSS reader",
    "body": "New entry for test",
    "icon": "/images/icons/icon-192x192.png",
    "badge": "/images/icons/badge.png",
    "data": "index.html",
    "actions": [{
        "action": "open",
        "title": "Open reader",
    }],
    "requireInteraction": true}
};

The notification comes across as:

The notification icon displays fine but the badge is not used. Also, the message "This site has been updated in the background message" displays. Is this behavior currently expected with the angular service worker or I'm am doing something incorrectly?

[webmaxru]

Hi @ciwchris ! About This site has been updated in the background: it pops up, when SW received a notification without payload, or when there is no push event handler in SW. It could be a side effect of incorrect/duplicate sending of Push from the backend, as well as result of page's second service worker registered by mistake. You can check a reference code from my Mobile Toolkit workshop: Backend: https://github.com/webmaxru/pwa-workshop-api Frontend: https://github.com/webmaxru/pwa-workshop-angular/tree/step7

[ciwchris]

Thanks @webmaxru . The issue is very inconsistent. In the past few days I have not experienced the "updated" message on my Android device with Chrome Dev. But I was just manually triggering notifications, I still do not receive this message on my Android device but now, for the first time, I'm receiving this message on my laptop running Chromium. I don't know what to make of this, but I guess I'll chalk it up to Chrome and hope it stabilizes as it matures.

The notification still does not display the badge, however.

I referenced your code, and accompanying document, extensively as I created the client side of my app. Thank you very much, they were a great help! I'll try running the server side to see if that can help me troubleshoot why the badge does not display.

[treyrich]

@webmaxru @ciwchris the This site has been updated in the background issue (from what I understand) is an issue with incorrectly handling the push event. It will occur if a notification is not displayed by the time that the event handler is finished execution. You can inform the event handler to wait for an asynchronous task by using the waitUntil method of the event passed to the handler, but that method is not used in this project, therefore it believes most of the time that the event handler finishes execution without displaying a notification. It sounded like this was the next priority on @alxhub's priority list from a comment he made on #138, and I have an open issue for this #134.

So, long story short, @ciwchris, I wouldn't go searching too deeply for any issues in your own code because as far as I can tell this is definitely a bug in this library.

[alxhub]

@treyrich is absolutely right, and this will be fixed very soon :)

[ciwchris]

Thanks!