TOC

So senden Sie Web-Push-Benachrichtigungen aus Django-Anwendungen

Der Autor hat Open Internet / Free Speech Fund ausgewählt, um eine Spende im Rahmen von https://do.co/w4do-cta zu erhalten [Write for DOnations] program.

Einführung

Das Web entwickelt sich ständig weiter und kann jetzt Funktionen erreichen, die früher nur auf nativen Mobilgeräten verfügbar waren. Die Einführung von JavaScript service workers ermöglichte dem Web neue Funktionen wie die Hintergrundsynchronisierung, das Offline-Caching und das Senden von https: // developer .mozilla.org / de / docs / Web / API / Push_API [Push-Benachrichtigungen].

Mit Push-Benachrichtigungen können Benutzer sich anmelden, um Updates für Mobil- und Webanwendungen zu erhalten. Sie ermöglichen es Benutzern auch, mit benutzerdefinierten und relevanten Inhalten wieder mit vorhandenen Anwendungen in Kontakt zu treten.

In diesem Tutorial richten Sie unter Ubuntu 18.04 eine Django-Anwendung ein, die Push-Benachrichtigungen sendet, wenn eine Aktivität stattfindet, bei der der Benutzer die Anwendung aufrufen muss. Um diese Benachrichtigungen zu erstellen, verwenden Sie das Paket Django-Webpush und richten einen Service-Worker ein und registrieren ihn, um Benachrichtigungen für den Client anzuzeigen. Die funktionierende Anwendung mit Benachrichtigungen sieht folgendermaßen aus:

image: https: //assets.digitalocean.com/articles/django_push_18_04/web_push_final.png [Web Push Final]

Voraussetzungen

Bevor Sie mit diesem Handbuch beginnen, benötigen Sie Folgendes:

  • Ein Ubuntu 18.04-Server mit einem Benutzer ohne Rootberechtigung und einer aktiven Firewall. Weitere Informationen zum Erstellen eines Ubuntu 18.04 finden Sie in den Richtlinien unter initial server setup guide Server.

  • + pip + und + venv + installiert unter folgenden https://www.digitalocean.com/community/tutorials/how-to-install-the-django-web-framework-on-ubuntu-18-04#install- with-pip-in-a-virtual-environment [richtlinien].

  • Ein Django-Projekt mit dem Namen "+", das in Ihrem Home-Verzeichnis erstellt wurde und nach diesen Richtlinien unter https://www.digitalocean.com/community/tutorials/how-to-install-the-django-web-framework-on- eingerichtet wurde. ubuntu-18-04 # create-a-sample-project [Erstellen eines Django-Beispielprojekts unter Ubuntu 18.04]. Stellen Sie sicher, dass https://www.digitalocean.com/community/tutorials/how-to-install-the-django-web-framework-on-ubuntu-18-04#modifying-allowed_hosts-in-the-django-settings [Fügen Sie die IP-Adresse Ihres Servers in die Direktive " ALLOWED_HOSTS " ein] in Ihrer Datei " settings.py +".

Schritt 1 - Installieren von Django-Webpush und Abrufen von Vapid-Schlüsseln

Django-Webpush ist ein Paket, mit dem Entwickler Web-Push-Benachrichtigungen in Django-Anwendungen integrieren und senden können. Wir werden dieses Paket verwenden, um Push-Benachrichtigungen von unserer Anwendung auszulösen und zu senden. In diesem Schritt installieren Sie Django-Webpush und erhalten die _Voluntary Application Server Identification (VAPID) _ -Schlüssel, die zur Identifizierung Ihres Servers und zur Sicherstellung der Eindeutigkeit jeder Anforderung erforderlich sind.

Stellen Sie sicher, dass Sie sich in dem Projektverzeichnis befinden, das Sie unter den folgenden Voraussetzungen erstellt haben:

cd ~/

Aktivieren Sie Ihre virtuelle Umgebung:

source /bin/activate

Aktualisieren Sie Ihre Version von "+ pip +", um sicherzustellen, dass sie auf dem neuesten Stand ist:

pip install --upgrade pip

Installieren Sie Django-Webpush:

pip install django-webpush

Fügen Sie das Paket nach der Installation zur Liste der Anwendungen in Ihrer Datei "+ settings.py" hinzu. Öffne zuerst + settings.py +:

nano ~/djangopush/djangopush/settings.py

Fügen Sie "+ webpush " zur Liste von " INSTALLED_APPS +" hinzu:

~ / djangopush / djangopush / settings.py

...

INSTALLED_APPS = [
   ...

]
...

Speichern Sie die Datei und beenden Sie Ihren Editor.

Führen Sie in der Anwendung migrations aus, um die Änderungen zu übernehmen, die Sie an Ihrem Datenbankschema vorgenommen haben:

python manage.py migrate

Die Ausgabe sieht folgendermaßen aus und zeigt eine erfolgreiche Migration an:

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

Der nächste Schritt beim Einrichten von Web-Push-Benachrichtigungen ist das Abrufen von VAPID-Schlüsseln. Diese Schlüssel identifizieren den Anwendungsserver und können verwendet werden, um die Geheimhaltung für Push-Abonnement-URLs zu verringern, da sie Abonnements auf einen bestimmten Server beschränken.

Navigieren Sie zum Abrufen von VAPID-Schlüsseln zur Webanwendung wep-push-codelab. Hier erhalten Sie automatisch generierte Schlüssel. Kopieren Sie den privaten und den öffentlichen Schlüssel.

Als nächstes erstellen Sie einen neuen Eintrag in + settings.py + für Ihre VAPID-Informationen. Öffnen Sie zuerst die Datei:

nano ~/djangopush/djangopush/settings.py

Fügen Sie als Nächstes eine neue Direktive mit dem Namen "+ WEBPUSH_SETTINGS " mit Ihrem öffentlichen und privaten VAPID-Schlüssel und Ihrer E-Mail-Adresse unter " AUTH_PASSWORD_VALIDATORS +" hinzu:

~ / djangopush / djangopush / settings.py

...

AUTH_PASSWORD_VALIDATORS = [
   ...
]







# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/

...

Vergessen Sie nicht, die Platzhalterwerte "", "" und "++" durch Ihre eigenen Informationen zu ersetzen. Anhand Ihrer E-Mail-Adresse werden Sie benachrichtigt, wenn auf dem Push-Server Probleme auftreten.

Als Nächstes richten wir Ansichten ein, die die Startseite der Anwendung anzeigen und Push-Benachrichtigungen für abonnierte Benutzer auslösen.

