PWA push notifications not working when app is not installed - javascript

Are push notification supposed to work only if the PWA is installed?
If I load the app in android chrome browser, push notifications are not displayed at all (background or having the site opened) even they come thru the wire.
If I install the app, all notifications are displayed properly (background or focused app).
Is this normal a behaviour or something wrong in the implementation?

This is as expected.
The service worker runs on a separate thread than the one used by your application. This is the reason why your web app can still receive and display notifications even if you (or your user) is not currently visiting the web site.
Therefore if the PWA is not installed (meaning the SW is not running on the client side), there is no code waiting for the incoming notifications.
I wrote an article about service workers, if you want to deepen the PWAs topic.
UPDATE
There is an article specifically from OneSignal about not receiving Push Notifications on Android, maybe you can find some hints. If you check the OneSignal dashboard, can you see your client registered there?
[This point is for other users landing to this question] If your browser does not show web notifications, you can verify on "Can I Use" web site that your browser version supports notifications and push API and eventually update it.

Related

How does website display notifications after its page closed?

After visiting Facebook website and closing its page, weeks after I'm still getting browser notifications from Facebook about messages, posts, etc.
How is it implemented? Could a website install some scripts to be executed indefinitely regardless of having the website opened in a browser?
The most of browsers are allowing what we called it Push notifications
For example if in Chrome Browser
if you look at chrome://settings/content/notifications
You will find all websites allowed to send you notifications, it's kind of embedded scripts that will be stored in the browser website's cache
The notifications are simply an implementation of Observer design Pattern
actually the website makes a socket connection with your browser so even if you close your browser you can get push notification!

How do you push Application updates on an installed PWA application?

My question is, Is it possible for the Users to acquire these changes without having to REINSTALL the PWA application?
I have a PWA application deployed in Production. The client already installed the deployed PWA application in their MOBILE devices and I want to DEPLOY another patch of updates in the PWA application in the HTTP server.
Another simple way to update application is using workbox-window. You can detect updates in PWA and restart your application to get the last updates. For more detail, I suggest you read this link
I would suggest to read this link explaining in detail how the SW Updates work.
Long story short, if you deploy a new app version, the new SW will be installed on the client's side (using a separate/dedicated install event) and then activated when the users navigates to an URL different from the PWA one.
There is also a built in service workers feature called "fail safe". Within at most 24H the SW checks if a newer version is available and, if so, attempts to update to it.
I wrote a PWA series and here a post about Service Workers and caching strategies if you want to read more.

How can I open a chrome tab on my laptop from my react-native app (like remote debugging does)?

I am creating a small debugging app to monitor a particular interaction (WebRTC) between two users of my main app.
I have a web app (React) and a mobile app (React-Native) that each connect through socket.io to a node server I created. This node server's purpose is to collect information from both users, and display this information in a web page in real time.
My web app has a button that when you click it it opens up that debugging web page in a new tab with the debugging information; I just use window.open. Is it possible to do something similar from my mobile device, running a react-native application? That is, can I click a button and have a browser tab open on my laptop somehow? Does React-Native remote debugging work with something like this?
There is currently no supported way you can do this in React Native.
However, you can certainly add it yourself.
Navigate to node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js
Look for launchChrome(debuggerURL);, you can invoke another launchChrome function with your desired URL.
This will only appear when you select Debug JS Remotely.
You can configure the CLI server code more to launch the URL when you are not debugging.

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

Categories

Resources