Javascript Notification show as 'pop-up' - javascript

Currently, I am working on a PWA.
I would like to implement a push notification system, luckily the browser exposes the Push API. I got this part working so far, I can receive the push event in the Service Worker.
But when displaying a notification, the notification is received 'silently' in the background.
What i wish that happened:
But this 'pop-up' style message is disabled by default when the PWA is installed (at least, I think so). The default behaviour causes the notification to only shop op in the notification tray, without ever showing above popup.
When I go the the settings of the PWA's notifications, there is an option to enable pop-up notifications: 'Show as pop-up'
When i enable this options, i get the desired result. However i wish this to be de thefault behaviour, and not have to tell every user of the web app to change the settings on their device.
My used code for the Notification from within my push event listener in the service worker.
self.registration.showNotification('New message', {
body: payload,
});
Testing on Samsung Galaxy S22 with Chrome as the (default) browser.
Does anyone know why this is the default behaviour and if there is a fix for this?
Thanks in advance

Related

How to check that native notifications are enabled for chrome?

I can block notification in chrome by set 'off' in notification settings.
And after that when I send notification with chrome.notifications.create I didn't receive any error.
I tried to check permission with chrome.notifications.getPermissionLevel and got 'granted'.
I tried to check that no one notification is appeared with chrome.notifications.getAll, but suddenly they were added, but didn't show.
There is a way to check that I can show a notification to the user?

Handle silent push notification in closed react-native app (Android)?

I'm working on a react-native app that is closed the majority of the time. However, I need to be able to send updates from the backend to different clients so they can update local geofences.
I figured I could use silent push notifications for this (using FCM). This appears to work fine when the app is running (either in the foreground or background), but when the app is closed, I am unable to handle these push notifications.
I'm able to handle normal push notifications while the app is closed, because when the user presses the notification, the app is launched and the notification is available as the initial notification, but this isn't an option with silent notifications.
Is there any way to have my app handle silent push notifications while closed? Either by opening in the background, handling the notification, and closing or by registering some kind of background service?
You may want to take a look at react-native-push-notification#silent
Basically for android:
If your Android app is not running when a silent notification is received then this library will start it. It will be started in the background however, and if the OS starts your app in this way it will not start the react-native lifecycle. This means that if your notification delivery code relies on the react-native lifecycle then it will not get invoked in this situation. You need to structure your app in such a way that PushNotification.configure gets called as a side effect of merely importing the root index.android.js file.
And IOS:
The crucial bit of an iOS silent notification is presence of the "content-available": 1 field.

Calling Javascript Notification API on Google Chrome for Android not working directly from a web page

I'm working with the JavaScript Notification API to show a small message to my users. It works on every desktop browser I've tested with, including Chrome...but not Chrome for Android (KitKat, at least). Everything I've read says that Android Chrome supports the Notification API as of April 2015, and the app even has settings for Notification permissions...yet nothing happens when I call new Notification(...) from within it. In fact, even the official Mozilla Notification API demo page doesn't show them, despite being able to grab permissions information, etc.
Is there something special I need to do to make Notifications compatible with Android Chrome?
On Chrome for Android you can only open a notification via a Service Worker. A service worker is a script that runs alongside the browser and can be loaded even when the page or browser are currently closed.
The main reasoning behind the service worker requirement is that a notification can outlive the length of the browser's lifetime (i.e, the user can close the browser) and the notification will still be active, therefore when a user clicks on the notification Android needs to wake "something" up, this "something" is the Service Worker.
This Notification Guide is a good introduction to the current state of Notifications on the Web and in Chrome - it focuses a little on Push messaging but also has all the details of how to trigger a notification from the Service Worker.
This might seem like an extra hoop to jump through but it actually is a net benefit: your notification will still work when clicked even when the browser is closed.
Check this for compatibility: http://caniuse.com/#feat=notifications
"Partial Support" Although as Kinlan mentioned, it's possible with Web Service Workers.
navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('Notification with ServiceWorker');
});
}
});
The sw.js file can just be a zero-byte file.
Credit Due: HTML5 Notification not working in Mobile Chrome

