Probleem met icon bij notificatie in Chrome op Android

[Harrie_]

Sinds enige tijd zijn een collega en ik e.e.a. aan het testen met service workers om zodoende naar onszelf (en collega's) relevante notificaties te kunnen sturen per telefoon. Uitgangspunt hierbij is eigenlijk dat we min of meer hetzelfde resultaat willen bereiken wanneer je mobiel (op Android) inlogt op Tweakers.

Inmiddels hebben we e.e.a. draaien en tot dusver werkt het eigenlijk perfect (en instant!) op één ding na. Het icoontje van Chrome. Hieronder een plaatje ter illustratie:



Ik ben op ingelogd op onze (test)website via Firefox en Chrome. Waar Firefox gewoon een normaal icoontje laat zien is het bij Chrome een witgrijs vierkantje. Het vreemde is dat ik, op dezelfde telefoon, bij een notificatie van Tweakers wel gewoon het Chrome-icoontje krijgt te zien.

Ik ben al flink het internet aan het afspeuren geweest maar ik krijg eigenlijk nergens relevante info gevonden m.b.t. dit probleem. Alles wat ik gevonden krijg heeft betrekking op Android 5.0 en icoontjes van native apps (dus niet van Chrome)

Ik heb dit alles gestest op 3 telefoons, te weten:
• Android 7 kaal
• Android 8 kaal
• Android 8 met 'Samsung skin'
Op alle telefoons krijg ik het resultaat zoals in het plaatje te zien is.

Tot slot nog een stukje code van de EventListener die uiteindelijk ervoor zorgt dat de notificatie in beeld komt:

JavaScript:

self.addEventListener('push', function (event) {
    if (!(self.Notification && self.Notification.permission === 'granted')) {
        return;
    }

    var data = {};
    if (event.data) {
        data = event.data.json();
    }

    var title = data.title;
    var message = data.message;
    var icon = "template/images/logo_blauw.png";

    event.waitUntil(
        self.registration.showNotification(title, {
            body: message,
            icon: icon,
            badge: icon,
            data: {
                activity: data.activity,
                height: data.top
            }
    }));
});

Wie helpt ons op weg?
Wie ziet direct de oplossing?

[Spinal]

Wat voor afbeelding(en) heb je in je web manifest staan?

[Harrie_]

Spinal schreef op vrijdag 14 december 2018 @ 13:48:
Wat voor afbeelding(en) heb je in je web manifest staan?

Een web manifest is niet aanwezig. Zou dit moeten dan? De notificaties zijn afkomstig van een website die draait in een browser, het is dus geen standalone app...

Verder verwacht ik in deze natuurlijk ook gewoon de standaard chrome-icon?

[Xanland]

Wat als je geen badge-property meegeeft? Als je een badge meegeeft, wat volgens mij altijd (verwijst naar) een afbeelding (is), wordt die volgens mij ge-grayscaled.

Klopt ook wel redelijk met je afbeelding als ik de documentatie op https://developer.mozilla...eb/API/notification/badge lees.

[ Voor 56% gewijzigd door Xanland op 16-12-2018 01:56 ]

[Harrie_]

@Xanland

Klopt helemaal, ik snap niet hoe ik dat niet heb kunnen zien.
Het is opgelost nu!