So konvertieren Sie WebApp als PWA mit Push-Benachrichtigung

In diesem Artikel erfahren Sie, wie Sie eine Webanwendung oder Website mit einer Push-Benachrichtigung mithilfe von Firebase Cloud Messaging in eine PWA konvertieren.

In der modernen Welt werden die meisten Webanwendungen in eine PWA (Progressive Web App) umgewandelt, weil sie Funktionen wie Offline-Unterstützung bietet, Push-Benachrichtigung, Hintergrundsynchronisation. PWA-Funktionen machen unsere Webanwendung eher zu einer nativen App und bieten eine reichhaltige Benutzererfahrung.

Beispielsweise haben großartige Unternehmen wie Twitter und Amazon ihre Web-App für mehr Benutzerinteraktion auf PWA umgestellt.

Was ist eine PWA?

PWA = (Web App) + (einige native App-Funktionen)

PWA ist dieselbe Web-App (HTML+CSS+JS). Es funktioniert genauso wie Ihre Web-App auf allen Browsern wie zuvor. Es kann jedoch native Funktionen haben, wenn Ihre Website in einem modernen Browser geladen wird. Es macht Ihre Web-App leistungsstärker als zuvor und auch skalierbarer, da wir Assets im Frontend vorab abrufen und zwischenspeichern können, wodurch Anfragen an Ihren Backend-Server reduziert werden.

Wie sich PWA von Web App unterscheidet

• Installierbar: Ihre Web-App kann wie eine native App installiert werden
• progressiv: Funktioniert genauso wie Ihre Web-App, jedoch mit einigen nativen Funktionen
• Native App-Erfahrung: Der Benutzer kann die Web-App nach der Installation wie eine native verwenden und darin navigieren.
• Leicht zugänglich: Im Gegensatz zu unserer Web-App müssen unsere Benutzer nicht bei jedem Besuch Webadressen eingeben. Einmal installiert, kann es mit einem einzigen Antippen geöffnet werden.
• Anwendungs-Caching: Vor PWA war der einzige Caching-Mechanismus, mit dem unsere Webanwendung implementiert wurde, die Verwendung des HTTP-Cache, der nur für den Browser verfügbar ist. Aber mit PWA können wir Dinge zwischenspeichern, indem wir clientseitigen Code selbst verwenden, der in einer Web-App nicht verfügbar ist.
• (App/Play)-Store-Veröffentlichung: PWA kann im Google Play Store und im IOS App Store veröffentlicht werden.

Durch die Konvertierung Ihrer Anwendung in PWA wird sie nur noch leistungsfähiger.

Warum Unternehmen PWA in Betracht ziehen sollten

Während die meisten unserer Kunden uns erreichen und darum bitten, zuerst die Web-App-Lösung zu entwickeln, fragen sie danach Android- und iOS-Apps. Alles, was wir tun werden, ist, die gleiche Funktionalität in der Web-App für die Android/IOS-App durch ein separates Team zu entwickeln, was mehr Entwicklungskosten und mehr Zeit bis zur Markteinführung erfordert.

Aber einige Kunden haben ein begrenztes Budget oder einige Kunden denken vielleicht, dass die Markteinführungszeit für ihr Produkt wichtiger ist.

Die meisten Kundenanforderungen können durch PWA-Funktionen selbst erfüllt werden. Für sie empfehlen wir nur PWA und geben ihnen eine Idee, ihre PWA mit TWA in eine Android-App umzuwandeln, wenn sie sie im Playstore bereitstellen möchten.

Wenn Ihre Anforderung wirklich native Anwendungsfunktionen erfordert, die von PWA nicht erfüllt werden können. Kunden können beide Anwendungen nach Belieben entwickeln. Aber auch in diesem Szenario. Sie können die PWA im Play Store bereitstellen, bis die Android-Entwicklung abgeschlossen ist.

Beispiel: Titan Eyeplus

Zunächst entwickelten sie eine PWA-App und stellten sie mithilfe von TWA (Trusted Web Activity) im Play Store bereit. Sobald sie ihre Android-Anwendungsentwicklung abgeschlossen haben. Sie stellten ihre echte Android-Anwendung im Play Store bereit. Sie erreichten sowohl die Time-to-Market mit PWA als auch die Entwicklungskosten.

