In diesem Beitrag erfahren Sie, wie Sie eine Webanwendung oder Website in eine Progressive Web App (PWA) umwandeln können, wobei Firebase Cloud Messaging für Push-Benachrichtigungen genutzt wird.
Heutzutage werden viele Webanwendungen zu PWAs, da diese Funktionen wie Offline-Funktionalität, Push-Benachrichtigungen und Hintergrundsynchronisation bieten. Diese Eigenschaften machen eine Webanwendung eher zu einer nativen App und verbessern die Benutzererfahrung erheblich.
Bekannte Firmen wie Twitter und Amazon haben ihre Web-Apps in PWAs transformiert, um die Interaktion mit ihren Nutzern zu erhöhen.
Was genau ist eine PWA?
PWA = (Webanwendung) + (einige Funktionen nativer Apps)
Eine PWA ist im Grunde eine Webanwendung (HTML, CSS und JavaScript), die wie Ihre herkömmliche Webanwendung in jedem Browser funktioniert. Jedoch hat sie, wenn sie in einem aktuellen Browser aufgerufen wird, zusätzlich native Funktionen. Dies macht Ihre Web-App leistungsfähiger und besser skalierbar, da Ressourcen bereits im Frontend geladen und zwischengespeichert werden können. Dadurch reduziert sich die Anzahl der Anfragen an den Backend-Server.
Worin unterscheidet sich eine PWA von einer herkömmlichen Webanwendung?
- Installierbar: Eine PWA kann wie eine native App auf dem Gerät des Benutzers installiert werden.
- Progressiv: Sie funktioniert wie eine normale Webanwendung, bietet jedoch zusätzliche native Funktionen.
- Native App-Erfahrung: Nach der Installation kann der Benutzer die PWA wie eine native App verwenden und darin navigieren.
- Leichter Zugriff: Im Gegensatz zu einer normalen Web-App muss der Benutzer keine Webadresse bei jedem Besuch eingeben. Nach der Installation ist die PWA mit einem einzigen Klick zugänglich.
- Anwendungs-Caching: Vor PWAs war der Browser-Cache der einzige Caching-Mechanismus. Mit PWAs können wir jedoch clientseitigen Code verwenden, um Assets zwischenzuspeichern, was bei einer herkömmlichen Webanwendung nicht möglich ist.
- Veröffentlichung in App Stores: PWAs können sowohl im Google Play Store als auch im iOS App Store angeboten werden.
Durch die Umwandlung Ihrer Anwendung in eine PWA wird diese deutlich leistungsfähiger.
Warum sollten Unternehmen PWAs in Betracht ziehen?
Oftmals möchten Kunden zunächst eine Web-App entwickeln lassen und fragen dann nach Apps für Android und iOS. Dies führt dazu, dass die gleichen Funktionen der Web-App von separaten Teams für Android und iOS entwickelt werden müssen, was höhere Entwicklungskosten und längere Markteinführungszeiten zur Folge hat.
Einige Kunden haben ein begrenztes Budget, während für andere die schnelle Markteinführung ihres Produkts Priorität hat.
Viele der Kundenanforderungen können bereits durch die Funktionen einer PWA erfüllt werden. In solchen Fällen schlagen wir PWAs vor und empfehlen, sie mit Trusted Web Activity (TWA) in Android-Apps umzuwandeln, wenn sie im Play Store veröffentlicht werden sollen.
Sollten wirklich native App-Funktionen benötigt werden, die PWAs nicht bieten können, können Kunden natürlich auch beide Arten von Anwendungen entwickeln. Selbst in diesem Szenario kann die PWA im Play Store angeboten werden, bis die native Android-App fertig ist.
Ein Beispiel hierfür ist Titan Eyeplus:
Zuerst entwickelten sie eine PWA und veröffentlichten sie über TWA im Play Store. Nach Abschluss der Entwicklung der nativen Android-App wurde diese im Play Store veröffentlicht. So erreichten sie sowohl eine schnelle Markteinführung mit der PWA als auch reduzierten die Entwicklungskosten.
PWA-Funktionen
PWAs erweitern Webanwendungen um nativ-ähnliche App-Funktionen.
Die wichtigsten Merkmale sind:
- Installierbar: Die Webanwendung kann wie eine native App installiert werden.
- Caching: Anwendungs-Caching ermöglicht Offline-Fähigkeit.
- Push-Benachrichtigungen: Server können Push-Benachrichtigungen senden, um Benutzer auf neue Inhalte aufmerksam zu machen.
- Geofencing: Die App kann auf Standortänderungen des Geräts reagieren.
- Zahlungsanfragen: Ermöglichen Sie Zahlungen direkt in der App mit einer benutzerfreundlichen Erfahrung wie bei nativen Apps.
Weitere Funktionen werden in Zukunft hinzukommen.
Andere Funktionen umfassen:
- Verknüpfungen: Schnellzugriffs-URLs, die in der Manifestdatei definiert sind.
- Web Share API: Ermöglicht die App, Daten von anderen Anwendungen zu empfangen.
- Badge API: Zeigt die Anzahl der Benachrichtigungen in der installierten PWA an.
- Periodische Hintergrundsynchronisation API: Speichert Daten, bis eine Netzwerkverbindung besteht.
- Kontaktauswahl: Ermöglicht das Auswählen von Kontakten vom Mobilgerät des Nutzers.
- Dateiauswahl: Ermöglicht den Zugriff auf lokale Dateien.
Vorteile von PWAs gegenüber nativen Anwendungen
Native Apps bieten zwar eine höhere Leistung und mehr Funktionen als PWAs, dennoch gibt es einige Vorteile von PWAs:
- PWAs funktionieren plattformübergreifend (Android, iOS, Desktop).
- Sie reduzieren die Entwicklungskosten.
- Funktionen lassen sich einfacher bereitstellen als bei nativen Apps.
- Sie sind leicht auffindbar, da PWAs (Websites) SEO-freundlich sind.
- PWAs sind sicher, da sie nur über HTTPS funktionieren.
Nachteile von PWAs gegenüber nativen Apps
- Im Vergleich zu nativen Apps sind die Funktionen eingeschränkt.
- Es ist nicht sichergestellt, dass alle PWA-Funktionen von jedem Gerät unterstützt werden.
- Die Markenpräsenz ist geringer, da PWAs nicht direkt in App-Stores verfügbar sind.
Sie können Ihre PWA als Android-App im Play Store über Trusted Web Activity (TWA) veröffentlichen. Dies hilft bei der Markenpräsenz.
Was ist notwendig, um eine Web-App in eine PWA umzuwandeln?
Um eine Webanwendung oder Website in eine PWA zu konvertieren, sind folgende Komponenten erforderlich:
- Service Worker: Das Herzstück jeder PWA für Caching, Push-Benachrichtigungen und als Proxy für Anfragen.
- Manifestdatei: Enthält Details über die Webanwendung. Diese ermöglicht es, die Anwendung wie eine native App auf dem Startbildschirm zu installieren.
- App-Logo: Ein hochqualitatives Bild (512 x 512 px) für das App-Icon, das für den Startbildschirm und andere Zwecke benötigt wird. Es sollten verschiedene Bildgrößen mit einem Seitenverhältnis von 1:1 erstellt werden.
- Responsive Design: Die Webanwendung sollte auf verschiedenen Bildschirmgrößen korrekt angezeigt werden.
Was ist ein Service Worker?
Ein Service Worker (clientseitiges Skript) fungiert als Proxy zwischen Ihrer Web-App und dem Internet und ermöglicht Push-Benachrichtigungen und Caching.
Service Worker laufen unabhängig vom Haupt-JavaScript und haben daher keinen Zugriff auf die DOM-API. Sie können nur auf IndexedDB-API, Fetch API und Cache Storage API zugreifen, können aber über Nachrichten mit dem Haupt-Thread kommunizieren.
Dienste, die von einem Service Worker bereitgestellt werden:
- Abfangen von HTTP-Anfragen der eigenen Domain.
- Empfangen von Push-Benachrichtigungen vom Server.
- Ermöglichen der Offline-Verfügbarkeit der Anwendung.
Der Service Worker kontrolliert die App und kann Anfragen bearbeiten, läuft aber unabhängig. Daher muss die Ursprungsdomain über HTTPS verfügbar sein, um Man-in-the-Middle-Angriffe zu verhindern.
Was ist die Manifestdatei?
Eine Manifestdatei (manifest.json) enthält Details über die PWA und informiert den Browser über diese.
- name: Name der App.
- short_name: Kurzer Name für die App. Falls vorhanden, verwendet der Browser statt dem Namen den Kurznamen.
- description: Beschreibung der Anwendung.
- start_url: Die Startseite der App, wenn die PWA gestartet wird.
- icons: Verschiedene Bildgrößen für PWA-Symbole auf dem Startbildschirm usw.
- background_color: Legt die Hintergrundfarbe des Begrüßungsbildschirms der PWA fest.
- display: Definiert die Darstellung der Browser-UI für die PWA.
- theme_color: Die Designfarbe der PWA-App.
- scope: URL-Bereich der App, der für die PWA gilt. Standardmäßig ist dies der Ort, an dem die Manifestdatei gefunden wurde.
- shortcuts: Schnellzugriffslinks für die PWA.
Konvertieren einer Web-App in eine PWA
Für Demonstrationszwecke wurde eine Ordnerstruktur mit statischen Dateien erstellt, die eine Website darstellen soll.
- index.html – Startseite
- 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, können Sie versuchen, diese mithilfe der folgenden Schritte in eine PWA umzuwandeln.
Erstellen Sie benötigte Bilder für die PWA
Zunächst sollten Sie Ihr App-Logo in 5 verschiedenen Größen mit einem Seitenverhältnis von 1:1 zuschneiden. Es gibt Tools, wie https://tools.crawlink.com/tools/pwa-icon-generator/, die diese Aufgabe beschleunigen.
Erstellen Sie eine Manifestdatei
Erstellen Sie zweitens eine `manifest.json`-Datei für Ihre Webanwendung mit den Details Ihrer App. Für das Beispiel wurde eine Manifestdatei 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 des Service Workers
Erstellen Sie Skriptdateien namens `register-service-worker.js` und `service-worker.js` im Stammverzeichnis.
Die Datei `register-service-worker.js` ist ein Javascript-Code, der im Haupt-Thread läuft und somit auf die DOM-API zugreifen kann. Die Datei `service-worker.js` hingegen ist ein Service-Worker-Skript, das unabhängig vom Haupt-Thread läuft und eine kurze Lebensdauer hat. Es wird ausgeführt, wenn Ereignisse den Service Worker aufrufen und endet, wenn der Prozess abgeschlossen ist.
Überprüfen Sie in der Javascript-Datei des Haupt-Threads, ob ein Service Worker registriert ist. Falls nicht, können Sie das Service-Worker-Skript (service-worker.js) registrieren.
Fügen Sie folgendes Snippet in die Datei `register-service-worker.js` ein:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
Fügen Sie folgendes Snippet in die Datei `service-worker.js` ein:
self.addEventListener('install', (event) => {
console.log( 'install', event);
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
console.log('activate', event);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request));
/*event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event. request);
})
);*/
});
Das Caching für Offline-Unterstützung wurde hier noch nicht berücksichtigt. Es wird lediglich gezeigt, wie eine Web-App in eine PWA konvertiert wird.
Fügen Sie die Manifestdatei und das Skript im `head`-Tag Ihrer HTML-Seite ein.
<link rel="manifest" href="https://wdzwdz.com/manifest.json"> <script src="/register-service-worker.js"></script>
Nach dem Hinzufügen aktualisieren Sie die Seite. Nun können Sie Ihre Anwendung wie unten im Chrome-Browser installieren.
Die App wird dem Startbildschirm hinzugefügt.
Wenn Sie WordPress verwenden, sollten Sie bestehende PWA-Konverter-Plugins in Betracht ziehen. Für VueJS oder ReactJS können Sie entweder der obigen Methode folgen oder PWA-npm-Module verwenden, um die Entwicklung zu beschleunigen, da diese in der Regel bereits mit Caching für Offline-Support konfiguriert sind.
Aktivieren von Push-Benachrichtigungen
Web-Push-Benachrichtigungen werden an den Browser gesendet, damit Benutzer häufiger mit der Anwendung interagieren. Dies wird über folgende APIs ermöglicht:
- Notification API: Damit kann konfiguriert werden, wie die Push-Benachrichtigung dem Benutzer angezeigt werden soll.
- Push API: Wird zum Empfangen von Benachrichtigungen verwendet, die vom Server an den Browser gesendet werden.
Der erste Schritt zur Aktivierung von Push-Benachrichtigungen besteht darin, die Notification API zu überprüfen und die Erlaubnis des Nutzers zum Anzeigen von Benachrichtigungen einzuholen. Kopieren Sie dazu das folgende Snippet und fügen Sie es in `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 konfiguriert ist, erhalten Sie eine Benachrichtigung von der Anwendung.
Die Überprüfung von `’Notification‘ in window` teilt uns mit, ob die Benachrichtigungs-API in diesem Browser unterstützt wird. `Notification.permission` gibt Auskunft darüber, ob der Benutzer die Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat. Wenn der Benutzer zugestimmt hat, ist der Wert „granted“, hat er abgelehnt, ist der Wert „denied“.
Firebase Cloud Messaging aktivieren und ein Abonnement erstellen
Um Benachrichtigungen vom Server an den Benutzer senden zu können, benötigen wir für jeden Benutzer einen eindeutigen Endpunkt oder ein Abonnement. Hierfür werden wir Firebase Cloud Messaging verwenden.
Erstellen Sie zunächst ein Firebase-Konto über den Link https://firebase.google.com/ und klicken Sie auf „Starten“.
- Erstellen Sie ein neues Projekt mit einem Namen und klicken Sie auf „Weiter“. In diesem Beispiel wird es „wdzwdz“ genannt.
- Google Analytics ist standardmäßig aktiviert. Sie können es deaktivieren, wenn es nicht benötigt wird und auf „Weiter“ klicken. Es kann später bei Bedarf in der Firebase-Konsole aktiviert werden.
- Sobald das Projekt erstellt wurde, sieht es in etwa so aus:
Gehen Sie dann zu den Projekteinstellungen und klicken Sie auf „Cloud-Messaging“, um die Schlüssel zu generieren.
Sie erhalten nun 3 Schlüssel:
- Projektserverschlüssel
- Privater Schlüssel für Web-Push-Zertifikate
- Öffentlicher Schlüssel für Web-Push-Zertifikate
Fügen Sie nun folgendes 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);
};
const subscribeUser = async () => {
const swRegistration = await navigator.serviceWorker.getRegistration();
const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // Hier Ihren öffentlichen Schlüssel des Web-Push-Zertifikats einfügen
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 folgendes 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)
});
Damit ist alles im Frontend konfiguriert. Mithilfe des Abonnements können Sie nun Push-Benachrichtigungen an Ihre Benutzer senden, solange diese die Push-Dienste nicht verweigert haben.
Push vom Node.js-Backend
Sie können das web-push npm-Modul verwenden, um dies zu erleichtern.
Beispiel-Snippet zum Senden von Push-Benachrichtigungen vom NodeJS-Server:
const webPush = require('web-push');
// pushSubscription ist das Abonnement, das vom Frontend gesendet wurde, um es in der 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 öffentlicher Schlüssel des Web-Zertifikats
const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
// Ihr privater Schlüssel des Web-Zertifikats
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-Event im Service Worker wird ausgelöst.
Push vom PHP-Backend
Für ein PHP-Backend können Sie das web-push-php Composer-Paket verwenden. Das folgende Beispiel zeigt, wie Push-Benachrichtigungen gesendet werden:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
require __DIR__.'/../vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;
// Abonnement in der DB gespeichert
$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]', // kann mailto: oder Ihre Websiteadresse sein
'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (empfohlen) unkomprimierter öffentlicher Schlüssel P-256, kodiert in Base64-URL
'privateKey' => 'your web-certificate private-key', // (empfohlen) der geheime Multiplikator des privaten Schlüssels, kodiert in Base64-URL
],
];
$webPush = new WebPush($auth);
$subsrciptionData = json_decode($subsrciptionJson,true);
// webpush 6.0
$webPush->sendOneNotification(
Subscription::create($subsrciptionData),
json_encode($payloadData)
);
Fazit
Ich hoffe, dies gibt Ihnen einen Überblick darüber, wie Webanwendungen in PWAs umgewandelt werden können. Sie können den Quellcode dieses Artikels hier einsehen und das Ergebnis hier ausprobieren. Push-Benachrichtigungen wurden getestet, indem sie vom Backend gesendet wurden.