May 31, 2020

django webpush

DJANGO WEBPUSH: WHAT IS DJANGO-WEBPUSH, AND HOW IS IT DONE? A GUIDE FOR BEGINNERS

Django-webpush is an application written by the user safwanrahman, created to integrate and send Web Push Notification in Django applications. Currently, supported browsers are Firefox 46+ & Chrome 52+

Installation & setup

Package installation can be performed with the following command:

pip install django-webpush

After installing the application, it should be added in INSTALLED_APPS


INSTALLED_APPS = (
    ...
    'webpush',
)

After adding the package, we migrate with the standard Django command. The output should look like this:

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, webpush
Running migrations:
  Applying webpush.0001_initial... OK

Additionally, to send notifications to Google Chrome users in settings.py, add WEBPUSH_SETTINGS entry in settings.py containing Vapid Key


WEBPUSH_SETTINGS = {
    "VAPID_PUBLIC_KEY": "Publiczny Vapid Key",
    "VAPID_PRIVATE_KEY":"Prywatny Vapid Key",
    "VAPID_ADMIN_EMAIL": "email@przykład.pl"
}

To get a Vapid Key, I recommend that you read py_vapid and Google Developer Documentation. You can also get a Vapid Key from this page. The email is provided to communicate with the admin in the event of an error in the browser server's push operation.

After possibly adding a Vapid key, it's time to add webpush in urls.py


urlpatterns =  [
    url(r'^webpush/', include('webpush.urls'))
]

Webpush information in Template

You need to load the webpush_notifications tag in the template

Example:

<body>
  <p> Hello World! </p>
  {% webpush_button %}
</body>

The Tag also supports classes, for example, bootstrap:

Example:

<body>
  <p> Hello World! </p>
  {% webpush_button with_class="btn btn-outline-info" %}
</body>

Note: The button will appear only when the user is logged in, or the context webpush will pass any group.

Sending Notifications:

Web push usually has a header and a body. The data is usually addressed as a payload.

Example: 

from webpush import send_group_notification
payload = {"head": "Welcome!", "body": "Hello World"}
send_group_notification(group_name="my_group", payload=payload, ttl=1000)

The TTL header is designed to send the server information for how long it is to keep the notification if the user is offline.

If there is a need to send a notification to a specific user, we send notifications with the following command:

 send_user_notification(user=user, payload=payload, ttl=1000)

Additionally, by creating an appropriate view, the webpush application allows you to send a notification via JSON, e.g., Postman.

Example:

def send_push(request):
    try:
        body = request.body
        data = json.loads(body)
        if 'head' not in data or 'body' not in data or 'id' not in data:
            return JsonResponse(status=400, data={"message": "Wrong format json'a"})
        user_id = data['id']
        user = get_object_or_404(User, pk=user_id)
        payload = {'head': data['head'], 'body': data['body']}
        send_user_notification(user=user, payload=payload, ttl=1000)
        #send_group_notification(group_name="my_group", payload=payload, ttl=1000) dla grupy
        return JsonResponse(status=200, data={"message": "Request succesfully sent"})
    except TypeError:
        return JsonResponse(status=500, data={"message": "Error occured"})

Example of JSON:

{
  "head": "notification test",
  "body": "test",
  "id": "1"
}

After successive sending of the request, a notification should pop up:

To set an image and a possible link, after clicking on the notification to the payload, add "icon" and "URL."


payload={"head": "Welcome!", "body": "Hello World",
"icon": "link-to-photo“, "url": "link-to-reference"}

Summary

Django-webpush is a fairly simple application to implement; in combination with a properly written Service Worker, it can create fairly convenient handling of notifications, whether for online chat or pseudo-facebook. The documentation allows you to familiarize yourself with the add-on mechanics, which also includes a lot of guides on Google.