PWA features

PWA verleiht unseren Webanwendungen native App-ähnliche Funktionen.

Die Hauptmerkmale sind:

• Installierbar: Eine Webanwendung, die wie eine native App installiert wird.
• Caching: Anwendungs-Caching ist möglich, wodurch unsere Anwendung offline unterstützt wird.
• Push-Benachrichtigung: Push-Benachrichtigungen können von unserem Server gesendet werden, um unsere Benutzer auf unsere Website aufmerksam zu machen.
• Geofencing: Die Anwendung kann durch ein Ereignis benachrichtigt werden, wenn sich der Gerätestandort ändert.
• Zahlungsaufforderung: Ermöglichen Sie die Zahlung in Ihrer Anwendung mit einer großartigen Benutzererfahrung wie bei einer nativen App.

Und viele weitere Funktionen werden in Zukunft folgen.

Weitere Merkmale sind:

• Verknüpfungen: Schnell zugängliche URLs, die in der Manifestdatei hinzugefügt wurden.
• Web Share API: Lassen Sie Ihre Anwendung freigegebene Daten von anderen Anwendungen empfangen.
• Abzeichen-API: Um die Anzahl der Benachrichtigungen in Ihrer installierten PWA anzuzeigen.
• Periodische Hintergrundsynchronisierungs-API: speichert die Daten Ihres Benutzers, bis er mit dem Netzwerk verbunden ist.
• Kontaktauswahl: Wird verwendet, um Kontakte vom Mobiltelefon des Benutzers auszuwählen.
• Dateiauswahl: Wird verwendet, um auf die Datei auf dem lokalen System/Mobilgerät zuzugreifen

Vorteil von PWA gegenüber nativer Anwendung

Die native App ist leistungsstärker als PWA und hat mehr Funktionen als PWA. Dennoch hat es einige Vorteile gegenüber der nativen App.

• PWA läuft plattformübergreifend wie Android, IOS, Desktop.
• Es reduziert Ihre Entwicklungskosten.
• Einfache Bereitstellung von Funktionen im Vergleich zu einer nativen App.
• Leicht auffindbar, da PWA (Website) SEO-freundlich ist
• Sicher, weil es nur funktioniert HTTPS

Nachteile von PWA gegenüber nativer App

• Im Vergleich zu einer nativen App stehen eingeschränkte Funktionalitäten zur Verfügung.
• Es wird nicht garantiert, dass PWA-Features alle Geräte unterstützen.
• Das Branding von PWA ist gering, da es nicht im App Store oder Play Store verfügbar ist.

Sie können Ihre PWA als Android-App im Play Store mit Android bereitstellen Vertrauenswürdige Webaktivität (TWA). Es wird Ihrem Branding helfen.

Dinge, die zum Konvertieren von Web-App in PWA erforderlich sind

Zum Konvertieren jeder Web-App oder Website in PWA.

• Service-Worker: der Kern jeder PWA-App für Caching, Push-Benachrichtigung, ein Proxy für unsere Anfragen.
• Manifestdatei: Sie enthält Details zu Ihrer Webanwendung. Früher wurde unsere Anwendung wie eine native App auf dem Startbildschirm heruntergeladen.
• App-Logo: Hochwertiges Bild 512 x 512 px für Ihr App-Icon. Für PWA benötigtes App-Logo auf dem Startbildschirm, Begrüßungsbildschirm usw. Wir müssen also mit beliebigen Tools einen Satz Bilder im Verhältnis 1: 1 für unsere APP erstellen.
• Responsive Design: Die Web-App sollte responsive sein, um auf verschiedenen Bildschirmgrößen zu funktionieren.

Was ist ein Servicemitarbeiter:

Ein Service Worker (clientseitiges Skript) ist ein Proxy zwischen Ihrer Web-APP und der Außenseite, der Push-Benachrichtigungen für unsere Web-App liefert und Caching unterstützt.

