One of the major features of web apps (both on desktop and mobile browsers) is the ability to send push notifications that are delivered even when the website is closed.
Displaying a notification with a native look is simple to achieve with JavaScript, and in particular with the Web Notifications API:
if (Notification.permission === "granted") {
var notification = new Notification("Hello, world!");
}
However this simple implementation works only when the website is open.
Is it possible to send notifications from a website that is not currently open in the browser? The answer is YES, but you need a more complex implementation.
You can use the Push API and other related technologies to achieve that.
In particular, this is the required technology stack for sending real push notifications from a web app:
- W3C Push API: a way to deliver push messages to the browser through a push service
- Service Worker: the script that is activated when a message is delivered to the browser
- Web Notifications: the actual notifications displayed to the users
- Web Push: a protocol used for sending the push messages from an app to a push service
- VAPID: an additional layer of security and authentication for Web Push.
When you use the Push API, you can instantly reach a user with notifications even in the following cases:
- your web app is closed and the user is surfing other websites
- your web app is closed and the browser is closed.
The second case has only partial browser support (it is supported mainly on mobile). In any case if a user cannot be reached immediately (e.g. the device is offline), the notification will be delivered as soon as he becomes available (e.g. internet connection activated or smartphone turned on).
If you want to implement web push notifications by yourself you can check out these tutorials:
You can also read a short technical introduction to Web Push written by Pushpad.
There are also many open source libraries that can help with the implementation of web push. Pushpad is also one of the major contributors (top 3) of the Web Push gem for Ruby.
The Push API is already supported by all major browsers (see also the Safari status).
Finally, if you don't want to build and maintain your own solution for notifications, we recommend to try Pushpad, which is a managed service for web push notifications.