Add "badge notification" for progressive web application (PWA) - android

I'm developing a progressive web application (PWA) that will eventually send notifications to users.
I already know that I'm able to send push notifications (like in any regular app), as explained in the following blog post: https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/?hl=en-us.
However, after having the app in home screen, I would like to add a "hint" to user, letting him know that he has to access the application. A great way to do that is doing something like a "badge notification" (as showed in whatsapp icon on the image below).
Similar badge notification on the Whatsapp icon
Is it possible to add this kind of behavior using progressive web applications?

I believe what you're looking for is the Badging API.
To use the Badging API you can do something like
if('setAppBadge' in navigator && 'clearAppBadge' in navigator){
// set badge
navigator.setAppBadge(badgeCount).catch(error => {
// handle error
});
// remove badge
navigator.clearAppBadge().catch(error => {
// handle error
});
}
Plus, it makes more sense to use it with the Web Periodic Background Synchronization API.
Support
The Badging API is currently supported on Android's Chrome & Samsung Internet Browser and partially supported on Desktop's Chrome & Edge.

Related

Does Facebook Messenger Bot provide information about the channel where the message was originated?

I'm having a problem with the lite version of messenger (android only)
This version of the application does not support bot messages with templates or buttons (including the get_started button)
In my case this is an example:
I could not find a parameter in the webhooks to provide the user's platform.
So I have to ask the user: do you use the lite version?
And then set a different flow.
But this means that I must also give the possibility to disable the lite mode when browsing from the web or from the non-lite application (to guarantee a better user experience)
Does Facebook Messenger Bot provide information about the channel where the message was originated ?
This information is not provided via webhook, currently. The closest you can get is detecting user agent in the webview.
A not ideal but doable option would be to have something like a 'Switch to Lite' button in the persistent menu
One way to identify where message event originates from is to use the payloads. You can specify a unique payload when setting up your bot and check what you receive to react on. get_started, persistent_menu, quick_replies have a payload field that you can set.
{
"get_started":{
"payload":"<GET_STARTED_PAYLOAD>"
}
}

Push notification from Mixpanel dashboard to Android Cordova app

I am successfully sending Push Notifications from the Mixpanel Dashboard to a Cordova app on both iOS and Android devices, using phonegap-plugin-push.
However, the title and body values entered in the default fields only appear on iOS devices.
For the notification to appear on Android devices, I currently need to include a custom payload in Mixpanels "Custom Data":
{
"title":"Title for Android only",
"body":"Content for Android only"
}
This is an error prone step for any non-technical using Mixpanel to send notifications.
Does someone know an easier way to do this?
The short answer here is that Cordova/Phonegap and similar third party frameworks are not 100% optimized for Mixpanel functionality (although they work pretty great), and as such you'll need to generate separate push notifications for both iOS and Android in your Mixpanel project.
Providing context, all iOS pushes regardless of app deliver a JSON payload to APN using the same keys to deliver their messages (alert, badge, sound). However, the keys that Android apps process for incoming GCM pushes are entirely dependent on how the GCM receiver is established, and therein lies the problem here.
Mixpanel's Android SDK initializes pushes and uses a GCM receiver that is specific to Mixpanel messages, and fully expects its custom keys (mp_message, mp_title) in order to render the notification. The webapp reformats the message input to meet these key requirements (http://bit.ly/1OGgU1y)
However, the Phonegap GCM receiver expects different keys as you've noticed. I'd recommend referring to the phonegap github page in order to get more context into the expected push format and behavior (looks like they expect "title" and "message" as the keys): http://bit.ly/1KDScye
Unfortunately, what this means is that the Android app is not optimized to receive the default, web-app generated Mixpanel pushes, although your iOS one is. Mixpanel's SDKs are intended to maximize capabilities for that platform, and it isn't guaranteed that Cordova or similar JS frameworks will translate 100%.
So to conclude - Creating a message in the Mixpanel push editor will send to iOS, but for Android you'll need to use the custom JSON payload in a separate notification, including keys that the phonegap GCM receiver is compatible with.
If its help to anyone this is how I solved the problem
in phonegap-plugin-push
you need to modify two files
GCMIntentService.java
private String normalizeKey(String key) {
if (key.equals(BODY) || key.equals(ALERT) || key.equals(MP_MESSAGE) || key.equals(GCM_NOTIFICATION_BODY)) { // added MP_MESSAGE
PushConstants.java
public static final String MP_MESSAGE = "mp_message";

Google Cloud Messaging: How to show an icon and group messages

I have two questions regarding Google Cloud Messaging:
(My push script is PHP, and my client is Corona SDK.)
PUSH ICON: Currently, my push messages are displayed on the screen with an icon that looks like an inverted triangle with an exclamation mark inside. How do I make it show my own icon? (Can I dictate the icon from the server, or must this be done on the client?)
GROUPING MESSAGES: Currently, if I send three push messages to the phone, they are shown individually in the push list, whereas in other apps, subsequent push messages all replace the previous one, so they only take up one place in the list. How do I accomplish this? Is this the collapse_key value?
Thanks!
First of all, you should have specified "Google Cloud Messaging" (or C2DM in case) in the title of this thread, rather than "Android Push"...
1) If you don't set any custom icon, devices borrow, I don't know why, icons from other installed apps (the icon of Google Talk, sometimes). You can set your own icon from client with the following code:
String app_name = context.getString(R.string.app_name);
int icono = R.drawable.ic_stat_notify;
long time = System.currentTimeMillis();
Notification notification = new Notification(icono, app_name, time);
And you should follow the official Android Design Guideline to design that custom icon, usually designing three versions of the icon (one for devices running v2.2, another for devices running from v2.2 to v3.0 and another for devices running from v3.0).
2) Yes, that's exactly the collapse_key purpose.

