pwa.setBadge is not working in mobile device #84
Replies: 7 comments
-
Also I want to change badge color. Is there any way to change badge color? |
Beta Was this translation helpful? Give feedback.
-
Hi @GitanjaliCS.
Just a few questions to know better the Scenario where you are working on. |
Beta Was this translation helpful? Give feedback.
-
1. Are you running your project in HTTPS web? => Yes, project running on
HTTPS
2. Do you have installed the PWA as a fullscreen WebApp? => Yes,
Installed PWA as a fullscreen webapp
3. Are you doing the mobile testing on an Android device? => We are
testing on android, iOS and desktop environments.
How to show notifications and badges on android, iOS devices?
…On Tue, Mar 16, 2021 at 11:31 PM Fernando ***@***.***> wrote:
Hi @GitanjaliCS <https://github.com/GitanjaliCS>.
I never tested yet this functionality, but for helping you, I ask you a
few silly questions:
1. Are you running your project in HTTPS web?
2. Do you have installed the PWA as a fullscreen WebApp?
3. Are you doing the mobile testing on an Android device?
Just a few questions to know better the Scenario where you are working on.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#83 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AOREIXRFIDPKBOT3KMXDRCDTD6MGDANCNFSM4ZH3A5VA>
.
--
Regards,
Gitanjali Gurram
Creative Skills Digital Pvt Ltd.
|
Beta Was this translation helpful? Give feedback.
-
Hi again @GitanjaliCS
On desktop scenarios, Edge and Chrome support the use of AppBadge showing a number next to the icon, but in mobile OS the thing is sort of different.
Usually when you integrate new specs for multiple devices you can add a library that help you to detect the O.S. and web browser where your PWA is running on. For this purpose I found very useful the UA Parser Library. I wrote an article a few years ago for PWA Experts Community (in spanish). I hope you find my tips helpful. (*) a month ago I build a PWA for a portable nurse and medical equipment. This device were running Android 6.0 and Chrome 87. I installed the PWA in a fullscreen mode and the maskable icon parameter "purpose": "maskable" on the webmanifest file does not work. Chrome puts the square icon on the Android screen. Maybe if you install Android Studio you can take advantage with the use of Android Emulator that will help you to test PWAs in most scenarios as possible.
|
Beta Was this translation helpful? Give feedback.
-
Thank you for your response. I will try this code and update you.
…On Wed, Mar 17, 2021 at 9:00 PM Fernando ***@***.***> wrote:
Hi again @GitanjaliCS <https://github.com/GitanjaliCS>
Please, take a distance from a moment of the *PWAFIRE library* and try
the next line of code on JavaScript or the Console JS from your browser's
DevTools. This is for testing if the native API works or not:
if ("setAppBadge" in navigator && "clearAppBadge" in navigator) {
alert("Your web browser and O.S. support Badges")
} else {
alert("Your web browser and O.S. DON'T support Badges :( ")
}
On desktop scenarios, *Edge* and *Chrome* support the use of *AppBadge*
showing a number next to the icon, but in mobile OS the thing is sort of
different.
-
Android just support badges through *Chrome*, *Edge* and *Samsung
Internet Browser* but showing a simple blue DOT next to the PWA icon.
Firefox and Safari do not support it. Another point to consider is also the
Android version: sometimes you can be running the latest version of the web
browser but a specific characteristic depends of the S.O. to work 100%
*(*)*.
-
Even on *iOS*/*iPadOS*, you should remember that *Chrome*, *Edge*,
*Firefox* or any other web browser you have installed on this O.S.
they use *The Webkit web engine*. Basically they are just a skin for
mobile *Safari*.
Usually when you integrate new specs for multiple devices you can add a
library that help you to detect the O.S. and web browser where your PWA is
running on. For this purpose I found very useful the UA Parser Library
<https://github.com/faisalman/ua-parser-js>. I wrote an article a few
years ago for *PWA Experts Community* (*in spanish*).
I hope you find my tips helpful.
(*) a month ago I build a PWA for a portable nurse and medical equipment.
This device were running Android 6.0 and Chrome 87. I installed the PWA in
a fullscreen mode and the maskable icon parameter "purpose": "maskable" on
the *webmanifest file* does not work. Chrome puts the square icon on the
Android screen.
The same scenario on devices with Android 9.0 works fine.
Maybe if you install Android Studio you can take advantage with the use of
Android Emulator that will help you to test PWAs in most scenarios as
possible.
1. Are you running your project in HTTPS web? => Yes, project running
on HTTPS 2. Do you have installed the PWA as a fullscreen WebApp? => Yes,
Installed PWA as a fullscreen webapp 3. Are you doing the mobile testing on
an Android device? => We are testing on android, iOS and desktop
environments. How to show notifications and badges on android, iOS devices?
1. Are you running your project in HTTPS web? => Yes, project running
on HTTPS 2. Do you have installed the PWA as a fullscreen WebApp? => Yes,
Installed PWA as a fullscreen webapp 3. Are you doing the mobile testing on
an Android device? => We are testing on android, iOS and desktop
environments. How to show notifications and badges on android, iOS devices?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#83 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AOREIXTC77PE3VSNAHWINJTTEDDK3ANCNFSM4ZH3A5VA>
.
--
Regards,
Gitanjali Gurram
Creative Skills Digital Pvt Ltd.
|
Beta Was this translation helpful? Give feedback.
-
Thanks @mobilepadawan for the detailed response, on mobile, the count is not shown yet. For desktop, all great! And also, if you wanna check if the setBadge was a success or a failure, this method is a promise type, so, simply do; pwa.setBadge(unreadCount).then(res => {
// Do something with response...
if (res.ok) {
// Success...
}
); |
Beta Was this translation helpful? Give feedback.
-
We have a new API update, if you install the latest pwafire version you should check if // Get the check instance from pwafire...
import { check } from "pwafire";
//...
// The response is a boolean, true or false...
const supported = await check.Badging(); |
Beta Was this translation helpful? Give feedback.
-
Describe the bug
I am working on react JS (PWA) application. In my application, I need to display notifications and badging.
Below is my code for displaying badging.
const unreadCount = 24;
pwa.setBadge(unreadCount);
It is working on desktop (PWA) but not on mobile device (PWA).
Please help me. I am trying this issue since yesterday.
Beta Was this translation helpful? Give feedback.
All reactions