Home
This repository contains and explains necessary steps to configure web push notifications for your webapp on Safari and Push API supported browsers as listed below:
- Safari 10+
- Chrome 49+
- Firefox 52+
- Opera 42+
This tutorial uses Java in Back-end and JavaScript in front-end. IntelliJ IDEA configured for Java, Maven and PHP is recommended to use for this tutorial. Source code can be downloaded from top of this site. The code is written for demonstration purpose and you have to learn and modify the code to use in your production environment. Follow the steps below to configure web push notifications.
Mobile push notifications can be sent from your back-end to some device owner's notification service such as Google's FCM or Apple's APNS. Whenever the receiver device has the internet connectivity, pending messages are fetched from device owner's notification service and displayed to the user. To do this, your message recipient should have installed a push notification enabled mobile application given by you. Web push notifications or browser push notifications are somewhat different. Those are delivered to a web browser. Message recipient should have allowed notifications for your webapp or website by visiting the url from a push notification supported browser. It's the time for sending push notifications to your webapp visitors.
You can download the source code related to this tutorial from below or clicking the link at the top of this page. Feel free to contribute to the repository.
Source code: Browser-push
If you are not willing to send notifications for Safari users, you can skip almost all the steps 😄. Safari doesn't support Push API which is the W3C standard for web push notification protocol yet. But Chrome, Firefox and Opera latest versions has nicely done that. Therefore, we have to handle Safari separately while other all browsers can be considered as one. Let's say Safari and non-Safari.