I am wondering if I can use web push notifications to update a web page without displaying a notification for the user to interact with. Essentially I want to refresh data after an event on the server.
If this is possible, is it still necessary to receive permission from the user to send these push updates?
Yes, you can send push messages without showing a notification, but there are limitations on both Firefox and Chrome on the raw number of "invisible" push messages and the rate at which you send them.
You can experiment a bit with the quotas in different browers using the Push Quota ServiceWorker Cookbook example.
Related
I am currently using SocketIO and NodeJS to handle messages. However the problem is that when the user becomes offline there's no way that the other user will receive the message.
The solution I came up with was to store the message in the database.
But a new problem arise, when fetching the message and push notification.
If I do fetch for "n" minutes in the server when the app is in background/inactive. There will be a lot of request in the server, and I personally think that it is inefficient. and also it drains the battery.
What is the proper way how to handle fetching the messages from database or pushing notification in app without making too much request in "n" minutes and draining too much power?
You need to save the last sync time in the App. And whenever app comes from background/Inactive state. You need to call an API with this time. This API will give you all the messages and the Push notification which has comes after the last sync time. In this way, With one API call, you will be able to get all the messages and push notifications. I had used this approach to syncing my data in one of my app.
My suggestion is to implement a system of background jobs in the API, checking when there is a new notification to be launched, or with the notification already ready waiting to be launched in the queue. You can search for queue manager like Bull, Bee-Queue.
To launch push notification in the closed/inactive app, you can use a service like OneSignal or Firebase.
I implemented this a few weeks ago and did it this way.
API = Node.js, Bull Queue
App = React Native, OneSignal
Going back to this question if somebody stumbled upon this question.
The best way to handle offline messages regardless if you are using NodeJS/MongoDB, etc. is to store it on server's database. Then call an API that fetches the the messages which is equal to user's ID whenever the mobile app comes to foreground.
If your problem is that you needed notification and you are using
react-native-push-notifications / react-native-push-notification-ios
Then you should use the data notification to include the message on notification parameter on the server's side(Assuming that you are using Firebase Cloud Messaging). With this way you can directly save the message on the mobile's database.
I have a list of company tablets (Android) that are located all around the United States. I would like to be able to select one from a list, compose a message, then be able to send the message to the selected device. Some locations have multiple tablets on the same network, in which i'd like to send to all of them at once if possible.
Is it possible to send data over the internet via JavaScript to an android device, or a list of devices? If so, how can this be done? Is there a certain term for what I am trying to do so I may google this for better results?
I apologize for my lack of knowledge and terms.
There's two options you have:
1. Use websockets to send messages to active devices
In your backend system (you need one) keep a list of active connections. In your webpage, display the connections. Select one, and in an input field type a message. Send this message to the backend, e.g. form post, and send this message to the corresponding connection. In your active device, have an app working that listens to the socket and displays the message.
2. Use Push notifications
You can easily send push notifications to android devices. However, you need a working app on a device before you can send it pushnotifications. Firstly, the app needs to register itself at GooglePlayServices, there's a ton of tutorials on this. Then this will give the app a deviceId, which it needs to send to your backend. In your backend you keep track of all deviceIds in your database.
The same principle holds for alternative 1: display the deviceId's in your listbox, and send it together with a message to your backend.
In the backend send a push notification to the device. There's also a ton of tutorials on how to do that (you need to set up a project in Google to get an API key, which is really easy).
There are probably other alternatives, but these two are the most easy I'm sure.
Also, in order to group send notifications, group devices by their external IP. Make the devices register themselves to your backend so you have their external IP, then group them by that in your database. In the frontend now select an IP instead of a device.
EDIT by FoxDonut (Asker)
I also asked, in the comments below, if it is possible to use push notifications without uploading my application into the Google Play Store. The answer is Yes. Please see this post for clarity.
Im trying to use the web notification API (https://developer.mozilla.org/en-US/docs/Web/API/Notification) to show browser notification, something like the example of this link (in marked answer) Chrome desktop notification example
However, Im looking for something that will automatically show certain such notification on daily basis, on a particular time. Like i see such notification for facebook in chrome browser. Is that possible? how can i achieve that? I know there might some browser limitation, however i'll be happy if i can do that for chrome and firefox.
You would need to use the Push API, service workers, and some corresponding server infrastructure. That way, if users opt-in, you can wake up your service worker at a particular time and deliver a message to the user.
What is the difference between Chrome Notifications API and the Push Notification API when developing Web notifications. When each one should be used and how are they different?
NOTIFICATION API
The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background. This article looks at the basics of using this API in your own apps.
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
PUSH API
The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
https://developer.mozilla.org/en/docs/Web/API/Push_API
Check these links for more info:
https://www.w3.org/TR/push-api/
https://www.w3.org/TR/notifications/
It can be confusing, but if I get this right, looking for a clear answer myself, it is like this:
Notifications API = used to send notifications when the user IS ON your site/app, even when idle or in the background.
Push API = used to send notifications when the user IS NOT ON your site/app at the moment.
Browser compatibility
https://caniuse.com/notifications
https://caniuse.com/push-api
NOTE: For Safari on macOS Apple has it's own push notification API:
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/Introduction/Introduction.html
Safari on iOS still doesn't support any of the two APIs (Feb 2021).
I'm trying to understand how to send notifications using the browser when my website is closed.
I see that Facebook does it but I can't get how.
Any help is welcome.
You are looking for the Push API:
The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
And the Notifications API:
The Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
You must use these in combination with a Service Worker. From the Push API documentation:
For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications using PushManager.subscribe().
You can use Roost. Roost is a push notification platform for websites. You can see its documentation to perform both client-side and server-side integrations, so that you can customize your Roost notifications as needed.