New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 867351 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 21
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug-Regression



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:
 
screenshot.JPG
102 KB View Download
Labels: Needs-triage-Mobile
Cc: chelamcherla@chromium.org
Components: UI>Notifications
Labels: Triaged-Mobile Needs-Feedback
@ chemo.b: Please provide sample URL/test file to test this issue from our end. This would help in better triaging.

Thanks!
Owner: awdf@chromium.org
Status: Assigned (was: Unconfirmed)
Mind having a look, Anita?
@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.
Status: Started (was: Assigned)
Status: Unconfirmed (was: Started)
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).
Project Member

Comment 7 by sheriffbot@chromium.org, Jul 26

Labels: -Needs-Feedback
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
@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!
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!
Status: WontFix (was: Unconfirmed)
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!


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);
});
Screenshot_20180727-160107.png
386 KB View Download
Screenshot_20180727-160057 (1).png
327 KB View Download
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);
});
resource-loaded.PNG
67.0 KB View Download
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

Comment 14 Deleted

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
}
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.
Dkr9-lZUcAAVWqy.jpg
21.8 KB View Download
So please reopen the issue! thanks!
 Issue 869976  has been merged into this issue.
Cc: peter@chromium.org
Owner: rayankans@chromium.org
Status: Assigned (was: WontFix)
This definitely is happening. Thank you for the additional information, Rayan's going to investigate the issue.
Labels: Hotlist-ConOps
Project Member

Comment 21 by bugdroid1@chromium.org, 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

Cc: amineer@chromium.org
+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.
Labels: Request-Merge-69
Just tested this on Canary and it seems to be working now.
I'll request to merge the fix with M69.
Labels: -Request-Merge-69 Merge-Approved-69
Status: Fixed (was: Assigned)
Project Member

Comment 26 by bugdroid1@chromium.org, Aug 21

Labels: -merge-approved-69 merge-merged-3497
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

 Issue 873318  has been merged into this issue.
Great! Thanks guys! :D

Sign in to add a comment