Service Worker läuft unabhängig vom Haupt-Javascript. Es hat also keinen Zugriff auf die DOM-API. Es kann nur zugreifen IndexedDB-API, Fetch API, Cache-Speicher-API. Aber es kann mit einer Nachricht mit dem Haupt-Thread kommunizieren.

Serviceleistung durch Servicemitarbeiter:

• Abfangen von HTTP-Anfragen von Ihrer Ursprungsdomäne.
• Erhalten Sie Push-Benachrichtigungen von Ihrem Server.
• Offline-Verfügbarkeit unserer Anwendung

Der Service Worker kontrolliert Ihre Anwendung und kann Ihre Anfragen bearbeiten, läuft aber unabhängig. Aus diesem Grund muss die Ursprungsdomäne mit HTTPS aktiviert werden, um einen Man-in-the-Middle-Angriff zu vermeiden.

What is the Manifest file

Eine Manifestdatei (manifest.json) enthält Details zu unserer PWA-App, um sie dem Browser mitzuteilen.

• name: Name der Anwendung
• short_name: Kurzname für unsere Anwendung. Falls vorgesehen
•  mit Eigenschaftsname und short_name nimmt der Browser short_name.
• Beschreibung: Beschreibung zur Beschreibung unserer Anwendung.
• start_url: Um die Homepage der Anwendung anzugeben, als unsere PWA gestartet wurde.
• Symbole: Bildsatz für PWA für den Startbildschirm usw.
• background_color: Zum Festlegen der Hintergrundfarbe des Begrüßungsbildschirms in unserer PWA-Anwendung.
• Anzeige: Zum Anpassen unserer Browser-Benutzeroberfläche für die Anzeige in unserer PWA-App.
• theme_color: Designfarbe der PWA-App.
• Bereich: URL-Bereich unserer Anwendung, der für PWA berücksichtigt werden soll. Standardmäßig der Speicherort der gefundenen Manifestdatei.
• Verknüpfungen: Quick-Links für unsere PWA-Anwendung.

Convert Web App to PWA

Zu Demonstrationszwecken habe ich eine Geekflare-Website-Ordnerstruktur mit statischen Dateien erstellt.

• index.html – Homepage
• Artikel/
  • index.html – Artikelseite
• Autoren/
  • index.html – Autorenseite
• Werkzeug/
  • index.html – Werkzeugseite
• Angebote/
  • index.html – Angebotsseite

Wenn Sie bereits eine Website oder Web-App haben, versuchen Sie, sie in PWA umzuwandeln, indem Sie die folgenden Schritte ausführen.

Erstellen Sie erforderliche Images für PWA

Nehmen Sie zunächst Ihr App-Logo und schneiden Sie es im Verhältnis 1:1 in 5 verschiedenen Größen zu. Ich habe benutzt https://tools.crawlink.com/tools/pwa-icon-generator/ um schnell unterschiedliche Bildgrößen zu erhalten. Du kannst es also auch verwenden.

Erstellen Sie eine Manifestdatei

Zweitens erstellen Sie eine manifest.json-Datei für Ihre Webanwendung mit Ihren App-Details. Für die Demo habe ich eine Manifestdatei für die Geekflare-Website erstellt.

{ "name": "Geekflare", "short_name": "Geekflare", "description": "Geekflare produziert hochwertige Technologie- und Finanzartikel, erstellt Tools und APIs, um Unternehmen und Menschen beim Wachstum zu unterstützen.", "start_url": "/", "icons": [{ "src": "assets/icon/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icon/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icon/icon-192x192.png", "sizes ": "192x192", "type": "image/png" }, { "src": "assets/icon/icon-384x384.png", "sizes": "384x384", "type": "image/png " }, { "src": "assets/icon/icon-512x512.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#EDF2F4", " display": "standalone", "theme_color": "#B20422", "scope": "/", "shortcuts": [{ "name": "Articles", "short_name": "Articles", "description": "1595 Artikel zu Sicherheit, Sysadmin, Digital Marketing, Cloud Computing, Entwicklung und vielen anderen Themen.", "url": "/articles", "icons": [{ "src": "/assets/icon/icon- 152x152.png", "Größe s": "152x152" }] }, { "name": "Autoren", "short_name": "Autoren", "description": "Geekflare - Autoren", "url": "/authors", "icons": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] }, { "name": "Tools", "short_name": "Tools", "description" : "Geekflare - Tools", "url": "/tools", "icons": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] }, { "name": "Deals", "short_name": "Deals", "description": "Geekflare - Deals", "url": "/deals", "icons": [{ "src": "/assets/ icon/icon-152x152.png", "Größen": "152x152" }] } ] }