Schritt 2 - Ansichten einrichten

In diesem Schritt richten wir ein grundlegendes "+ home " https://docs.djangoproject.com/en/2.1/topics/http/views/[_view_] mit dem https://docs.djangoproject.com/en ein /2.1/ref/request-response/#django.http.HttpRequest [` HttpResponse ` Antwortobjekt] für unsere Homepage, zusammen mit einer ` send_push ` Ansicht. Ansichten sind Funktionen, die Antwortobjekte von Webanforderungen zurückgeben. Die Ansicht " send_push +" verwendet die Django-Webpush-Bibliothek, um Push-Benachrichtigungen zu senden, die die von einem Benutzer auf der Homepage eingegebenen Daten enthalten.

Navigieren Sie zum Ordner "+ ~ / djangopush / djangopush +":

cd ~/djangopush/djangopush

Wenn Sie "+ ls +" im Ordner ausführen, werden die Hauptdateien des Projekts angezeigt:

Output/__init__.py
/settings.py
/urls.py
/wsgi.py

Die Dateien in diesem Ordner werden automatisch von dem Dienstprogramm "+ django-admin " generiert, mit dem Sie Ihr Projekt unter den Voraussetzungen erstellt haben. Die Datei ` settings.py ` enthält projektweite Konfigurationen wie installierte Anwendungen und den statischen Stammordner. Die Datei ` urls.py +` enthält die URL-Konfigurationen für das Projekt. Hier richten Sie Routen ein, die Ihren erstellten Ansichten entsprechen.

Erstellen Sie eine neue Datei im Verzeichnis + ~ / djangopush / djangopush + mit dem Namen + views.py +, die die Ansichten für Ihr Projekt enthält:

nano ~/djangopush/djangopush/views.py

Die erste Ansicht, die wir erstellen, ist die Ansicht "+ home +", in der die Startseite angezeigt wird, auf der Benutzer Push-Benachrichtigungen senden können. Fügen Sie der Datei den folgenden Code hinzu:

~ / djangopush / djangopush / views.py

from django.http.response import HttpResponse
from django.views.decorators.http import require_GET

@require_GET
def home(request):
   return HttpResponse('<h1>Home Page<h1>')

Die Ansicht "+ home " wird vom Dekorator " require_GET +" dekoriert, wodurch die Ansicht nur auf GET-Anforderungen beschränkt wird. Eine Ansicht gibt normalerweise eine Antwort für jede an sie gerichtete Anforderung zurück. Diese Ansicht gibt ein einfaches HTML-Tag als Antwort zurück.

Die nächste Ansicht, die wir erstellen, ist "+ send_push ", die gesendete Push-Benachrichtigungen mit dem Paket " django-webpush +" verarbeitet. Es ist nur auf POST-Anforderungen beschränkt und vom Schutz durch Cross Site Request Forgery (CSRF) ausgenommen. Auf diese Weise können Sie die Ansicht mit Postman oder einem anderen RESTful-Dienst testen. In der Produktion sollten Sie diesen Dekorator jedoch entfernen, um zu vermeiden, dass Ihre Ansichten für CSRF anfällig werden.

Um die Ansicht "+ send_push " zu erstellen, fügen Sie zunächst die folgenden Importe hinzu, um JSON-Antworten zu aktivieren und auf die Funktion " send_user_notification " in der Bibliothek " webpush +" zuzugreifen:

~ / djangopush / djangopush / views.py

from django.http.response import , HttpResponse
from django.views.decorators.http import require_GET,

Fügen Sie als Nächstes den Dekorator + require_POST + hinzu, der den vom Benutzer gesendeten Anforderungshauptteil verwendet, um eine Push-Benachrichtigung zu erstellen und auszulösen:

~ / djangopush / djangopush / views.py

@require_GET
def home(request):
   ...


@require_POST
@csrf_exempt
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": "Invalid data format"})

       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)

       return JsonResponse(status=200, data={"message": "Web push successful"})
   except TypeError:
       return JsonResponse(status=500, data={"message": "An error occurred"})

Wir verwenden zwei Dekoratoren für die Ansicht "+ send_push ": den Dekorator " require_POST ", der die Ansicht nur auf POST-Anforderungen beschränkt, und den Dekorator " csrf_exempt +", der die Ansicht vom CSRF-Schutz ausschließt.

Diese Ansicht erwartet POST-Daten und führt Folgendes aus: Sie ruft den "+ body " der Anforderung ab und deserialisiert das JSON-Dokument mithilfe des Pakets "https://docs.python.org/3/library/json.html[json]" zu einem Python-Objekt mit https://docs.python.org/3.6/library/json.html [` json.loads `]. ` json.loads +` nimmt ein strukturiertes JSON-Dokument und konvertiert es in ein Python-Objekt.

Die Ansicht erwartet, dass das Anforderungshauptteilobjekt drei Eigenschaften aufweist:

  • + head +: Der Titel der Push-Benachrichtigung.

  • + body +: Der Body der Benachrichtigung.

  • + id +: Die + id + des anfordernden Benutzers.

Wenn eine der erforderlichen Eigenschaften fehlt, gibt die Ansicht eine "+ JSONResponse " mit dem Status 404 "Nicht gefunden" zurück. Wenn der Benutzer mit dem angegebenen Primärschlüssel vorhanden ist, gibt die Ansicht " user " mit dem entsprechenden Primärschlüssel über das https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#get-object zurück -oder-404 [` get_object_or_404 ` function] aus der ` django.shortcuts +` Bibliothek. Ist der Benutzer nicht vorhanden, gibt die Funktion einen 404-Fehler zurück.

Die Ansicht verwendet auch die Funktion "+ send_user_notification " aus der Bibliothek " webpush +". Diese Funktion benötigt drei Parameter:

  • + User +: Der Empfänger der Push-Benachrichtigung.

  • + payload +: Die Benachrichtigungsinformationen, einschließlich der Benachrichtigung + head + und + body +.

  • + ttl +: Die maximale Zeit in Sekunden, die die Benachrichtigung gespeichert werden soll, wenn der Benutzer offline ist.

Wenn keine Fehler auftreten, gibt die Ansicht eine "+ JSONResponse " mit dem Status "200 Success" und einem Datenobjekt zurück. Wenn ein " KeyError " auftritt, gibt die Ansicht den Status 500 "Internal Server Error" zurück. Ein " KeyError +" tritt auf, wenn der angeforderte Schlüssel eines Objekts nicht vorhanden ist.

