How to set up Web Push Notifications? - HashedIn Technologies

How to set up Web Push Notifications?

Technology - 04 Jun 2017
Vishal Sharma

This is the fourth post in the Django Blog Series. In this post we will go through implementation of web push notifications for Google Chrome in Django. This post is inspired from the push notifications of Charcha Discussion Forum. You can find the full code for the charcha forum here.

Web Push Notifications require a service worker to run in the browser through which push notification can be sent. It sends the notification through Firebase Cloud Messaging, enabling applications to interact with the users even while not using the application.

Registering Application on Firebase

To send Web Push Notification to the client, you need to register your application on Firebase Console.

  • Register a new project on Firebase.
  • Go to Settings > Project Settings.
  • Go to Cloud Messaging Tabs.
  • Save the server key and sender id. Sender id will be used while registering service worker on client’s machine and server key will be used to send push notification. Sender Id will be stored in the manifest.json file and server key will be used to send chrome push notification from the server.

Setting up Service Worker

  • Create a manifest.json file which will contain information about the application.

  • Create a service-worker.js file which will contain the event listeners and configuration for notification. Push Event listener will push the notification to the user when an event is received by Service worker.

  • Notification click event listener specifies the action that needs to be performed when a notification is clicked.

Subscribing or Unsubscribing Users

Create a javascript file which contains the code for subscribing to push notification, adding service worker, asking user for notification permission and storing the endpoint in the database.

Define the following variables:

Define onPageLoad() which will check and register the service worker. On successful registration of service worker it will call initialiseState() which is defined in the next step.

Define initialiseState() which will check whether notifications are supported by the browser or not. If notifications are supported it will call the subscribe() which is defined in the next step.

Define subscribe() which tries to subscribe the user to push notification. If subscription does not exist, it will ask user for notification permission. Once notification permission is granted, it will receive the subscription details which will be sent to postSubscribeObj() for processing. If user has already subscribed the same subscription details will be returned.

Define unsubscribe() which will unsubscribe user from the push notification by deleting the endpoint from the database. It will get the subscription details from the pushManager and send it to postSubscribeObj() to update the subscription status on the server.

Define postSubscribeObj() which updates the endpoint on the server by making an API call.

Call onPageLoad() to initialize the worker status check and update subscription.

  • Add above javascript file and manifest.json on the home page where you want to ask notification permission from the user.
  • If the user allows, the push notification will be subscribed and the endpoint can be stored. On successful registration, add an API call to save the notification endpoint which will be used to send web push notification to the user.

Sending Web Push Notification

On successful subscription, endpoint will be stored which can be used to send notification to the user. For python, Pywebpush package can be used to send web push notification.

Prerequisite


Summary

In this blog, you learnt the implementation of web push notifications for Google Chrome in Django. This is how you can setup Web Push Notifications for Chrome.

Push Libraries- https://github.com/web-push-libs/

Share
Tweet
+1
Share

E-book on Digital Business Transformation