Erste Schritte mit Progressive Web Apps (Chromium)

Progressive Web Apps (PWAs) sind Web-Apps, die schrittweise erweitert werden. Die progressiven Verbesserungen umfassen app- like Features, z. B. Installation, Offlineunterstützung und Pushbenachrichtigungen. Sie können ihre PWA auch für App-Stores packen. Zu den möglichen App-Stores gehören der Microsoft Store, Google Play, der Mac App Store und vieles mehr. Der Microsoft Store ist der kommerzielle App Store in Windows 10.

Im folgenden Handbuch erhalten Sie eine Übersicht über die Grundlagen von PWA, indem Sie eine einfache Web-App erstellen und als PWA erweitern. Das fertige Projekt funktioniert in modernen Browsern.

Tipp

Sie können PWABuilder verwenden, um eine neue PWA zu erstellen, Ihre vorhandene PWA zu verbessern oder Ihre PWA für App-Stores zu packen.

Voraussetzungen

Erstellen einer einfachen Web-App

Führen Sie zum Erstellen einer leeren Web-App die Schritte unter Node Express App Generator aus,und nennen Sie Ihre App MySamplePwa .

Führen Sie in der Eingabeaufforderung die folgenden Befehle aus.

npx express-generator --no-view
npm install

Die Befehle erstellen eine leere Web-App und installieren abhängigkeiten.

Sie haben jetzt eine einfache, funktionale Web-App. Führen Sie den folgenden Befehl aus, um Ihre Web-App zu starten.

npm start

Navigieren Sie nun, http://localhost:3000 um Ihre neue Web-App zu sehen.

Ausführen des neuen PWA auf localhost

Erste Schritte beim Erstellen einer PWA

Da Sie nun über eine einfache Web-App verfügen, erweitern Sie sie als PWA, indem Sie die drei Anforderungen für PWAs hinzufügen.: HTTPS, ein Web-App-Manifestund ein Service Worker.

Schritt 1 : Verwenden von HTTPS

Wichtige Teile der PWA-Plattform, z. B. Service Workers,erfordern die Verwendung von HTTPS. Wenn Ihr PWA live geht, müssen Sie es in einer HTTPS-URL veröffentlichen.

Zum Debuggen ermöglicht Microsoft Edge auch http://localhost die Verwendung der PWA-APIs.

Veröffentlichen Sie Ihre Web-App als Livewebsite,stellen Sie jedoch sicher, dass Ihr Server für HTTPS konfiguriert ist. Sie können beispielsweise ein kostenloses Azure-Konto erstellen. Hosten Sie Ihre Website im Microsoft Azure App Service, und sie wird standardmäßig über HTTPS bereitgestellt.

Verwenden Sie die folgende Anleitung, http://localhost um Ihre PWA zu erstellen.

Schritt 2 : Erstellen eines Web-App-Manifests

Ein Web App-Manifest ist eine JSON-Datei, die Metadaten zu Ihrer App enthält, z. B. Name, Beschreibung, Symbole und vieles mehr.

So fügen Sie der Web-App ein App-Manifest hinzu:

  1. Wählen Visual Studio Code die Option Dateiöffnen Ordner > aus, und wählen Sie das MySamplePwa Verzeichnis aus, das Sie zuvor erstellt haben.

  2. Wählen Ctrl + N Sie diese Option aus, um eine neue Datei zu erstellen, und fügen Sie den folgenden Codeausschnitt ein.

    {
        "lang": "en-us",
        "name": "My Sample PWA",
        "short_name": "SamplePWA",
        "description": "A sample PWA for testing purposes",
        "start_url": "/",
        "background_color": "#2f3d58",
        "theme_color": "#2f3d58",        
        "orientation": "any",
        "display": "standalone",
        "icons": [
            {
                "src": "/icon512.png",
                "sizes": "512x512"
            }
        ]
    }
    
  3. Speichern Sie die Datei unter /MySamplePwa/public/manifest.json .

  4. Fügen Sie ein 512x512-App-Symbolbild mit dem Namen icon512.png zu /MySamplePwa/public/images hinzu. Sie können das Beispielbild zu Testzwecken verwenden.

  5. Öffnen Visual Studio /public/index.html Code, und fügen Sie den folgenden Codeausschnitt innerhalb des Tags <head> hinzu.

    <link rel="manifest" href="/manifest.json">
    

Schritt 3 : Hinzufügen eines Dienstmitarbeiters

Servicemitarbeiter sind die Schlüsseltechnologie für PWAs und ermöglichen Szenarien wie Offlineunterstützung, erweiterte Zwischenspeicherung und Ausführen von Hintergrundaufgaben, die zuvor auf systemeigene Apps beschränkt waren.

Servicemitarbeiter sind Hintergrundaufgaben, die Netzwerkanforderungen von Ihrer Web-App abfangen. Service workers attempt to complete tasks, even when your PWA is not running. Zu den Aufgaben gehören die folgenden Aktionen.

  • Serving requested resources from a cache
  • Senden von Pushbenachrichtigungen
  • Ausführen von Aufgaben zum Abrufen von Hintergrundinformationen
  • Ungültige Symbole
  • und mehr

