Question 325270 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Home screen app of PWA do not show badge in Android system

We have a website which is capable of adding to (install) home screen in both Android and iOS systems. In the "app" Notification is requested and works well in both systems. Now we would like to add "Badge" feature to the app. We simply added to the app a short javascript code snippet as follows:

if(navigator.setAppBadge){
    alert("Badge Supported.");
    navigator.setAppBadge(3);
} else {
    alert("No Badges.");
}

The test results in both systems are:
iOS(iPhone 8 Plus, iOS 16.7.4):
alert shows "Badge Supported", and return to the home screen we can see a badge showing "3" on the app icon. As shown in the picture below:

enter image description here

Android(Pixel 6 Pro with Android 14, and Samsung Galaxy Note 7 with Android 10):
alert shows "Badge Supported", but the home screen app icon does NOT show the badge. Both devices do not show. As shown in the picture below:

enter image description here

We would like to ask if anyone know how to make both systems show badge normally? Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    At first I raised this issue was because by using the Badging API I could only get the desired result in iOS, but nothing showed in Android. I expected there to be a numbered badge or at least a dot would be fine. I started implementing this feature following the MDN document. But it does not mention things about how it works in different OS. And for iOS and Android both pass the feature testing made me wonder why I can see nothing in Android.

    Both @MorrisonChang and @PratikPrakashBindage recommended me to go to the Chrome for Developers article, in which I found the key to my question. In its "Support" section it says:

    On Android, the Badging API is not supported. Instead, Android automatically shows a badge on app icon for the installed web app when there is an unread notification, just as for Android apps.

    It is weird to me that in Android if(navigator.setAppBadge) is a true which should imply that the feature is supported, but the article says it isn't. However the most important thing to me is that it says the badge shows in Android system when an unread notificaiton exists. This is true and verified in our PWA app. So it seems the badge is not relevant to the Badging API, but is related the Notification API in Android system. There is a small drawback in such Android's mechanism since the dot badge disappears after I swipe the banner out, even though I do not oepn the app and do what I am reminded to do. An example of the dot badge on our app is shown below:

    enter image description here

    I think what I can do so far is to implement the Badging API for iOS users while keeping it as is for Android users.

    By the way, I have also installed the "Badge Demo" provided in the link. However, it does not work in either Android or iOS system. It is only succesful in Windows 11 using Chrome and installing the website as an app.

    That is all I've found so far. Above all many thanks to you guys for sharing your opinions! They do help!


Please signup or login to give your own answer.

Back To Top
Search