Issue metadata
Sign in to add a comment
|
Regression: Notification badge isn't used in Chrome 68
Reported by
chem...@gmail.com,
Jul 25
|
||||||||||||||||||||||
Issue description
Steps to reproduce the problem:
Create a notification through <ServiceWorkerRegistration>.showNotification(<title>, <options>). Provide a badge resource (as a URL) through the options argument as documented here:
{
"badge": "<URL String>",
}
https://developers.google.com/web/fundamentals/push-notifications/display-a-notification
In my case:
{
"badge": "https://talkrrr.rejh.nl/img/icons-statusbar/ic_stat_chat.png",
}
Chrome 68.0.3440.70
Android 8.1
Pixel 2016
What is the expected behavior?
Chrome 67 and earlier would show the badge in the Android status bar and on the notification (top left on Android 8.1)
What went wrong?
Chrome 68 shows the 'default' notification badge (a bell) instead of the provided resource.
See screenshot.
Did this work before? Yes 67
Chrome version: 68.0.3440.70 Channel: stable
OS Version: 8.1
Flash Version:
,
Jul 26
@ chemo.b: Please provide sample URL/test file to test this issue from our end. This would help in better triaging. Thanks!
,
Jul 26
Mind having a look, Anita?
,
Jul 26
@chelamcherla: see the url in the screenshot. I'd rather not have that in plain-text on a public site as it's a hobby project. But feel free to check it out.
,
Jul 26
,
Jul 26
Tested this at https://tests.peter.sh/notification-generator/ with the following steps and could not reproduce : 1. Go to https://tests.peter.sh/notification-generator/ 2. Under 'badge', select 'Custom' 3. Enter 'https://talkrrr.rejh.nl/img/icons-statusbar/ic_stat_chat.png' in the custom badge field 4. Press display notification The notification shows up with the custom badge in the status bar as expected. Device: Nexus 5x Android version: 8.1.0 Chrome version: Chrome Beta 68.0.3440.70 (Note using 'adb shell input text' to input the url over adb proved flaky - at first I thought I had a repro, but turns out the badge url I'd entered via adb had a typo).
,
Jul 26
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jul 26
@awdf: Hmm interesting. My web app suddenly stopped showing the badge. I have Chrome 67 on my Pixel C and it still shows the badge. My Pixel 2016 doesn't. I'll double check my code. Is it possible the URL didn't resolve (404 or whatever) on my Pixel and it cached the result? Will also check in the network tab if I can spot the request. Not sure if it'll show up or if this is something Chrome does outside of that dev tools picks up. Thanks so far!
,
Jul 26
Hit a snag. I somehow can't debug Chrome on my phone through ABD anymore: https://bugs.chromium.org/p/chromium/issues/detail?id=867923 Anyway, I wanted to add that I've tried Peter's notif demo site and went through the steps as described by awdf. It works as it should, I see the badge. So I assume my code has a bug (even though it works on a Pixel C with v67 and doesn't on my Pixel 2016 with v68). I guess this issue can be closed..? Can I reopen it if I figure out there *is* a problem? Or should I open a new ticket? Thanks again!
,
Jul 26
Closing this - feel free to reopen if you discover a way to repro using the steps in #6 with additional steps / conditions. Btw, you could try installing Chrome Beta on your Pixel C if you want to be able to test 67 vs 68 on the same device. Thanks!
,
Jul 27
I've did some more testing (found a laptop that still runs v67 so my dev tools work with remote devices).
I tried to show a notification through his service worker with options as I use them on my web app and ran it in the console (remote device inspector). See below for the code.
Somehow my badge doesn't work anymore.
I then tried it through the interface - because that worked yesterday. It doesn't anymore. See screenshots.
I think *something* is wrong with the notification badge. I also checked the network tab and it *does* load the both the icon and badge I set in the options.
So.. I guess I need to reopen this ticket.
var title = "Test notif badge";
var opts = {
badge:"https://talkrrr.rejh.nl/img/icons-statusbar/ic_stat_chat.png",
body:"This is a body text",
click_action:"https://talkrrr.rejh.nl/?chatroomId=chatroom_-K__VhdgTM8b4fHc3Ldt_082aea68-93d6-45ab-891a-7ced2ec955a4",
icon:"https://firebasestorage.googleapis.com/v0/b/talkrrr.appspot.com/o/users%2FphotoURLs%2FXPYH3Hbbx7hYb0zlkbHgnAIQI632?alt=media&token=0e05991a-4543-4153-af94-5b8715392063",
renotify:true,
requireInteraction:false,
tag:"chatroom_-K__VhdgTM8b4fHc3Ldt_082aea68-93d6-45ab-891a-7ced2ec955a4",
timestamp:1532674747815,
vibrate:(5) [50, 100, 50, 100, 50]
};
var r = null
navigator.serviceWorker.getRegistration().then(function(registration) {
r = registration;
r.showNotification(title, opts);
});
,
Jul 27
To clarify, these are the steps: 1) Attach android device to pc via usb. Make sure usb debugging is enabled and the pc is authorized. 2) On the device, go to https://tests.peter.sh/notification-generator/ 3) On the pc, go to chrome://inspect/#devices 4) Open the inspector for "Notification Generator | Peter.sh" 5) Paste the code below in the console 6) The notification shows up but with a bell icon for the badge instead of the provided image resource See screenshot's in previous comment. The provided image resource *is* loaded: 1) Continue from step (6) or repeat 1 - 4 2) Open the network tab > all (somehow the icon and badge don't show up as img) 3) Clear the view 4) Go to console tab, paste code below 5) Return to network tab. ic_stat_chat.png is loaded (screenshot attached) but the notification on the device shows the bell icon -- code -- var title = "Test notif badge"; var opts = { badge:"https://talkrrr.rejh.nl/img/icons-statusbar/ic_stat_chat.png", body:"This is a body text", click_action:"https://talkrrr.rejh.nl/?chatroomId=chatroom_-K__VhdgTM8b4fHc3Ldt_082aea68-93d6-45ab-891a-7ced2ec955a4", icon:"https://firebasestorage.googleapis.com/v0/b/talkrrr.appspot.com/o/users%2FphotoURLs%2FXPYH3Hbbx7hYb0zlkbHgnAIQI632?alt=media&token=0e05991a-4543-4153-af94-5b8715392063", renotify:true, requireInteraction:false, tag:"chatroom_-K__VhdgTM8b4fHc3Ldt_082aea68-93d6-45ab-891a-7ced2ec955a4", timestamp:1532674747815, vibrate:(5) [50, 100, 50, 100, 50] }; var r = null navigator.serviceWorker.getRegistration().then(function(registration) { r = registration; r.showNotification(title, opts); });
,
Aug 7
Hi everyone, The steps reported are right, and I'm also able to reproduce it in Chrome 68, but there is an important detail that is being missing: the web should be installed as PWA in the device. As soon as you uninstall the PWA, notification badge will be displayed properly
,
Aug 8
My PWA also shows a notification with a customized badge. In Android Chrome
68 the badge is now a generic "alarm bell" icon.
Here is a sample of the "options" that is passed to registration.showNotification(note1, options)
{
"body": "Day - Ends with sunset at 9:25 pm",
"icon": "/statics/images/d8.png",
"badge": "data:image/png;base64,iVBORw0KGgo ... uQmCC",
"tag": "tag1",
"data": {
"url": "http://localhost:8080"
},
"silent": true,
"renotify": true,
"requireInteraction": true
}
,
Aug 16
I can reproduce the same issue. Once the pwa is added to home screen with Chrome 68.0.3440.91 (tested on Android 6 and 7), the badge will show the default bell instead of the badge specified. Edge shows the specified badge as expected, even after the pwa is added to home screen.
,
Aug 16
So please reopen the issue! thanks!
,
Aug 17
Issue 869976 has been merged into this issue.
,
Aug 17
This definitely is happening. Thank you for the additional information, Rayan's going to investigate the issue.
,
Aug 17
,
Aug 20
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/dc21e3e8e11747e461d69ae48b9e2bdb51d65e48 commit dc21e3e8e11747e461d69ae48b9e2bdb51d65e48 Author: Rayan Kanso <rayankans@chromium.org> Date: Mon Aug 20 16:49:24 2018 Fix broken PWA notification badge. The WebApkServiceClient was overwriting the small icon in the notification builder. This change checks whether there was already a provided small icon bitmap before overwriting. This is the CL that introduced the bug: https://chromium-review.googlesource.com/c/chromium/src/+/978126 It will always call setSmallIconForRemoteApp on the notification builder for PWAs. For Android M+ this will overwrite the provided small icon bitmap. Bug: 867351 Cq-Include-Trybots: master.tryserver.chromium.android:android_cronet_tester;master.tryserver.chromium.mac:ios-simulator-cronet Change-Id: If65970f3349e6a0738003d89e2721e3b2568afdc Reviewed-on: https://chromium-review.googlesource.com/1181043 Reviewed-by: Peter Conn <peconn@chromium.org> Reviewed-by: Sami Kyöstilä <skyostil@chromium.org> Reviewed-by: Dominick Ng <dominickn@chromium.org> Reviewed-by: Peter Beverloo <peter@chromium.org> Commit-Queue: Rayan Kanso <rayankans@chromium.org> Cr-Commit-Position: refs/heads/master@{#584475} [modify] https://crrev.com/dc21e3e8e11747e461d69ae48b9e2bdb51d65e48/chrome/android/java/src/org/chromium/chrome/browser/browserservices/TrustedWebActivityClient.java [modify] https://crrev.com/dc21e3e8e11747e461d69ae48b9e2bdb51d65e48/chrome/android/java/src/org/chromium/chrome/browser/webapps/WebApkServiceClient.java [modify] https://crrev.com/dc21e3e8e11747e461d69ae48b9e2bdb51d65e48/chrome/android/javatests/src/org/chromium/chrome/browser/browserservices/TrustedWebActivityClientTest.java
,
Aug 20
+cc: amineer@chromium.org Hey Alex, just a heads-up: we'd like to merge this change into M69. It's a low-risk change, as it just checks if there was already a provided badge icon before assigning the default one (for PWAs). I'll confirm that this is working as expected tomorrow in canary.
,
Aug 21
Just tested this on Canary and it seems to be working now. I'll request to merge the fix with M69.
,
Aug 21
,
Aug 21
,
Aug 21
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/21447c9d90951d0bded1a7a0c2ae29389d50b6eb commit 21447c9d90951d0bded1a7a0c2ae29389d50b6eb Author: Rayan Kanso <rayankans@chromium.org> Date: Tue Aug 21 16:58:03 2018 Fix broken PWA notification badge. The WebApkServiceClient was overwriting the small icon in the notification builder. This change checks whether there was already a provided small icon bitmap before overwriting. This is the CL that introduced the bug: https://chromium-review.googlesource.com/c/chromium/src/+/978126 It will always call setSmallIconForRemoteApp on the notification builder for PWAs. For Android M+ this will overwrite the provided small icon bitmap. Bug: 867351 Cq-Include-Trybots: master.tryserver.chromium.android:android_cronet_tester;master.tryserver.chromium.mac:ios-simulator-cronet Change-Id: If65970f3349e6a0738003d89e2721e3b2568afdc Reviewed-on: https://chromium-review.googlesource.com/1181043 Reviewed-by: Peter Conn <peconn@chromium.org> Reviewed-by: Sami Kyöstilä <skyostil@chromium.org> Reviewed-by: Dominick Ng <dominickn@chromium.org> Reviewed-by: Peter Beverloo <peter@chromium.org> Commit-Queue: Rayan Kanso <rayankans@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#584475}(cherry picked from commit dc21e3e8e11747e461d69ae48b9e2bdb51d65e48) Reviewed-on: https://chromium-review.googlesource.com/1183362 Cr-Commit-Position: refs/branch-heads/3497@{#738} Cr-Branched-From: 271eaf50594eb818c9295dc78d364aea18c82ea8-refs/heads/master@{#576753} [modify] https://crrev.com/21447c9d90951d0bded1a7a0c2ae29389d50b6eb/chrome/android/java/src/org/chromium/chrome/browser/browserservices/TrustedWebActivityClient.java [modify] https://crrev.com/21447c9d90951d0bded1a7a0c2ae29389d50b6eb/chrome/android/java/src/org/chromium/chrome/browser/webapps/WebApkServiceClient.java [modify] https://crrev.com/21447c9d90951d0bded1a7a0c2ae29389d50b6eb/chrome/android/javatests/src/org/chromium/chrome/browser/browserservices/TrustedWebActivityClientTest.java
,
Aug 22
Issue 873318 has been merged into this issue.
,
Aug 22
Great! Thanks guys! :D |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by chelamcherla@chromium.org
, Jul 26