Dienstmitarbeiter werden in einer speziellen JavaScript-Datei definiert. Weitere Informationen finden Sie unter Using Service Workers and Service Worker API.

Verwenden Sie zum Erstellen eines Dienstmitarbeiters in Ihrem Projekt das Rezept cache-first network service worker von PWA Builder.

  1. Navigieren Sie zu pwabuilder.com/serviceworker,wählen Sie den Cache-First-Netzwerkdienstmitarbeiter aus, und wählen Sie die Schaltfläche Herunterladen aus. Die heruntergeladene Datei enthält die folgenden Dateien:

    • pwabuilder-sw-register.js
    • pwabuilder-sw.js
  2. Kopieren Sie die heruntergeladenen Dateien public in den Ordner in Ihrem Web-App-Projekt.

  3. Öffnen Visual Studio Code, und fügen Sie den /public/index.html folgenden Codeausschnitt innerhalb des Tags <head> hinzu.

    <script type="module" src="/pwabuilder-sw-register.js"></script>
    

Ihre Web-App verfügt jetzt über einen Dienstmitarbeiter, der die Cache-First-Strategie verwendet. Der neue Dienstmitarbeiter ruft ressourcen zuerst aus dem Cache und nur bei Bedarf aus dem Netzwerk ab. Zwischengespeicherte Ressourcen umfassen Bilder, JavaScript, CSS und HTML.

Verwenden Sie die folgenden Schritte, um zu bestätigen, dass Ihr Dienstmitarbeiter ausgeführt wird.

  1. Navigieren Sie zu Ihrer Web-App mithilfe http://localhost:3000 von . Wenn Ihre Web-App nicht verfügbar ist, führen Sie den folgenden Befehl aus.

    npm start
    
  2. Wählen Sie in Microsoft Edge aus, F12 um die Microsoft Edge DevTools zu öffnen. Wählen Sie Anwendungund dann Service Workers aus, um die Servicemitarbeiter anzeigen zu können. Wenn der Dienstmitarbeiter nicht angezeigt wird, aktualisieren Sie die Seite.

    Übersicht über Microsoft Edge DevTools Service Worker

  3. Zeigen Sie den Dienstarbeitscache an, indem Sie Cachespeicher erweitern, und wählen Sie pwabuilder-precache aus. Alle vom Dienstmitarbeiter zwischengespeicherten Ressourcen sollten angezeigt werden. Zu den ressourcen, die vom Dienstmitarbeiter zwischengespeichert werden, gehören das App-Symbol, das App-Manifest, css und die JavaScript-Dateien.

    Dienstarbeitscache in Microsoft Edge DevTools

  4. Testen Sie PWA als Offline-App. Wählen Sie in Microsoft Edge DevTools ( ) Netzwerk aus, und ändern Sie dann F12 den Onlinestatus in Offline. ****

    Festlegen des Offlinemodus der App in Microsoft Edge DevTools

  5. Aktualisieren Sie Ihre App, und sie sollte den Offlinemechanismus für die Verwendung der Ressourcen Ihrer App aus dem Cache anzeigen.

    Offline ausgeführter PWA

Hinzufügen von Pushbenachrichtigungen zu Ihrem PWA

Sie können PWAs erstellen, die Pushbenachrichtigungen unterstützen, indem Sie die folgenden Aufgaben ausführen.

  1. Abonnieren eines Messagingdiensts mithilfe der Push-API
  2. Anzeigen einer Popupnachricht beim Empfangen einer Nachricht vom Dienst mithilfe der Benachrichtigungs-API

Genau wie bei Service Workers sind die Pushbenachrichtigungs-APIs standardbasierte APIs. Die Pushbenachrichtigungs-APIs funktionieren browserübergreifend, daher sollte Ihr Code überall funktionieren, wo PWAs unterstützt werden. Weitere Informationen zum Senden von Pushnachrichten an verschiedene Browser auf Ihrem Server finden Sie unter Web-Push.

Die folgenden Schritte wurden aus dem Push Rich Demo in Service Worker Cookbook von Mozilla angepasst, das eine Reihe anderer nützlicher Web-Push- und Servicearbeitsrezepte bietet.

Schritt 1 : Generieren von VAPID-Schlüsseln

Pushbenachrichtigungen erfordern VAPID (Voluntary Application Server Identification)-Schlüssel, um Pushnachrichten an den PWA-Client zu senden. Es sind mehrere VAPID-Schlüsselgeneratoren online verfügbar (z. B. vapidkeys.com). Nach der Generierung sollten Sie ein JSON-Objekt mit einem öffentlichen und einem privaten Schlüssel erhalten. Speichern Sie die Schlüssel für spätere Schritte im folgenden Lernprogramm. Weitere Informationen zu VAPID und WebPush finden Sie unter Senden von VAPID identifizierten WebPush-Benachrichtigungen mithilfe des Mozilla-Pushdiensts.

Schritt 2 – Abonnieren von Pushbenachrichtigungen

