So konvertieren Sie WebApp als PWA mit Push-Benachrichtigung

von

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, da sie Funktionen wie Offline-Unterstützung, Push-Benachrichtigungen und Hintergrundsynchronisierung bietet. 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 App 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 von 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.
  • Veröffentlichung im (App/Play) Store: 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 dann nach 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 schlagen wir nur PWA vor 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-Funktionen

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.
  • Zahlungsanforderung: 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
  Wann wird Discovery Plus für PS4 verfügbar sein?

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 auf HTTPS funktioniert

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, Startbildschirm 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, API abrufen, 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.

Was ist die Manifest-Datei

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.

Konvertieren Sie Web-App in PWA

Zu Demonstrationszwecken habe ich eine wdzwdz-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 wdzwdz-Website erstellt.

{
	"name": "wdzwdz",
	"short_name": "wdzwdz",
	"description": "wdzwdz produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people grow.",
	"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 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
			"url": "https://geekflare.com/articles",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Authors",
			"short_name": "Authors",
			"description": "wdzwdz - Authors",
			"url": "/authors",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Tools",
			"short_name": "Tools",
			"description": "wdzwdz - Tools",
			"url": "https://wdzwdz.com/tools",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Deals",
			"short_name": "Deals",
			"description": "wdzwdz - Deals",
			"url": "/deals",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		}
	]
}

Registrieren Sie den Service-Mitarbeiter

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

  Finden Sie Spoiler für einen Film, den Sie sehen möchten

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) => { // event when service worker install
    console.log( 'install', event);
    self.skipWaiting();
});

self.addEventListener('activate', (event) => { // event when service worker activated
    console.log('activate', event);
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) { // HTTP request interceptor
    event.respondWith(fetch(event.request)); // send all http request without any cache logic
    /*event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event. request);
        })
    );*/ // cache new request. if already in cache serves with the cache.
});

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.

<link rel="manifest" href="https://wdzwdz.com/manifest.json">
<script src="/register-service-worker.js"></script>

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.

Push-Benachrichtigung aktivieren

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

  • Benachrichtigungs-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('Ask user permission')
    Notification.requestPermission(status => {  
        console.log('Status:'+status)
        displayNotification('Notification Enabled');
    });
}


const displayNotification = notificationTitle => {
    console.log('display notification')
    if (Notification.permission == 'granted') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            const options = {
                    body: 'Thanks for allowing push notification !',
                    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. Notification.permission 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“.

Aktivieren Sie Firebase Cloud Messaging und erstellen Sie ein Abonnement

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“.

  • Erstellen Sie ein neues Projekt mit einem Namen und klicken Sie auf Weiter. Ich werde es mit dem Namen wdzwdz erstellen.
  • 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.
  • Sobald das Projekt erstellt wurde, sieht es wie folgt aus.
    •   Spioniert Ihr Antivirus Sie wirklich 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 = subscription => {
    console.log('Write your ajax code here to save the user subscription in your DB', subscription);
    // write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
};

const subscribeUser = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    })
    .then((subscription) => {
        console.log('User is subscribed newly:', subscription);
        updateSubscriptionOnServer(subscription);
    })
    .catch((err) => {
        if (Notification.permission === 'denied') {
          console.warn('Permission for notifications was denied')
        } else {
          console.error('Failed to subscribe the user: ', 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);
    }
    return outputArray;
};

const checkSubscription = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    swRegistration.pushManager.getSubscription()
    .then(subscription => {
        if (!!subscription) {
            console.log('User IS Already subscribed.');
            updateSubscriptionOnYourServer(subscription);
        } else {
            console.log('User is NOT subscribed. Subscribe user newly');
            subscribeUser();
        }
    });
};

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

    Du kannst den … benutzen 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 is nothing but subscription that you sent from your front-end to save it in DB
    const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    //your web certificates public-key
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //your web certificates private-key
    const vapidPrivateKey = 'web-certificate private key';

    var payload = JSON.stringify({
      "options": {
        "body": "PWA push notification testing fom backend",
        "badge": "/assets/icon/icon-152x152.png",
        "icon": "/assets/icon/icon-152x152.png",
        "vibrate": [100, 50, 100],
        "data": {
          "id": "458",
        },
        "actions": [{
          "action": "view",
          "title": "View"
        }, {
          "action": "close",
          "title": "Close"
        }]
      },
      "header": "Notification from wdzwdz-PWA Demo"
    });

    var options = {
      vapidDetails: {
        subject: 'mailto:[email protected]',
        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 : false, message : err });
    });

    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.

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

require __DIR__.'/../vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;

// subscription stored in DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = array (
'options' =>  array (
                'body' => 'PWA push notification testing fom backend',
                'badge' => '/assets/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'vibrate' => 
                array (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'data' => 
                array (
                  'id' => '458',
                ),
                'actions' => 
                array (
                  0 => 
                  array (
                    'action' => 'view',
                    'title' => 'View',
                  ),
                  1 => 
                  array (
                    'action' => 'close',
                    'title' => 'Close',
                  ),
                ),
),
'header' => 'Notification from wdzwdz-PWA Demo',
);

// auth
$auth = [
    'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
    'VAPID' => [
        'subject' => 'mailto:[email protected]', // can be a mailto: or your website address
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
        'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
    ],
];

$webPush = new WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// webpush 6.0
$webPush->sendOneNotification(
  Subscription::create($subsrciptionData),
  json_encode($payloadData) // optional (defaults 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.