How can I set the app name that shows up in a PWA web push notification?

Viewed 144

I'm trying to figure out how to set the app name of what shows up in a PWA web push notification.

The PWA already shows up in the apps installed list and shows up on the home screen with the app name.

It can receive web push notifications, but what I'm curious about is how to change the part that says Chrome and myexamplesite.com (blurred in the image below)

Normally the notification will show something like Chrome ● myexamplesite.com ● now

I know that the Chrome badge can be set with the badge argument, but what about the part that says Chrome and the website url? Can that be somehow set to be something like My App Name?

web push notification

3 Answers

I guess the Chrome part is not changeable since it comes from the client browser. And the title seems to come from your App name.

AFAIK you cant change the 'Chrome' title in the notification because the PWA depends on your browser, but you can set the notification title using registration.showNotification(title, options)

Push Notification it's part of the mobile OS system API

It's because the notification is from Chrome App (doesn't matter what logic is inside is it its own Chrome notification or PWA)

The logic is the next: the mobile App registers in the mobile (iOs/Android) system with its name and icon (or some other declared in specific files like 'manifest' in PWA) with a set of permission/access rules/etc, e.g. allow the App to create Push Notifications in the system. It makes once, the name of the App and icon could be changed by itself but it will be changed everywhere in the system.

In this case, to change the Push Notification 'app name' the App should change it globally.

The title, subtitle, image, text, and body/metadata could be set dynamically and Chrome gives the API for it.

enter image description here enter image description here

Related