Servicemitarbeiter verarbeiten Pushereignisse und Popupbenachrichtigungsinteraktionen in Ihrem PWA. Stellen Sie sicher, dass die folgenden Bedingungen erfüllt sind, um die PWA auf Server-Pushbenachrichtigungen zu abonnieren.

  • Ihr PWA ist installiert, aktiv und registriert
  • Ihr Code zum Abschließen der Abonnementaufgabe befindet sich im Hauptbenutzeroberflächenthread des PWA
  • Sie verfügen über Netzwerkkonnektivität

Bevor ein neues Pushabonnement erstellt wird, überprüft Microsoft Edge, ob der Benutzer die PWA-Berechtigung zum Empfangen von Benachrichtigungen erteilt hat. Andern falls nicht, wird der Benutzer vom Browser zur Berechtigung aufgefordert. Wenn die Berechtigung verweigert wird, wird von der Anforderung ein registration.pushManager.subscribe DOMException ausgelöst, der verarbeitet werden muss. Weitere Informationen zur Berechtigungsverwaltung finden Sie unter Push Notifications in Microsoft Edge.

Fügen Sie pwabuilder-sw-register.js in Ihrer Datei den folgenden Codeausschnitt an.

// Ask the user for permission to send push notifications.
navigator.serviceWorker.ready
    .then(function (registration) {
        // Check if the user has an existing subscription
        return registration.pushManager.getSubscription()
            .then(function (subscription) {
                if (subscription) {
                    return subscription;
                }
                
                const vapidPublicKey = "PASTE YOUR PUBLIC VAPID KEY HERE";             
                return registration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
                });
            });
    });

// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
    var padding = '='.repeat((4 - base64String.length % 4) % 4);
    var base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');
        
    var rawData = window.atob(base64);
    var outputArray = new Uint8Array(rawData.length);
    
    for (var i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

Weitere Informationen finden Sie unter PushManager und Web-Push.

Schritt 3 – Abhören auf Pushbenachrichtigungen

Nachdem ein Abonnement in Ihrem PWA erstellt wurde, fügen Sie dem Dienstmitarbeiter Handler hinzu, um auf Pushereignisse zu reagieren. Das Pushereignis wird vom Server gesendet, um Popupbenachrichtigungen anzuzeigen. Popupbenachrichtigungen zeigen Daten für eine empfangene Nachricht an. Zum Ausführen der folgenden Aufgaben müssen Sie einen Handler click hinzufügen.

  • Schließen der Popupbenachrichtigung
  • Öffnen, Fokussieren oder Öffnen und Fokussieren von geöffneten Fenstern
  • Öffnen und Fokussieren eines neuen Fensters zum Anzeigen einer PWA-Clientseite

Fügen Sie pwabuilder-sw.js in Ihrer Datei die folgenden Handler hinzu.

// Respond to a server push with a user notification.
self.addEventListener('push', function (event) {
    if (Notification.permission === "granted") {
        const notificationText = event.data.text();
        const showNotification = self.registration.showNotification('Sample PWA', {
            body: notificationText,
            icon: 'images/icon512.png'
        });
        // Ensure the toast notification is displayed before exiting the function.
        event.waitUntil(showNotification);
    }
});

// Respond to the user selecting the toast notification.
self.addEventListener('notificationclick', function (event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();
    
    // This attempts to display the current notification if it is already open and then focuses on it.
    event.waitUntil(clients.matchAll({
        type: 'window'
    }).then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
            var client = clientList[i];
            if (client.url == 'http://localhost:1337/' && 'focus' in client)
                return client.focus();
        }
        if (clients.openWindow)
            return clients.openWindow('/');
    }));
});

Schritt 4 – Ausprobieren

Führen Sie die folgenden Schritte aus, um Pushbenachrichtigungen für Ihre PWA zu testen.

  1. Navigieren Sie zu Ihrem PWA unter http://localhost:3000 . Wenn Ihr Servicemitarbeiter aktiviert wird und versucht, Ihre PWA für Pushbenachrichtigungen zu abonnieren, fordert Microsoft Edge Sie auf, Ihrem PWA das Anzeigen von Benachrichtigungen zu erlauben. Wählen Sie Zulassenaus.

    Berechtigungsdialogfeld zum Aktivieren von Benachrichtigungen

  2. Simulieren sie eine serverseitige Pushbenachrichtigung. Wenn Ihr PWA http://localhost:3000 in Ihrem Browser geöffnet ist, wählen Sie F12 aus, um die DevTools zu öffnen. Wählen Sie ApplicationService > WorkerPush > aus, um eine Test-Pushbenachrichtigung an Ihre PWA zu senden.

    Eine Pushbenachrichtigung sollte in der Nähe der Taskleiste angezeigt werden.

    Pushen einer Benachrichtigung von DevTools

    Wenn Sie keine Popupbenachrichtigung (oder aktivieren) auswählen, wird sie nach einigen Sekunden automatisch vom System geschlossen und im Windows Action Center in eine Warteschlange eingereiht.

    Benachrichtigungen im Windows Action Center

Nächste Schritte

Die folgenden Schritte umfassen zusätzliche Aufgaben, mit deren Hilfe Sie das Erstellen von echten PWAs verstehen können.

Weitere Informationen