Erste Schritte mit progressiven Web-Apps

Progressive Web Apps (PWAs) sind Web-Apps, die schrittweise verbessertwerden. Zu den progressiven Verbesserungen gehören App-ähnliche Features wie Installation, Offlineunterstützung und Pushbenachrichtigungen.

Sie können Ihre PWA auch für App-Stores verpacken, z. B. Microsoft Store, Google Play und Mac App Store. Die Microsoft Store ist der kommerzielle App Store, der in Windows 10 und höher integriert ist.

In dieser Übersicht über PWA Grundlagen erstellen Sie eine einfache Web-App und erweitern sie als PWA. Das fertige Projekt funktioniert in modernen Browsern.

Tipp

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

Voraussetzungen

Erstellen einer einfachen Web-App

Um eine leere Web-App zu erstellen, führen Sie die Schritte im Node Express-App-Generator aus,und nennen Sie Ihre MySamplePwa App.

Führen Sie in der Eingabeaufforderung die folgenden Befehle aus, die eine leere Web-App erstellen und Abhängigkeiten installieren:

npx express-generator --no-view
npm install

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 http://localhost:3000 nun, um Ihre neue Web-App anzuzeigen.

Ausführen des neuen PWA auf localhost.

Erste Schritte beim Erstellen eines PWA

Nachdem Sie nun über eine einfache Web-App verfügen, erweitern Sie sie als progressive Web App (PWA), indem Sie die drei Anforderungen für PWAs hinzufügen:

Schritt 1: Verwenden von HTTPS

Wichtige Teile der Progressive Web Apps-Plattform, z. B. Service Worker,erfordern https. Wenn Ihre PWA live geht, müssen Sie sie unter einer HTTPS-URL veröffentlichen. Viele Hosts bieten jetzt standardmäßig HTTPS an, aber wenn dies nicht der Fall ist, bietet Let's Encrypt eine kostenlose Alternative zum Erstellen der erforderlichen Zertifikate.

Zu Debugzwecken erlaubt Microsoft Edge auch http://localhost die Verwendung der PWA-APIs. In diesem Lernprogramm erstellen Sie http://localhost Ihre PWA.

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-Kontoerstellen. Wenn Sie Ihre App-Website im Microsoft Azure App Servicehosten, wird sie standardmäßig über HTTPS bereitgestellt.

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 Sie in Visual Studio Code den Ordner "Datei > öffnen" aus, und wählen Sie dann das MySamplePwa Verzeichnis aus, das Sie zuvor erstellt haben.

  2. Drücken Ctrl + N Sie die Taste, um eine neue Datei zu erstellen.

  3. Kopieren Sie den folgenden Code, und fügen Sie ihn in die neue Datei 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"
            }
        ]
    }
    
  4. Speichern Sie die Datei unter /MySamplePwa/public/manifest.json .

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

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

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

Schritt 3 – Hinzufügen eines Service Worker

Service worker sind die Schlüsseltechnologie hinter PWAs. Service worker enable scenarios that were previously limited to native apps, including:

  • Offlineunterstützung.
  • Erweiterte Zwischenspeicherung.
  • Ausführen von Hintergrundaufgaben.

Service Worker sind spezielle Web Worker, die Netzwerkanforderungen von Ihrer Web-App abfangen. Service Worker können Aufgaben auch dann ausführen, wenn Ihre PWA nicht ausgeführt wird, einschließlich:

  • Bereitstellen angeforderter Ressourcen aus einem Cache.
  • Senden von Pushbenachrichtigungen.
  • Ausführen von Hintergrundabrufaufgaben.
  • Ungültige Symbole.

Service Worker werden in einer speziellen JavaScript-Datei definiert, die unter Verwenden von Service Worker und Service Worker APIbeschrieben wird.

Um einen Service Worker in Ihrem Projekt zu erstellen, verwenden Sie das Rezept für Service Worker für das erste Cachenetzwerk aus PWA Generator wie folgt.

  1. Kopieren Sie die Quelldateien pwabuilder-sw-register.js und pwabuilder-sw.js in den public Ordner in Ihrem Web-App-Projekt.

  2. Öffnen Sie in Visual Studio Code /public/index.html .

  3. Fügen Sie innerhalb des <head> Tags den folgenden Code hinzu.

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

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

Vergewissern Sie sich, dass Der Service Worker wie folgt ausgeführt wird:

  1. Wechseln Sie zu Ihrer Web-App unter http://localhost:3000 . 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 DevTools zu öffnen. Wählen Sie "Anwendung" und dann "Service Worker" aus, um die Service Worker anzuzeigen. Wenn der Service Worker nicht angezeigt wird, aktualisieren Sie die Seite.

    Übersicht über DevTools Service Worker.

  3. Zeigen Sie den Cache des Service Worker an, indem Sie cache Storage erweitern und pwabuilder-precacheauswählen. Alle vom Service Worker zwischengespeicherten Ressourcen sollten angezeigt werden. Zu den vom Service Worker zwischengespeicherten Ressourcen gehören das App-Symbol, das App-Manifest, CSS- und JavaScript-Dateien.

    Service Worker-Cache in DevTools.

  4. Probieren Sie Ihre PWA wie folgt als Offline-App aus. Wählen Sie in DevTools "Netzwerk" aus, und ändern Sie dann den Status von "Online" in "Offline".

    Festlegen des Offlinemodus der App in DevTools.

  5. Aktualisieren Sie Ihre App. Es sollte der Offlinemechanismus für die Bereitstellung der Ressourcen Ihrer App aus dem Cache angezeigt werden.

    Ein PWA, der offline ausgeführt wird.

Die App kann jetzt installiert werden.

Bewährte Methoden und nächste Schritte

Um eine stabile, reale PWA zu erstellen, berücksichtigen Sie die folgenden bewährten Methoden für die Web-App-Entwicklung.

Browserübergreifende Kompatibilität

Testen Sie Ihre App auf browserübergreifende Kompatibilität. Stellen Sie sicher, dass Ihre PWA funktioniert, indem Sie sie in verschiedenen Browsern und Umgebungen testen. Weitere Informationen finden Sie unter Tools unter Microsoft Edge Developer.

Dynamisches Design

Verwenden Sie dynamische Layouts und flexible Bilder. Das dynamische Design umfasst die folgenden Elemente, die Ihre UX an das Gerät Des Benutzers anpassen:

Um Ihre App lokal zu testen, verwenden Sie Geräteemulationstools aus Ihrem Browser. Um Ihre App direkt auf einem Zielgerät zu testen, erstellen Sie eine Remotedebuggingsitzung unter Windows oder Android.

Unterstützen der Deep-Verknüpfung

Unterstützen Sie Deep-Verknüpfung. Leiten Sie jede Seite Ihrer Website an eine eindeutige URL weiter, damit vorhandene Benutzer ihnen helfen können, durch die Freigabe von sozialen Medien eine noch größere Zielgruppe zu erreichen.

Bereitstellen einer umfassenden Offlineumgebung

Bieten Sie eine umfassende Offlineumgebung. Sorgen Sie dafür, dass die App auch dann funktioniert, wenn das Gerät des Benutzers offline ist. Stellen Sie eine benutzerdefinierte Offlineseite bereit, anstatt die standardmäßige Offlineseite des Browsers zu verwenden.

Verwenden von Validierungs- und Testmethoden

Verwenden Sie Softwareüberprüfungs- und Testmethoden. Verwenden Sie Codequalitätstools wie webhint linter, um die Effizienz, Robustheit, Sicherheit und Barrierefreiheit Ihrer App zu optimieren.

Weitere Informationen