31 maja 2020

django webpush

Czym jest django-webpush i z czym to się je? Poradnik dla zielonych

Django-webpush to aplikacja napisana przez użytkownika safwanrahman, stworzona na potrzebe integracji i wysyłania Web Push Notification w aplikacjach Django. Aktualnie wspierane przeglądarki to Firefox 46+ i Chrome 52+

Instalacja i setup

Instalację paczki można wykonać następującą komendą:

pip install django-webpush

Po zainstalowaniu aplikacji należy ją dodać w INSTALLED_APPS


INSTALLED_APPS = (
    ...
    'webpush',
)

Po dodaniu paczki dokonujemy migracji standardową komendą Django. Output powinien wyglądać tak:

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

Dodatkowo, by wysyłać powiadomienia do użytkowników przeglądarki Google Chrome, w settings.py należy dodać wpis WEBPUSH_SETTINGS zawierający Vapid Key


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

W celu zdobycia Vapid Key'a polecam zapoznać się z py_vapid oraz Dokumentacji developerskiej Google. Vapid key można też zdobyć z tej strony. Email podawany jest na potrzebę komunikacji z adminem w razie błędu działania push serwera przeglądarki

Po ewentualnym dodaniu Vapid key'a czas dodać webpush w urls.py


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

Informacje o webpush w Template

W szablonie trzeba wczytać tag webpush_notifications

Przykład:

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

Tag wspiera także klasy, na przykład bootstrap:

Przykład:

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

Uwaga: Przycisk pojawi się tylko wtedy kiedy użytkownik jest zalogowany, lub jakakolwiek grupa zostanie przekazana przez context webpusha.

Wysyłanie Notyfikacji

Web push zazwyczaj ma header i ciało (body). Dane zazwyczaj są adresowane jako payload.

Przykład: 

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

Header TTL ma za zadanie przekazać do serwera przez jaki okres czasu ma przechowywać powiadomienie jeśli użytkownik jest offline.

Jeśli jest potrzeba wysyłania powiadomienia do konkretnego użytkownika, notyfikacje wysyłamy następującą komendą:

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

Dodatkowo tworząc odpowiedni widok, aplikacja webpush pozwala na wysłanie powiadomienia przez JSON, np programem Postman

Przykład:

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": "Zły 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": "Pomyślnie wysłano żądanie"})
    except TypeError:
        return JsonResponse(status=500, data={"message": "Wystąpił błąd"})

Przykładowy JSON:

{
  "head": "test powiadomień",
  "body": "test",
  "id": "1"
}

Po sukcesywnym wysłaniu żądania powinno wyskoczyć powiadomienie:

By ustawić obrazek, i ewentualny odsyłacz po kliknięciu w powiadomienie do payload należy dodać "icon" oraz "url"


payload={"head": "Welcome!", "body": "Hello World",
"icon": "link-do-obrazka“, "url": "link-do-odsyłacza"}

Podsumowanie

Django-webpush jest dość prostą aplikacją do implementacji, w połączeniu z odpowiednio napisanym Service Workerem może stworzyć dość wygodną obsługę powiadomień, czy to do chatu online czy też pseudo-facebooka. Dokumentacja pozwala dość dobrze zapoznać się z mechanikami dodatku, do którego jest także masa poradników na Google.