Issue with HTML5 Notification and permission

I'm trying to use the new HTML notification API...
I'm still stuck in the request authorization phase;
when user click on a button it's executed the function:
// this is all inside a click handler
var fn = console.info;
window.Notification.requestPermission(function(grant) {
fn(grant);
});
When i tryed this for the first time in chrome, a chrome's message came out asking me if i want to concede the Notification grant to my localhost web site... I said no (just to test even this case). Then I tried again, but that message from chrome never came out.
My question:
If the user change opinion about notification, how could enable notification for a website?
Maybe do I've to change something in the chrome settings?
Thanks in advance
You can manage and re-allow notifications in Chrome by going to Settings -> Privacy -> Content Settings -> Scroll down to Notifications - here you can manage which sites are allowed to show notifications and which are not.
Update:
As mentioned by #ivan_vaz in the comments, it is also possible to configure this as well as other permissions by clicking the favicon of the website in the address/navigation bar.

Can I Create Chrome Application Shortcuts Programmatically from a Web Page?

I've thought about using Chrome and HTML5 local storage to create a useful app and sell it. The problem I think I would have, however, is the delivery mechanism to get this installed on one's computer. Let's say the app was wikipedia.com (although it isn't). Manually one can go there with Chrome, then choose the wrench icon, Tools, Create Application Shortcuts, and make a desktop and application menu icon for the app.
Okay, fine, but is there a way I can compose a web page link or form button such that it does this for me? In other words, one clicks a button or link and it shows the Create Application Shortcuts form. I am hoping that there's this little-known way on Google Chrome to use either HTML or Javascript to trigger showing that form.
As for those who don't have Chrome, I can detect that and give them a button they click that emails them. In the email, it will give them instructions for installing Chrome and then another link so that they can visit this page in Chrome in order to get the button that shows the Create Application Shortcuts form.
For now, until a better answer can be provided, this is sort of the technique for deploying a desktop app with Chrome, the manual way, and without having to register in the Chrome Store:
After the user purchases a product, email them the serial number for registering their product and a web URL to install this new product.
The web URL is the actual URL of the web app. However, it doesn't display its normal content by default. Instead, the web app is in "installer mode". It does this by looking at a 200 year persistent, encrypted, registration cookie that may not already be installed. (Note if they delete cookies, there's no harm done -- it just asks them to re-register again.)
The first thing the web app does in Installer Mode is detect user agent. If it finds this is not Chrome, it gives them a link to install Chrome and tells them to follow the instruction email again that they have already been sent, but using Chrome to do this. (You might also want to provide a form to resend them the instructions and serial number again.)
The user either installs Chrome and returns back to this page again, or is already a Chrome user. The Installer Mode then shows a message that reads, please press the ALT-F key in Chrome, or press the Wrench icon in your toolbar, and choose Tools > Create Application Shortcuts, check the two checkboxes, click OK, and then click the "Task Performed" button below.
The user follows the instructions and creates their desktop/application shortcut and then clicks "Task Performed".
The user then sees a registration form where they are to type in their serial number they were emailed. The user enters this in and clicks the Register button.
The server validates the registration and then stores a persistent, 200 year encrypted cookie that basically says, "This guy is registered." This keeps the web app from running in Installer Mode.
The Installer Mode is still active, however, and shows them the final prompt: "You may close your browser and run the icon for the new app from your desktop or application shortcut that you created. The icon is named '{insert name here}'."
They close their browser and doubleclick the icon. The application loads, the registration cookie is read, and the web app no longer runs in Installer Mode -- it shows the application content like it normally would. Besides the fact that this is not a 100% truly automated install, the only drawback is that, since the main page is not a local file (cached), the web app can't really work offline completely. Sure, it can use HTML5 offline storage, but doubleclicking the desktop shortcut will always connect to your web app site.

Categories

Resources