Registrieren Sie den Service-Mitarbeiter

Erstellen Sie eine Skriptdatei register-service-worker.js und service-worker.js im Stammordner.

Die erste, register-service-worker.js, ist die Javascript-Datei, die auf dem Hauptthread ausgeführt wird, der auf die DOM-API zugreifen kann. Aber service-worker.js ist ein Service-Worker-Skript, das unabhängig vom Haupt-Thread läuft und dessen Lebensdauer ebenfalls kurz ist. Es wird ausgeführt, wenn Ereignisse Servicemitarbeiter anrufen, und wird ausgeführt, bis der Prozess abgeschlossen ist.

Indem Sie die Haupt-Thread-Javascript-Datei überprüfen, können Sie überprüfen, ob der Dienstmitarbeiter darin registriert ist. Wenn nicht, können Sie das Service-Worker-Skript (service-worker.js) registrieren.

Fügen Sie das folgende Snippet in register-service-worker.js ein:

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); }

Fügen Sie das folgende Snippet in service-worker.js ein

self.addEventListener('install', (event) => { // Ereignis, wenn der Servicemitarbeiter installiert wird console.log( 'install', event); self.skipWaiting(); }); self.addEventListener('activate', (event) => { // Ereignis, wenn der Service Worker aktiviert wurde console.log('activate', event); return self.clients.claim(); }); self.addEventListener('fetch', function(event) { // HTTP-Request-Interceptor event.respondWith(fetch(event.request)); // sende alle HTTP-Requests ohne Cache-Logik /*event.respondWith( caches.match( event.request)

Wir haben uns nicht darauf konzentriert, wie der Cache für die Offline-Unterstützung aktiviert wird. Wir sprechen nur darüber, wie man Web-Apps in PWA konvertiert.

Fügen Sie die Manifestdatei und das Skript im all head-Tag Ihrer HTML-Seite hinzu.

Aktualisieren Sie die Seite nach dem Hinzufügen. Jetzt können Sie Ihre Anwendung wie unten auf Mobile Chrome installieren.

Auf dem Startbildschirm wird die App hinzugefügt.

Wenn Sie WordPress verwenden. Versuchen Sie, das vorhandene PWA-Konverter-Plugin zu verwenden. Für vueJS oder respondJS können Sie der obigen Methode folgen oder die vorhandenen PWA-npm-Module verwenden, um Ihre Entwicklung zu beschleunigen. Da PWA-npm-Module bereits mit Offline-Support-Caching usw. aktiviert sind.

Enable Push Notification

Web-Push-Benachrichtigungen werden an den Browser gesendet, damit unsere Benutzer häufiger mit unserer Anwendung interagieren/interagieren. Wir können es aktivieren, indem wir verwenden

• Mitteilung API: Es wird verwendet, um zu konfigurieren, wie unsere Push-Benachrichtigung dem Benutzer angezeigt werden soll.
• Push-API: Wird verwendet, um Benachrichtigungen zu erhalten, die von unserem Server an den Browser gesendet werden.

Der erste Schritt zum Aktivieren von Push-Benachrichtigungen in unserer Anwendung besteht darin, die Benachrichtigungs-API zu überprüfen und vom Benutzer die Erlaubnis zum Anzeigen einer Benachrichtigung zu erhalten. Kopieren Sie dazu das unten stehende Snippet und fügen Sie es in Ihre register-service-worker.js ein.

if ('Notification' in window && Notification.permission != 'granted') { console.log('Benutzer um Erlaubnis fragen') Notification.requestPermission(status => { console.log('Status:'+status) displayNotification(' Benachrichtigung aktiviert'); }); } const displayNotification = notificationTitle => { console.log('Benachrichtigung anzeigen') if (Notification.permission == 'granted') { navigator.serviceWorker.getRegistration().then(reg => { console.log(reg) const options = { body: 'Danke, dass Sie Push-Benachrichtigungen zulassen !', icon: '/assets/icons/icon-512x512.png', vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: 0 } };reg.showNotification(notificationTitle, options); }); } };

Wenn alles richtig gelaufen ist. Sie erhalten eine Benachrichtigung von der Anwendung.

'Benachrichtigung' im Fenster teilt uns mit, dass die Benachrichtigungs-API in diesem Browser unterstützt wird. Benachrichtigungsberechtigung teilt mit, dass der Benutzer berechtigt ist, die Benachrichtigung anzuzeigen. Wenn der Benutzer unserer Anwendung zugestimmt hat, wird der Wert „gewährt“. Wenn der Benutzer abgelehnt hat, wird der Wert "gesperrt".

Enable Firebase Cloud Messaging and Create Subscription

Jetzt beginnt der eigentliche Teil. Um Benachrichtigungen von Ihrem Server an den Benutzer zu senden, benötigen wir für jeden Benutzer einen eindeutigen Endpunkt/ein eindeutiges Abonnement. Dafür werden wir Firebase Cloud Messaging verwenden.

Erstellen Sie als ersten Schritt ein Firebase-Konto, indem Sie diesen Link besuchen https://firebase.google.com/ und drücken Sie auf „Starten“.

1. Erstellen Sie ein neues Projekt mit einem Namen und klicken Sie auf Weiter. Ich werde es mit dem Namen Geekflare erstellen.
2. Im nächsten Schritt ist Google Analytics standardmäßig aktiviert. Sie können umschalten, dass wir das jetzt nicht brauchen, und auf Weiter klicken. Sie können es bei Bedarf später in Ihrer Firebase-Konsole aktivieren.
3. Sobald das Projekt erstellt wurde, sieht es wie folgt aus.

Gehen Sie dann zu den Projekteinstellungen und klicken Sie auf Cloud-Messaging und generieren Sie Schlüssel.

Aus den obigen Schritten haben Sie 3 Schlüssel erhalten.

• Projektserverschlüssel
• Privater Schlüssel für Web-Push-Zertifikate
• Public-Key von Web-Push-Zertifikaten

Fügen Sie nun das folgende Snippet in register-service-worker.js ein:

const updateSubscriptionOnYourServer = Abonnement => { console.log('Schreiben Sie hier Ihren Ajax-Code, um das Benutzerabonnement in Ihrer Datenbank zu speichern', Abonnement); // Schreiben Sie Ihre eigene Ajax-Anforderungsmethode mit fetch, jquery, axios, um das Abonnement zur späteren Verwendung auf Ihrem Server zu speichern. }; constscribeUser = async () => {const swRegistration = await navigator.serviceWorker.getRegistration(); const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // fügen Sie den öffentlichen Schlüssel Ihres Webpush-Zertifikats ein const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }) .then((subscription) => { console.log('Benutzer wird neu abonniert:', Abonnement); updateSubscriptionOnServer(subscription); }) .catch((err ) => { if (Notification.permission === 'denied') { console.warn('Berechtigung für Benachrichtigungen wurde verweigert') } else { console.error('Fehler beim Abonnieren des Benutzers: ', err) } }) ; }; const 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); for (let i = 0; i < rawData.length; ++i) {outputArray[i] = rawData.charCodeAt(i); } AusgabeArray zurückgeben; }; const checkSubscription = async () => { const swRegistration = await navigator.serviceWorker.getRegistration(); swRegistration.pushManager.getSubscription() .then(subscription => { if (!!subscription) { console.log('Benutzer IST bereits angemeldet.'); updateSubscriptionOnYourServer(subscription); } else { console.log('Benutzer ist NICHT abonniert. Benutzer neu abonnieren');scribeUser(); } }); }; checkSubscription();

Fügen Sie das folgende Snippet in service-worker.js ein.

self.addEventListener('push', (event) => { const json = JSON.parse(event.data.text()) console.log('Push Data', event.data.text()) self.registration. showNotification(json.header, json.options) });

Jetzt alles im Frontend eingestellt. Durch die Verwendung des Abonnements können Sie Push-Benachrichtigungen an Ihre Benutzer senden, wann immer Sie möchten, bis ihnen die Push-Dienste nicht verweigert wurden.

Push vom node.js-Backend

Sie können die Verwendung Web-Push npm-Modul, um es einfacher zu machen.

Beispiel-Snippet zum Senden einer Push-Benachrichtigung vom nodeJS-Server.

const webPush = require('web-push'); // pushSubscription ist nichts anderes als ein Abonnement, das Sie von Ihrem Frontend gesendet haben, um es in DB zu speichern const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj -uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}; // Ihr Web-Zertifikat Public-Key const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // Ihr privater Schlüssel des Webzertifikats const vapidPrivateKey = 'privater Schlüssel des Webzertifikats'; var payload = JSON.stringify({ "options": { "body": "PWA-Push-Benachrichtigungstest vom Backend", "badge": "/assets/icon/icon-152x152.png", "icon": "/assets /icon/icon-152x152.png", "vibrieren": [100, 50, 100], "data": { "id": "458", }, "actions": [{ "action": "view" , "title": "View" }, { "action": "close", "title": "Close" }] }, "header": "Notification from Geekflare-PWA Demo" }); var options = { vapidDetails: { subject: 'mailto:your-actual-mail@gmail.com', publicKey: vapidPublicKey, privateKey: vapidPrivateKey }, TTL: 60 }; webPush.sendNotification( pushSubscription, payload, options ).then(data => { return res.json({status : true, message : 'Notification sent'}); }).catch(err => { return res.json( {Status: falsch, Nachricht: Fehler }); });

Der obige Code sendet eine Push-Benachrichtigung an das Abonnement. Das Push-Ereignis im Service-Worker wird ausgelöst.

Push vom PHP-Backend

Für das PHP-Backend können Sie die web-push-php Composer-Paket. Überprüfen Sie den Beispielcode unten, um Push-Benachrichtigungen zu senden.

array ( 'body' => 'PWA-Push-Benachrichtigungstest vom Backend', 'badge' => '/assets/icon/icon-2x2.png', 'icon' => '/assets/icon/icon-0x8.png ', 'vibrieren' => Array ( 8 => 2, 7 => 9, 88 => 6, ), 'data' => Array ( 'id' => '5', ), 'actions' => Array ( 41 => Array ( 'action' => 'view', 'title' => 'View', ), 3 => array ( 'action' => 'close', 'title' => 'Close', ) , ), ), 'header' => 'Benachrichtigung von der Geekflare-PWA-Demo', ); // auth $auth = [ 'GCM' => 'your project private-key', // veraltet und optional, hier nur aus Kompatibilitätsgründen 'VAPID' => [ 'subject' => 'mailto:your-actual- mail@gmail.com', // kann ein mailto: oder Ihre Website-Adresse sein 'publicKey' => 'BOcTIipY8N256Y0Y-8r1NMoJHofmCzn0Pu5g-LMsgIMGH4HVr3_LW7ia152lMr152TsTLKS152UcdkE152IcC0hJDYsY', // (empfohlen) unkomprimierter öffentlicher Schlüssel P-100 codiert in Base1-URL => 'your web-certificate private-key', // (empfohlen) eigentlich der geheime Multiplikator des in Base50-URL kodierten privaten Schlüssels ], ]; $webPush = new WebPush($auth); $subsrciptionData = json_decode($subsrciptionJson,true); // webpush 2 $webPush->sendOneNotification( Subscription::create($subsrciptionData), json_encode($payloadData) // optional (Standardwert null) );

Fazit

Ich hoffe, dies gibt Ihnen eine Vorstellung davon, wie Sie Webanwendungen in PWA konvertieren können. Sie können den Quellcode dieses Artikels überprüfen hier und demonstrieren Sie es hier. Ich habe die Push-Benachrichtigung getestet, indem ich sie auch mit Hilfe von Beispielcode vom Backend gesendet habe.