Im nächsten Schritt erstellen wir entsprechende URL-Routen, die mit den von uns erstellten Ansichten übereinstimmen.

Schritt 3 - Zuordnen von URLs zu Ansichten

Mit Django können Sie URLs erstellen, die mit einem Python-Modul namens "+ URLconf " eine Verbindung zu Ansichten herstellen. Dieses Modul ordnet URL-Pfadausdrücke Python-Funktionen (Ihren Ansichten) zu. Normalerweise wird eine URL-Konfigurationsdatei automatisch generiert, wenn Sie ein Projekt erstellen. In diesem Schritt aktualisieren Sie diese Datei so, dass sie neue Routen für die im vorherigen Schritt erstellten Ansichten sowie die URLs für die App " django-webpush +" enthält, die Endpunkte zum Abonnieren von Benutzern für Push-Benachrichtigungen bereitstellt.

Weitere Informationen zu Ansichten finden Sie unter How To Create Django Views.

Öffne + urls.py +:

nano ~/djangopush/djangopush/urls.py

Die Datei sieht folgendermaßen aus:

~ / djangopush / djangopush / urls.py

"""untitled URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
   https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
   1. Add an import:  from my_app import views
   2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
   1. Add an import:  from other_app.views import Home
   2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
   1. Import the include() function: from django.urls import include, path
   2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

urlpatterns = [
   path('admin/', admin.site.urls),
]

Im nächsten Schritt ordnen Sie die von Ihnen erstellten Ansichten URLs zu. Fügen Sie zunächst den Import "+ include +" hinzu, um sicherzustellen, dass alle Routen für die Django-Webpush-Bibliothek zu Ihrem Projekt hinzugefügt werden:

~ / djangopush / djangopush / urls.py

"""webpushdjango URL Configuration
...
"""
from django.contrib import admin
from django.urls import path,

Importieren Sie als Nächstes die Ansichten, die Sie im letzten Schritt erstellt haben, und aktualisieren Sie die Liste "+ urlpatterns +", um Ihre Ansichten zuzuordnen:

~ / djangopush / djangopush / urls.py

"""webpushdjango URL Configuration
...
"""
from django.contrib import admin
from django.urls import path,



urlpatterns = [
                 path('admin/', admin.site.urls),



             ]

Hier registriert die Liste "+ urlpatterns " die URLs für das Paket " django-webpush " und ordnet Ihre Ansichten den URLs " / send_push " und " / home +" zu.

Testen Sie die Ansicht "+ / home +", um sicherzustellen, dass sie wie beabsichtigt funktioniert. Stellen Sie sicher, dass Sie sich im Stammverzeichnis des Projekts befinden:

cd ~/djangopush

Starten Sie Ihren Server, indem Sie den folgenden Befehl ausführen:

python manage.py runserver :8000

Navigieren Sie zu "+ http: //: 8000 +". Sie sollten die folgende Homepage sehen:

image: https://assets.digitalocean.com/articles/django_push_18_04/django_push_home.png [Erste Ansicht der Homepage]

Zu diesem Zeitpunkt können Sie den Server mit "+ STRG + C " beenden. Anschließend werden Vorlagen erstellt und in unseren Ansichten mit der Funktion " render +" gerendert.

Schritt 4 - Erstellen von Vorlagen

Mit der Vorlagen-Engine von Django können Sie die benutzerbezogenen Ebenen Ihrer Anwendung mit Vorlagen definieren, die HTML-Dateien ähneln. In diesem Schritt erstellen und rendern Sie eine Vorlage für die Ansicht "+ home +".

Erstellen Sie einen Ordner mit dem Namen "+ templates +" im Stammverzeichnis Ihres Projekts:

mkdir ~/djangopush/templates

Wenn Sie zu diesem Zeitpunkt "+ ls +" im Stammverzeichnis Ihres Projekts ausführen, sieht die Ausgabe folgendermaßen aus:

Output/djangopush
/templates
db.sqlite3
manage.py
/my_env

Erstellen Sie eine Datei mit dem Namen "+ home.html" im Ordner "+ templates":

nano ~/djangopush/templates/home.html

Fügen Sie der Datei den folgenden Code hinzu, um ein Formular zu erstellen, in das Benutzer Informationen zum Erstellen von Push-Benachrichtigungen eingeben können:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="vapid-key" content="{{ vapid_key }}">
   {% if user.id %}
       <meta name="user_id" content="{{ user.id }}">
   {% endif %}
   <title>Web Push</title>
   <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
</head>

<body>
<div>
   <form id="send-push__form">
       <h3 class="header">Send a push notification</h3>
       <p class="error"></p>
       <input type="text" name="head" placeholder="Header: Your favorite airline 😍">
       <textarea name="body" id="" cols="30" rows="10" placeholder="Body: Your flight has been cancelled 😱😱😱"></textarea>
       <button>Send Me</button>
   </form>
</div>
</body>
</html>

Das "+ body " der Datei enthält ein Formular mit zwei Feldern: Ein " input " - Element enthält den Kopf / Titel der Benachrichtigung und ein " textarea +" - Element enthält den Benachrichtigungstext.

Im Abschnitt "+ head" der Datei befinden sich zwei "+ meta" -Tags, die den öffentlichen VAPID-Schlüssel und die Benutzer-ID enthalten. Diese beiden Variablen sind erforderlich, um einen Benutzer zu registrieren und ihm Push-Benachrichtigungen zu senden. Die Benutzer-ID ist hier erforderlich, da Sie AJAX-Anforderungen an den Server senden und die "+ ID " zur Identifizierung des Benutzers verwendet wird. Wenn der aktuelle Benutzer ein registrierter Benutzer ist, erstellt die Vorlage ein " Meta" -Tag mit ihrer "+ ID" als Inhalt.

Der nächste Schritt ist, Django mitzuteilen, wo Sie Ihre Vorlagen finden. Dazu bearbeiten Sie "+ settings.py " und aktualisieren die " TEMPLATE" -Liste.

Öffnen Sie die Datei + settings.py +:

nano ~/djangopush/djangopush/settings.py

Fügen Sie der Liste + DIRS + Folgendes hinzu, um den Pfad zum Vorlagenverzeichnis anzugeben:

~ / djangopush / djangopush / settings.py

...
TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       'DIRS': [],
       'APP_DIRS': True,
       'OPTIONS': {
           'context_processors': [
               ...
           ],
       },
   },
]
...

Aktualisieren Sie als Nächstes in Ihrer Datei "+ views.py" die Ansicht "+ home ", um die Vorlage " home.html" zu rendern. Öffne die Datei:

nano ~/djangpush/djangopush/views.py

Fügen Sie zunächst einige zusätzliche Importe hinzu, einschließlich der Konfiguration "+ settings ", die alle Projekteinstellungen aus der Datei " settings.py " und die Funktion " render " aus " django.shortcuts +" enthält:

~ / djangopush / djangopush / views.py

...
from django.shortcuts import , get_object_or_404
...
import json


...

Entfernen Sie als Nächstes den ursprünglichen Code, den Sie der Ansicht "+ home +" hinzugefügt haben, und fügen Sie den folgenden hinzu, der angibt, wie die soeben erstellte Vorlage gerendert wird:

~ / djangopush / djangopush / views.py

...

@require_GET
def home(request):

Der Code weist die folgenden Variablen zu:

  • + webpush_settings +: Diesem wird der Wert des Attributs + WEBPUSH_SETTINGS + aus der Konfiguration + settings + zugewiesen.

  • + vapid_key +: Hiermit wird der Wert von + VAPID_PUBLIC_KEY + aus dem Objekt + webpush_settings + abgerufen, der an den Client gesendet werden soll. Dieser öffentliche Schlüssel wird mit dem privaten Schlüssel verglichen, um sicherzustellen, dass der Client mit dem öffentlichen Schlüssel Push-Nachrichten vom Server empfangen kann.

  • + user +: Diese Variable stammt aus der eingehenden Anfrage. Immer wenn ein Benutzer eine Anfrage an den Server stellt, werden die Details für diesen Benutzer im Feld "+ Benutzer +" gespeichert.

Die Funktion https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#render [+ render +] gibt eine HTML-Datei und eine https://docs.djangoproject.com/en/2.1 zurück /ref/templates/api/#django.template.Context[context object] enthält den aktuellen Benutzer und den vapid öffentlichen Schlüssel des Servers. Hier sind drei Parameter erforderlich: "+ request ", " template +", das gerendert werden soll, und das Objekt, das die Variablen enthält, die in der Vorlage verwendet werden.

Nachdem unsere Vorlage erstellt und die "+ home +" - Ansicht aktualisiert wurde, können wir Django für die Bereitstellung unserer statischen Dateien konfigurieren.

Schritt 5 - Statische Dateien bereitstellen

Zu den Webanwendungen gehören CSS, JavaScript und andere Bilddateien, die Django als "statische Dateien" bezeichnet. Mit Django können Sie alle statischen Dateien aus jeder Anwendung in Ihrem Projekt an einem einzigen Speicherort sammeln, von dem aus sie bereitgestellt werden. Diese Lösung heißt "+ django.contrib.staticfiles +". In diesem Schritt aktualisieren wir unsere Einstellungen, um Django mitzuteilen, wo unsere statischen Dateien gespeichert werden.

Öffne + settings.py +:

nano ~/djangopush/djangopush/settings.py

Stellen Sie in + settings.py + zunächst sicher, dass das + STATIC_URL + definiert wurde:

~ / djangopush / djangopush / settings.py

...
STATIC_URL = '/static/'

Fügen Sie als nächstes eine Liste von Verzeichnissen mit dem Namen "+ STATICFILES_DIRS +" hinzu, in denen Django nach statischen Dateien sucht:

~ / djangopush / djangopush / settings.py

...
STATIC_URL = '/static/'

Sie können jetzt die + STATIC_URL + zur Liste der in Ihrer + urls.py + - Datei definierten Pfade hinzufügen.

Öffne die Datei:

nano ~/djangopush/djangopush/urls.py

Fügen Sie den folgenden Code hinzu, der die URL-Konfiguration "+ static " importiert und die Liste " urlpatterns " aktualisiert. Die Hilfsfunktion verwendet hier die Eigenschaften " STATIC_URL " und " STATIC_ROOT ", die wir in der Datei " settings.py +" bereitgestellt haben, um die statischen Dateien des Projekts bereitzustellen:

~ / djangopush / djangopush / urls.py

...



urlpatterns = [
   ...
]

Mit den Einstellungen für statische Dateien können wir die Startseite der Anwendung weiter gestalten.

Schritt 6 - Gestalten der Homepage

Nachdem Sie Ihre Anwendung für die Bereitstellung statischer Dateien eingerichtet haben, können Sie ein externes Stylesheet erstellen und es mit der Datei "+ home.html +" verknüpfen, um die Startseite zu formatieren. Alle statischen Dateien werden in einem statischen Verzeichnis im Stammverzeichnis Ihres Projekts gespeichert.

Erstellen Sie einen statischen Ordner und einen CSS-Ordner im statischen Ordner:

mkdir -p ~/djangopush/static/css

Öffnen Sie eine CSS-Datei mit dem Namen "+ styles.css " im Ordner " css +":

nano ~/djangopush/static/css/styles.css

Fügen Sie die folgenden Stile für die Homepage hinzu:

~ / djangopush / static / css / styles.css

body {
   height: 100%;
   background: rgba(0, 0, 0, 0.87);
   font-family: 'PT Sans', sans-serif;
}

div {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

form {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 35%;
   margin: 10% auto;
}

form > h3 {
   font-size: 17px;
   font-weight: bold;
   margin: 15px 0;
   color: orangered;
   text-transform: uppercase;
}

form > .error {
   margin: 0;
   font-size: 15px;
   font-weight: normal;
   color: orange;
   opacity: 0.7;
}

form > input, form > textarea {
   border: 3px solid orangered;
   box-shadow: unset;
   padding: 13px 12px;
   margin: 12px auto;
   width: 80%;
   font-size: 13px;
   font-weight: 500;
}

form > input:focus, form > textarea:focus {
   border: 3px solid orangered;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
   outline: unset;
}

form > button {
   justify-self: center;
   padding: 12px 25px;
   border-radius: 0;
   text-transform: uppercase;
   font-weight: 600;
   background: orangered;
   color: white;
   border: none;
   font-size: 14px;
   letter-spacing: -0.1px;
   cursor: pointer;
}

form > button:disabled {
   background: dimgrey;
   cursor: not-allowed;
}

Nachdem Sie das Stylesheet erstellt haben, können Sie es mit static template tags mit der Datei + home.html + verknüpfen. . Öffnen Sie die Datei "+ home.html":

nano ~/djangopush/templates/home.html

Aktualisieren Sie den Abschnitt "+ head +", um einen Link zum externen Stylesheet hinzuzufügen:

~ / djangopush / templates / home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
   ...

</head>
<body>
   ...
</body>
</html>

Stellen Sie sicher, dass Sie sich in Ihrem Hauptprojektverzeichnis befinden, und starten Sie Ihren Server erneut, um Ihre Arbeit zu überprüfen:

cd ~/djangopush
python manage.py runserver :8000

Wenn Sie "+ http: //: 8000 +" besuchen, sollte es so aussehen:

image: https: //assets.digitalocean.com/articles/django_push_18_04/push_styled_home.png [Homepage-Ansicht] + Sie können den Server erneut mit STRG + C + beenden.

Nachdem Sie die Seite "+ home.html" erfolgreich erstellt und formatiert haben, können Sie Benutzer abonnieren, die Push-Benachrichtigungen erhalten, wenn sie die Startseite besuchen.

Schritt 7 - Registrieren eines Servicemitarbeiters und Abonnieren von Benutzern für Push-Benachrichtigungen

Web-Push-Benachrichtigungen können Benutzer benachrichtigen, wenn Aktualisierungen für Anwendungen vorliegen, die sie abonniert haben, oder sie auffordern, sich erneut mit Anwendungen zu befassen, die sie in der Vergangenheit verwendet haben. Sie basieren auf zwei Technologien, der push API und der https://developer.mozilla.org/en-US/docs/ Web / API / Notifications_API [Benachrichtigungen] API. Beide Technologien setzen die Anwesenheit eines Servicemitarbeiters voraus.

Ein Push wird aufgerufen, wenn der Server dem Servicemitarbeiter Informationen bereitstellt und der Servicemitarbeiter die Benachrichtigungs-API verwendet, um diese Informationen anzuzeigen.

Wir werden unsere Benutzer für den Push abonnieren und dann die Informationen aus dem Abonnement an den Server senden, um sie zu registrieren.

Erstellen Sie im Verzeichnis + static + einen Ordner mit dem Namen + js +:

mkdir ~/djangopush/static/js

Erstellen Sie eine Datei mit dem Namen "+ registerSw.js +":

nano ~/djangopush/static/js/registerSw.js

Fügen Sie den folgenden Code hinzu, mit dem überprüft wird, ob Servicemitarbeiter im Browser des Benutzers unterstützt werden, bevor Sie versuchen, einen Servicemitarbeiter zu registrieren:

~ / djangopush / static / js / registerSw.js

const registerSw = async () => {
   if ('serviceWorker' in navigator) {
       const reg = await navigator.serviceWorker.register('sw.js');
       initialiseState(reg)

   } else {
       showNotAllowed("You can't send push notifications ☹️😢")
   }
};

Zuerst prüft die Funktion "+ registerSw ", ob der Browser Servicemitarbeiter unterstützt, bevor sie registriert werden. Nach der Registrierung wird die Funktion " initializeState " mit den Registrierungsdaten aufgerufen. Wenn Servicemitarbeiter im Browser nicht unterstützt werden, wird die Funktion " showNotAllowed +" aufgerufen.

Fügen Sie als Nächstes den folgenden Code unter der Funktion "+ registerSw +" hinzu, um zu überprüfen, ob ein Benutzer Push-Benachrichtigungen erhalten kann, bevor er versucht, sie zu abonnieren:

~ / djangopush / static / js / registerSw.js

...

const initialiseState = (reg) => {
   if (!reg.showNotification) {
       showNotAllowed('Showing notifications isn\'t supported ☹️😢');
       return
   }
   if (Notification.permission === 'denied') {
       showNotAllowed('You prevented us from showing notifications ☹️🤔');
       return
   }
   if (!'PushManager' in window) {
       showNotAllowed("Push isn't allowed in your browser 🤔");
       return
   }
   subscribe(reg);
}

const showNotAllowed = (message) => {
   const button = document.querySelector('form>button');
   button.innerHTML = `${message}`;
   button.setAttribute('disabled', 'true');
};

Die Funktion "+ initializeState +" überprüft Folgendes:

  • Ob der Benutzer Benachrichtigungen aktiviert hat oder nicht, mit dem Wert von "+ reg.showNotification +".

  • Gibt an, ob der Benutzer der Anwendung die Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat.

  • Gibt an, ob der Browser die API "+ PushManager " unterstützt. Wenn eine dieser Prüfungen fehlschlägt, wird die Funktion " showNotAllowed +" aufgerufen und das Abonnement abgebrochen.

Die Funktion "+ showNotAllowed +" zeigt eine Nachricht auf der Schaltfläche an und deaktiviert sie, wenn ein Benutzer nicht zum Empfang von Benachrichtigungen berechtigt ist. Außerdem werden entsprechende Meldungen angezeigt, wenn ein Benutzer die Anzeige von Benachrichtigungen in der Anwendung eingeschränkt hat oder wenn der Browser Push-Benachrichtigungen nicht unterstützt.

Sobald wir sichergestellt haben, dass ein Benutzer Push-Benachrichtigungen erhalten kann, abonnieren Sie diese im nächsten Schritt mit + pushManager +. Fügen Sie den folgenden Code unter der Funktion + showNotAllowed + hinzu:

~ / djangopush / static / js / registerSw.js

...

function urlB64ToUint8Array(base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4);
   const base64 = (base64String + padding)
       .replace(/\-/g, '+')
       .replace(/_/g, '/');

   const rawData = window.atob(base64);
   const outputArray = new Uint8Array(rawData.length);
   const outputData = outputArray.map((output, index) => rawData.charCodeAt(index));

   return outputData;
}

const subscribe = async (reg) => {
   const subscription = await reg.pushManager.getSubscription();
   if (subscription) {
       sendSubData(subscription);
       return;
   }

   const vapidMeta = document.querySelector('meta[name="vapid-key"]');
   const key = vapidMeta.content;
   const options = {
       userVisibleOnly: true,
       // if key exists, create applicationServerKey property
       ...(key && {applicationServerKey: urlB64ToUint8Array(key)})
   };

   const sub = await reg.pushManager.subscribe(options);
   sendSubData(sub)
};

Durch Aufrufen der Funktion "+ pushManager.getSubscription " werden die Daten für ein aktives Abonnement zurückgegeben. Wenn ein aktives Abonnement vorhanden ist, wird die Funktion " sendSubData +" mit den als Parameter übergebenen Abonnementinformationen aufgerufen.

Wenn kein aktives Abonnement vorhanden ist, wird der öffentliche VAPID-Schlüssel, der Base64-URL-sicher codiert ist, mit der Funktion "+ urlB64ToUint8Array " in ein Uint8Array konvertiert. " pushManager.subscribe " wird dann mit dem öffentlichen VAPID-Schlüssel und dem Wert " userVisible +" als Option aufgerufen. Weitere Informationen zu den verfügbaren Optionen finden Sie unter here.

Nach dem erfolgreichen Abonnieren eines Benutzers besteht der nächste Schritt darin, die Abonnementdaten an den Server zu senden. Die Daten werden an den Endpunkt "+ webpush / save_information " gesendet, der vom Paket " django-webpush " bereitgestellt wird. Fügen Sie den folgenden Code unter der Funktion " subscribe +" ein:

~ / djangopush / static / js / registerSw.js

...

const sendSubData = async (subscription) => {
   const browser = navigator.userAgent.match(/(firefox|msie|chrome|safari|trident)/ig)[0].toLowerCase();
   const data = {
       status_type: 'subscribe',
       subscription: subscription.toJSON(),
       browser: browser,
   };

   const res = await fetch('/webpush/save_information', {
       method: 'POST',
       body: JSON.stringify(data),
       headers: {
           'content-type': 'application/json'
       },
       credentials: "include"
   });

   handleResponse(res);
};

const handleResponse = (res) => {
   console.log(res.status);
};

registerSw();

Der Endpunkt "+ save_information " benötigt Informationen über den Status des Abonnements (" subscribe " und " unsubscribe "), die Abonnementdaten und den Browser. Schließlich rufen wir die Funktion " registerSw () +" auf, um den Vorgang des Abonnierens des Benutzers zu starten.

Die fertige Datei sieht folgendermaßen aus:

~ / djangopush / static / js / registerSw.js

const registerSw = async () => {
   if ('serviceWorker' in navigator) {
       const reg = await navigator.serviceWorker.register('sw.js');
       initialiseState(reg)

   } else {
       showNotAllowed("You can't send push notifications ☹️😢")
   }
};

const initialiseState = (reg) => {
   if (!reg.showNotification) {
       showNotAllowed('Showing notifications isn\'t supported ☹️😢');
       return
   }
   if (Notification.permission === 'denied') {
       showNotAllowed('You prevented us from showing notifications ☹️🤔');
       return
   }
   if (!'PushManager' in window) {
       showNotAllowed("Push isn't allowed in your browser 🤔");
       return
   }
   subscribe(reg);
}

const showNotAllowed = (message) => {
   const button = document.querySelector('form>button');
   button.innerHTML = `${message}`;
   button.setAttribute('disabled', 'true');
};

function urlB64ToUint8Array(base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4);
   const base64 = (base64String + padding)
       .replace(/\-/g, '+')
       .replace(/_/g, '/');

   const rawData = window.atob(base64);
   const outputArray = new Uint8Array(rawData.length);
   const outputData = outputArray.map((output, index) => rawData.charCodeAt(index));

   return outputData;
}

const subscribe = async (reg) => {
   const subscription = await reg.pushManager.getSubscription();
   if (subscription) {
       sendSubData(subscription);
       return;
   }

   const vapidMeta = document.querySelector('meta[name="vapid-key"]');
   const key = vapidMeta.content;
   const options = {
       userVisibleOnly: true,
       // if key exists, create applicationServerKey property
       ...(key && {applicationServerKey: urlB64ToUint8Array(key)})
   };

   const sub = await reg.pushManager.subscribe(options);
   sendSubData(sub)
};

const sendSubData = async (subscription) => {
   const browser = navigator.userAgent.match(/(firefox|msie|chrome|safari|trident)/ig)[0].toLowerCase();
   const data = {
       status_type: 'subscribe',
       subscription: subscription.toJSON(),
       browser: browser,
   };

   const res = await fetch('/webpush/save_information', {
       method: 'POST',
       body: JSON.stringify(data),
       headers: {
           'content-type': 'application/json'
       },
       credentials: "include"
   });

   handleResponse(res);
};

const handleResponse = (res) => {
   console.log(res.status);
};

registerSw();

Fügen Sie als nächstes ein "+ script" -Tag für die "+ register.js" -Datei in "+ home.html +" hinzu. Öffne die Datei:

nano ~/djangopush/templates/home.html

Fügen Sie das Tag "+ script" vor dem schließenden Tag des Elements "+ body" ein:

~ / djangopush / templates / home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  ...
</head>
<body>
  ...

</body>
</html>

Da es noch keinen Servicemitarbeiter gibt, wird eine Fehlermeldung angezeigt, wenn Sie Ihre Anwendung ausgeführt haben oder erneut versuchen, sie zu starten. Beheben wir dies, indem Sie einen Servicemitarbeiter erstellen.

Schritt 8 - Erstellen eines Service-Workers

Zum Anzeigen einer Push-Benachrichtigung muss ein aktiver Servicemitarbeiter auf der Startseite Ihrer Anwendung installiert sein. Wir erstellen einen Service-Worker, der auf "+ push +" - Ereignisse wartet und die Meldungen anzeigt, wenn sie fertig sind.

Da der Bereich des Service Workers die gesamte Domäne sein soll, muss er im Stammverzeichnis der Anwendung installiert werden. Weitere Informationen zum Vorgang finden Sie in diesem Artikel unter anweisung eines Servicemitarbeiters. Unser Ansatz ist es, eine "+ sw.js" -Datei im "+ templates" -Ordner zu erstellen, die wir dann als Ansicht registrieren.

Erstellen Sie die Datei:

nano ~/djangopush/templates/sw.js

Fügen Sie den folgenden Code hinzu, der den Service-Worker anweist, auf Push-Ereignisse zu warten:

~ / djangopush / templates / sw.js

// Register event listener for the 'push' event.
self.addEventListener('push', function (event) {
   // Retrieve the textual payload from event.data (a PushMessageData object).
   // Other formats are supported (ArrayBuffer, Blob, JSON), check out the documentation
   // on https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData.
   const eventInfo = event.data.text();
   const data = JSON.parse(eventInfo);
   const head = data.head || 'New Notification 🕺🕺';
   const body = data.body || 'This is default content. Your notification didn\'t have one 🙄🙄';

   // Keep the service worker alive until the notification is created.
   event.waitUntil(
       self.registration.showNotification(head, {
           body: body,
           icon: 'https://i.imgur.com/MZM3K5w.png'
       })
   );
});

Der Service-Mitarbeiter wartet auf ein Push-Ereignis. In der Rückruffunktion werden die Daten "+ event " in Text konvertiert. Wir verwenden die Standardzeichenfolgen " title " und " body ", wenn die Ereignisdaten diese nicht enthalten. Die Funktion " showNotification +" verwendet den Benachrichtigungstitel, den Header der anzuzeigenden Benachrichtigung und eine options. Objekt als Parameter. Das options-Objekt enthält mehrere Eigenschaften zum Konfigurieren der visuellen Optionen einer Benachrichtigung.

Damit Ihr Servicemitarbeiter für die gesamte Domain arbeiten kann, müssen Sie ihn im Stammverzeichnis der Anwendung installieren. Wir werden https://docs.djangoproject.com/de/2.1/topics/class-based-views/ [+ TemplateView +] verwenden, um dem Servicemitarbeiter den Zugriff auf die gesamte Domain zu ermöglichen.

Öffnen Sie die Datei + urls.py +:

nano ~/djangopush/djangopush/urls.py

Fügen Sie eine neue Importanweisung und einen neuen Pfad in die Liste "+ urlpatterns +" ein, um eine klassenbasierte Ansicht zu erstellen:

~ / djangopush / djangopush / urls.py

...


urlpatterns = [
                 ...

             ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Klassenbasierte Ansichten wie "+ TemplateView " ermöglichen es Ihnen, flexible, wiederverwendbare Ansichten zu erstellen. In diesem Fall erstellt die Methode " TemplateView.as_view " einen Pfad für den Servicemitarbeiter, indem der kürzlich erstellte Servicemitarbeiter als Vorlage und " application / x-javascript " als " content_type +" der Vorlage übergeben wird.

Sie haben jetzt einen Servicemitarbeiter erstellt und als Route registriert. Als Nächstes richten Sie das Formular auf der Homepage zum Senden von Push-Benachrichtigungen ein.

Schritt 9 - Senden von Push-Benachrichtigungen

Mithilfe des Formulars auf der Homepage sollten Benutzer Push-Benachrichtigungen senden können, während Ihr Server ausgeführt wird. Sie können Push-Benachrichtigungen auch über einen beliebigen REST-Dienst wie Postman senden. Wenn der Benutzer Push-Benachrichtigungen über das Formular auf der Homepage sendet, enthalten die Daten ein "+ head " und " body " sowie die " id +" des empfangenden Benutzers. Die Daten sollten folgendermaßen strukturiert sein:

{
   head: "Title of the notification",
   body: "Notification body",
   id: "User's id"
}

Um auf das Ereignis "+ submit " des Formulars zu warten und die vom Benutzer eingegebenen Daten an den Server zu senden, erstellen wir eine Datei mit dem Namen " site.js " im Verzeichnis " ~ / djangopush / static / js +".

Öffne die Datei:

nano ~/djangopush/static/js/site.js

Fügen Sie dem Formular zunächst einen Ereignis-Listener "+ submit " hinzu, mit dem Sie die Werte der Formulareingaben und die Benutzer-ID abrufen können, die im Tag " meta +" Ihrer Vorlage gespeichert sind:

~ / djangopush / static / js / site.js

const pushForm = document.getElementById('send-push__form');
const errorMsg = document.querySelector('.error');

pushForm.addEventListener('submit', async function (e) {
   e.preventDefault();
   const input = this[0];
   const textarea = this[1];
   const button = this[2];
   errorMsg.innerText = '';

   const head = input.value;
   const body = textarea.value;
   const meta = document.querySelector('meta[name="user_id"]');
   const id = meta ? meta.content : null;
   ...
   // TODO: make an AJAX request to send notification
});

Die Funktion "+ pushForm " ruft die Eingabe "", "+ textarea" und "+ button" im Formular ab. Außerdem werden die Informationen aus dem Tag "+ meta " abgerufen, einschließlich des Namensattributs " user_id " und der Benutzer-ID, die im Attribut " content " des Tags gespeichert ist. Mit diesen Informationen kann eine POST-Anforderung an den Endpunkt " / send_push +" auf dem Server gesendet werden.

Zum Senden von Anfragen an den Server verwenden wir die native Fetch -API. Wir verwenden hier Fetch, da es von den meisten Browsern unterstützt wird und keine externen Bibliotheken benötigt, um zu funktionieren. Aktualisieren Sie unter dem hinzugefügten Code die Funktion "+ pushForm +", um den Code für das Senden von AJAX-Anforderungen einzuschließen:

~ / djangopush / static / js / site.js

const pushForm = document.getElementById('send-push__form');
const errorMsg = document.querySelector('.error');

pushForm.addEventListener('submit', async function (e) {
    ...
   const id = meta ? meta.content : null;

    if (head && body && id) {
       button.innerText = 'Sending...';
       button.disabled = true;

       const res = await fetch('/send_push', {
           method: 'POST',
           body: JSON.stringify({head, body, id}),
           headers: {
               'content-type': 'application/json'
           }
       });
       if (res.status === 200) {
           button.innerText = 'Send another 😃!';
           button.disabled = false;
           input.value = '';
           textarea.value = '';
       } else {
           errorMsg.innerText = res.message;
           button.innerText = 'Something broke 😢..  Try again?';
           button.disabled = false;
       }
   }
   else {
       let error;
       if (!head || !body){
           error = 'Please ensure you complete the form 🙏🏾'
       }
       else if (!id){
           error = "Are you sure you're logged in? 🤔. Make sure! 👍🏼"
       }
       errorMsg.innerText = error;
   }
});

Wenn die drei erforderlichen Parameter "+ head ", " body " und " id +" vorhanden sind, senden wir die Anfrage und deaktivieren den Submit-Button vorübergehend.

Die fertige Datei sieht folgendermaßen aus:

~ / djangopush / static / js / site.js

const pushForm = document.getElementById('send-push__form');
const errorMsg = document.querySelector('.error');

pushForm.addEventListener('submit', async function (e) {
   e.preventDefault();
   const input = this[0];
   const textarea = this[1];
   const button = this[2];
   errorMsg.innerText = '';

   const head = input.value;
   const body = textarea.value;
   const meta = document.querySelector('meta[name="user_id"]');
   const id = meta ? meta.content : null;

   if (head && body && id) {
       button.innerText = 'Sending...';
       button.disabled = true;

       const res = await fetch('/send_push', {
           method: 'POST',
           body: JSON.stringify({head, body, id}),
           headers: {
               'content-type': 'application/json'
           }
       });
       if (res.status === 200) {
           button.innerText = 'Send another 😃!';
           button.disabled = false;
           input.value = '';
           textarea.value = '';
       } else {
           errorMsg.innerText = res.message;
           button.innerText = 'Something broke 😢..  Try again?';
           button.disabled = false;
       }
   }
   else {
       let error;
       if (!head || !body){
           error = 'Please ensure you complete the form 🙏🏾'
       }
       else if (!id){
           error = "Are you sure you're logged in? 🤔. Make sure! 👍🏼"
       }
       errorMsg.innerText = error;
   }
});

Fügen Sie abschließend die Datei "+ site.js" zu "+ home.html" hinzu:

nano ~/djangopush/templates/home.html

Füge das + script Tag hinzu:

~ / djangopush / templates / home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  ...
</head>
<body>
  ...

</body>
</html>

Wenn Sie Ihre Anwendung zum jetzigen Zeitpunkt laufen lassen oder erneut versuchen, sie zu starten, wird ein Fehler angezeigt, da Servicemitarbeiter nur in sicheren Domänen oder auf "+ localhost +" arbeiten können. Im nächsten Schritt erstellen wir mithilfe von ngrok einen sicheren Tunnel zu unserem Webserver.

Schritt 10 - Erstellen eines sicheren Tunnels zum Testen der Anwendung

Servicemitarbeiter benötigen sichere Verbindungen, um auf jedem Standort mit Ausnahme von "+ localhost +" zu funktionieren, da sie das Entführen von Verbindungen und das Filtern und Herstellen von Antworten ermöglichen können. Aus diesem Grund erstellen wir mit https://ngrok.com [ngrok] einen sicheren Tunnel für unseren Server.

Öffnen Sie ein zweites Terminalfenster und vergewissern Sie sich, dass Sie sich in Ihrem Home-Verzeichnis befinden:

cd ~

Wenn Sie unter den Voraussetzungen mit einem sauberen 18.04-Server begonnen haben, müssen Sie + unzip + installieren:

sudo apt update && sudo apt install unzip

Download ngrok:

wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
unzip ngrok-stable-linux-amd64.zip

Verschieben Sie + ngrok + nach + / usr / local / bin +, damit Sie vom Terminal aus auf den Befehl + ngrok + zugreifen können:

sudo mv ngrok /usr/local/bin

Stellen Sie in Ihrem ersten Terminalfenster sicher, dass Sie sich in Ihrem Projektverzeichnis befinden, und starten Sie Ihren Server:

cd ~/djangopush
python manage.py runserver :8000

Sie müssen dies tun, bevor Sie einen sicheren Tunnel für Ihre Anwendung erstellen.

Navigieren Sie in Ihrem zweiten Terminalfenster zu Ihrem Projektordner und aktivieren Sie Ihre virtuelle Umgebung:

cd ~/djangopush
source my_env/bin/activate

Erstellen Sie den sicheren Tunnel für Ihre Anwendung:

ngrok http :8000

Sie sehen die folgende Ausgabe, die Informationen zu Ihrer sicheren ngrok-URL enthält:

Outputngrok by @inconshreveable                                                                                                                       (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http:// -> 203.0.113.0:8000
Forwarding                    https:// -> 203.0.113.0:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                             0       0       0.00    0.00    0.00    0.00

Kopieren Sie das ++ von der Konsolenausgabe. Sie müssen es der Liste von "+ ALLOWED_HOSTS" in Ihrer "+ settings.py" -Datei hinzufügen.

Öffnen Sie ein anderes Terminalfenster, navigieren Sie zu Ihrem Projektordner und aktivieren Sie Ihre virtuelle Umgebung:

cd ~/djangopush
source my_env/bin/activate

Öffnen Sie die Datei + settings.py +:

nano ~/djangopush/djangopush/settings.py

Aktualisieren Sie die Liste von "+ ALLOWED_HOSTS +" mit dem sicheren ngrok-Tunnel:

~ / djangopush / djangopush / settings.py

...

ALLOWED_HOSTS = ['your_server_ip', '']
...

Navigieren Sie zur sicheren Admin-Seite, um sich anzumelden: + https: /// admin / +. Sie sehen einen Bildschirm, der so aussieht:

Bild: https://assets.digitalocean.com/articles/django_push_18_04/ngrok_login.png [ngrok admin login]

Geben Sie auf diesem Bildschirm die Benutzerdaten Ihres Django-Administrators ein. Dies sollten die gleichen Informationen sein, die Sie bei der Anmeldung in der Admin-Oberfläche unter https://www.digitalocean.com/community/tutorials/how-to-install-the-django-web-framework-on-ubuntu-18 eingegeben haben -04 # den-entwicklungsserver-testen [vorausgesetzte schritte]. Sie können jetzt Push-Benachrichtigungen senden.

Besuchen Sie "+ https: // +" in Ihrem Browser. Sie werden aufgefordert, die Berechtigung zum Anzeigen von Benachrichtigungen einzugeben. Klicken Sie auf die Schaltfläche * Zulassen *, damit Ihr Browser Push-Benachrichtigungen anzeigt:

image: https: //assets.digitalocean.com/articles/django_push_18_04/allow_push_two.png [Push-Benachrichtigung anfordern]

Beim Absenden eines ausgefüllten Formulars wird eine Benachrichtigung ähnlich der folgenden angezeigt:

image: https://assets.digitalocean.com/articles/django_push_18_04/web_push_final.png [Screenshot der Benachrichtigung]

Wenn Sie Benachrichtigungen erhalten haben, funktioniert Ihre Anwendung wie erwartet.

Sie haben eine Webanwendung erstellt, die Push-Benachrichtigungen auf dem Server auslöst und mithilfe von Servicemitarbeitern Benachrichtigungen empfängt und anzeigt. Sie haben auch die Schritte zum Abrufen der VAPID-Schlüssel durchlaufen, die zum Senden von Push-Benachrichtigungen von einem Anwendungsserver erforderlich sind.

Fazit

In diesem Lernprogramm erfahren Sie, wie Sie Benutzer mit der Benachrichtigungs-API für Push-Benachrichtigungen anmelden, Service-Mitarbeiter installieren und Push-Benachrichtigungen anzeigen.

Sie können noch weiter gehen, indem Sie die Benachrichtigungen so konfigurieren, dass beim Klicken bestimmte Bereiche Ihrer Anwendung geöffnet werden. Den Quellcode für dieses Tutorial finden Sie unter here.

Related