App notification popup mobile device web browser

Not really sure how to correctly describe this so hopefully some of you know what I mean.
Our client is getting a mobile app for thier site, hopefully soon, and I have noticed on android devices and sure they probably exist on iphones too, a popup to inform you that said site has an app. I have seen it on forums that support tapatalk as well as the sammobile.com website. Its a small message and an "ok" and "cancel" button, ok takes you to the app in the market.
Googles only really helpful when you know or at least can correctly describe what you are looking for.
Does anyone know
A) Do iPhones also have this feature and
B) how would I go about triggering such a popup/notification?
Using some infor from a java push trigger as well as a few other Stacks I put this together.
if (/Android|iPhone|BlackBerry/i.test(navigator.userAgent)) {
var url = confirm("Would you like to download our mobile application?");
if (url === true) {
var url = window.location.href = 'http://www.google.com';
url.show();
}
}
Will test for the 3 devices mentioned, if so will create a confirmation box for which confirmation will direct the user to another url.

sl4a python notify question

I have two questions regarding the sl4a scripting language. I'd like to develop a python script that will be periodically contacted by a server and post some information to the notification bar.
I've successfully add message to the notification bar, but
The notification icon is always sl4a logo. Is there a way to change it to something else? (I don't mind to use some hack method such as rename the resource file, if that will work...)
When I click the notification, it just remove the message. I'd like to add some intent that would take the user to certain app or webpage. Is it possible?
Thanks!
Officially, there is no API exposed to SL4A for customization of notifications which exist does exist in Android.
Reference:
http://developer.android.com/guide/topics/ui/notifiers/notifications.html#CustomExpandedView
http://code.google.com/p/android-scripting/wiki/ApiReference
Officially, there is no API exposed to SL4a for firing an intent on user click from user. .
notify(
String title: title,
String message)
Notify, just displays a notification that will be canceled when the user clicks on it. Now, somehow if you can trace cancellation of this notification, you can start a new intent using your script.
Hack?
Please note, Android treats these notification from SL4A and not from your script. (due to which you are getting the SL4A icon) Thus, somehow it is possible to use all API which are exposed to a normal JAVA code, treating SL4A as an application but then this approach will make all your apps using SL4a have the same logo. ;)

Categories

Resources