Freigeben über

Erste Schritte bei der Entwicklung einer PWA

Eine progressive Web-App (PWA) ist eine App, die Sie mithilfe von Webtechnologien wie HTML, CSS und JavaScript erstellen und die auch auf verschiedenen Gerätebetriebssystemen aus einer einzigen Codebasis installiert und ausgeführt werden kann.

Wenn Sie diesen Artikel zusammen mit dem Beispiel für den Temperaturkonverter verwenden, mit dem Sie lernen, wie Sie eine PWA erstellen, können Sie Folgendes ausführen:

  • Passen Sie den Temperaturkonverter PWA an, indem Sie geringfügige Änderungen am Code des Beispiels vornehmen.

  • Erstellen Sie Ihre eigene PWA, indem Sie das gesamte Beispielverzeichnis kopieren und einfügen und den Code umfassend ändern.

Siehe auch:

Die Architektur einer progressiven Web-App

Das folgende Diagramm zeigt die allgemeine Architektur einer progressiven Web-App (PWA):

Architekturdiagramm einer PWA

Auf der linken Seite enthält das Gerät, auf dem das Front-End des PWA ausgeführt wird, die Dateien für den Front-End-Code einer PWA.

Auf der rechten Seite führt der Webserver den Back-End-Code (oder den Datenbankinhalt) einer PWA aus.

Das Gerät enthält den Front-End-Code, einschließlich HTML, CSS, JavaScript, dem Service Worker und dem Manifest. Dies gilt unabhängig davon, ob die progressive Web-App (PWA) als Web-App im Browser oder als lokale App verwendet wird, die auf dem Gerät installiert ist.

Wie eine normale Web-App wird eine progressive Web-App mit den Programmiersprachen des Webs geschrieben: HTML, CSS und JavaScript, und wird mithilfe eines Webservers an Ihre Benutzer verteilt. Wenn es sich bei der Web-App um eine progressive Web-App handelt, wird dem Benutzer die Web-App zunächst in einem Webbrowser angezeigt, und in der Adressleiste ist auch eine Schaltfläche App verfügbar , die den Benutzer auffordert, die App lokal zu installieren.

Bereitstellen einer PWA auf einem Produktionswebserver

Um eine progressive Web-App (PWA) für Benutzer verfügbar zu machen, stellen Sie die progressive Web-App (PWA) auf einem Webserver bereit, auf den (im Gegensatz zu einer lokalen Entwicklungsumgebung) über HTTPS zugegriffen werden kann. Der Webserver sendet den Front-End-Code an Benutzer und führt den Back-End-Code für die Web-App aus.

Einige Teile der Progressive Web-Apps(PWAs)-Plattform, z. B. Servicemitarbeiter, erfordern die Verwendung von HTTPS.

Wenn die progressive Web-App (PWA) keinen Back-End-Code aufweist, kann die progressive Web-App (PWA) von einem statischen Webserver bereitgestellt werden. Der Temperaturkonverter unter https://microsoftedge.github.io/Demos/temperature-converter/ verwendet z. B. den statischen github.io Server von GitHub.

Im Artikel Temperaturkonverterbeispiel können Sie die progressive Web-App auf Ihrem lokalen Server ausführen und testen. Wenn Ihre eigene progressive Web-App getestet wurde und zur Verteilung bereit ist, verteilen Sie die getestete PWA über einen Webserver (einen Webhostinganbieter) an Ihre Benutzer.

Um Ihre progressive Web-App zu aktualisieren, stellen Sie die neue Version erneut auf Ihrem Webserver bereit.

Beispielhosts für Webserver

Wenn Ihre progressive Web-App (PWA) live geschaltet wird, müssen Sie sie unter einer HTTPS-URL veröffentlichen. Viele Hosts verwenden standardmäßig HTTPS, aber wenn Ihr Host kein HTTPS anbietet, bietet Let's Encrypt eine kostenlose Alternative zum Erstellen der erforderlichen Zertifikate.

Sie können beispielsweise ein Azure kostenloses Konto erstellen. Wenn Sie Ihre Website auf dem Microsoft Azure App Service hosten, wird sie standardmäßig über HTTPS bereitgestellt.

Sie können Ihre Website auch auf GitHub Pages (pages.github.com) hosten, die HTTPS unterstützt. Weitere Informationen finden Sie in GitHub Pages Dokumentation.

Informationen zu Localhost (http) und Produktionsserver (https)

Wenn Sie einen lokalen Entwicklungswebserver an der Adresse verwenden, beginnt die URL in der localhost Regel mit http, nicht https. Wichtige Teile der Progressive Web-Apps-Plattform, z. B. Service Worker, erfordern die Verwendung von HTTPS und nicht HTTP.

Zu Entwicklungs- und Debugzwecken ermöglicht Microsoft Edge (oder ein Fenster, in dem eine lokale PWA-App gehostet wird) der localhost Adresse die Ausführung der PWA-APIs (Progressive Web App) ohne HTTPS.

Front-End-Codedateien (UI-Code)

Eine progressive Web-App (PWA) verfügt über Front-End-Codedateien, die vom Webserver an den Browser auf dem lokalen Gerät gesendet werden.

Front-End-Code ist die Ressourcen, die für die Installation der App auf dem Gerät des Benutzers erforderlich sind, z. B. HTML-, CSS- und JavaScript-Code.

Eine progressive Web-App (PWA) enthält in der Regel die folgenden Front-End-Codedateien:

  • Eine HTML-Datei zur Beschreibung des Inhalts in Ihrer App, z. B. Text, Bilder, Textfelder oder Schaltflächen, die auf der Benutzeroberfläche angezeigt werden.

  • Eine CSS-Datei zum Organisieren des HTML-Inhalts in einem Layout und zum Bereitstellen von Formatvorlagen für Elemente.

  • Eine JavaScript-Datei zum Hinzufügen von Benutzerinteraktionen zu Ihrer Benutzeroberfläche.

  • Eine JSON-Manifestdatei zur Beschreibung Ihrer App für das Hostbetriebssystem.

  • Eine JavaScript-Dienst-Workerdatei zum Zwischenspeichern der Front-End-Codedateien der App und Ausführen von Hintergrundaufgaben.

Der Front-End-Code für eine progressive Web-App (PWA) wird mithilfe des Webbrowsers des Geräts ausgeführt. Die eigene Benutzeroberfläche des Browsers ist nicht sichtbar, wenn die App in einem eigenständigen Fenster ausgeführt wird, bei dem es sich um ein optimiertes Browserfenster mit minimalen Steuerelementen der Browser-Benutzeroberfläche handelt.

Back-End-Code, Dateien, Endpunkte und Daten (serverseitiger Code)

Eine progressive Web-App (PWA) verfügt möglicherweise über Back-End-Code, der sich auf dem Webserver befindet und ausgeführt wird.

Wie eine Web-App kann eine progressive Web-App Back-End-Code (serverseitiger Code) enthalten, der alle Webdienst-API-Endpunkte implementiert, die von Ihrer App benötigt werden, wenn sie mit dem Internet verbunden sind, um dynamische Inhalte abzurufen, die möglicherweise in einer Datenbank auf Ihrem Server gespeichert werden.

Der Back-End-Code für eine progressive Web-App kann die serverseitigen Sprachen Ihrer Wahl verwenden, z. B.:

  • ASP.NET
  • Java
  • Node.js
  • PHP

Abhängig von der App, die Sie erstellen, sind möglicherweise keine serverseitigen Webdienst-API-Endpunkte erforderlich.

Das Temperaturkonverter-Beispiel-PWA verfügt über keinen serverseitigen Code, da die App ausschließlich auf dem Gerät ausgeführt wird, auf dem sie installiert ist, und keine serverseitigen Daten benötigt.

In den verbleibenden Abschnitten werden die Dateien erläutert, aus denen das PWA-Beispiel besteht.

Das Web-App-Manifest (manifest.json)

Eine reguläre Web-App wird nur im Browser ausgeführt. Durch Hinzufügen eines Web-App-Manifests wird die Web-App zu einer progressiven Web-App (PWA). Das Web-App-Manifest ermöglicht Browsern, die PWAs unterstützen, die Web-App als progressive Web-App auf dem Gerät zu installieren.

Ein Web-App-Manifest ist eine JSON-Datei, die Metadaten zur progressiven Web-App enthält, z. B. name, Beschreibung, Symbole und die verschiedenen verwendeten Betriebssystemfeatures. Der JSON-Code beschreibt die App für das Hostbetriebssystem. Die Manifestdatei enthält grundlegende Informationen zur progressiven Web-App, die vom Betriebssystem des Geräts verwendet werden kann.

Der Dateiname manifest.json ist eine gängige Konvention, keine strenge Anforderung.

Beispiel manifest.json:

{
  "lang": "en-us",
  "name": "Temperature converter app",
  "short_name": "Temperature converter",
  "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit",
  "start_url": "./",
  "background_color": "#2f3d58",
  "theme_color": "#2f3d58",
  "orientation": "any",
  "display": "standalone",
  "icons": [
      {
          "src": "./icon512.png",
          "sizes": "512x512"
      }
  ]
}

Siehe auch:

Der Service Worker zum Zwischenspeichern der App-Dateien auf dem lokalen Gerät (sw.js)

Eine progressive Web-App (PWA) kann eine Service Worker-JavaScript-Datei (z sw.js. B. ) verwenden, um Front-End-Benutzeroberflächendateien auf dem lokalen Gerät zwischenzuspeichern. Ein Service Worker wird in einer dedizierten JavaScript-Datei definiert, die von der App geladen wird (anders als die Hauptdatei .js , die App-Logik enthält).

Ein Service Worker ist ein spezialisierter Web-Worker, der Netzwerkanforderungen von Ihrer progressiven Web-App abfangen kann. Der Service Worker ermöglicht Szenarien wie die folgenden:

  • Offlineunterstützung, einschließlich zeitweiliger Verbindung mit dem Internet.
  • Erweitertes Zwischenspeichern auf dem Gerät.
  • Ausführen von Hintergrundaufgaben, z. B. Empfangen von PUSH-Nachrichten, Hinzufügen von Signalen zum App-Symbol oder Abrufen von Daten von einem Server.

Ein Service Worker ist eine Schlüsseltechnologie, die eine progressive Web-App schnell und unabhängig von Netzwerkbedingungen macht. Der Service Worker macht die App:

  • Schneller.
  • Zuverlässiger.
  • Netzwerkunabhängig; Die App funktioniert weiterhin (in irgendeiner Weise), auch bei einer fehlenden oder zeitweiligen Internetverbindung.

Dieses Beispiel sw.js Datei ist ein Service Worker, der das Zwischenspeichern von Dateien verwaltet, die Teil des Temperaturkonverter-PWA sind, die Dateien auf dem lokalen Laufwerk zwischenspeichert und sie bereitstellt, wenn keine Internetverbindung besteht.

sw.js:

const CACHE_NAME = `temperature-converter-v1`;
    
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
      './',
      './converter.js',
      './converter.css'
    ]);
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    // Get the resource from the cache.
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
        try {
          // If the resource was not in the cache, try the network.
          const fetchResponse = await fetch(event.request);
    
          // Save the resource in the cache and return it.
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        } catch (e) {
          // The network failed
        }
    }
  })());
});

Dieser Service Worker speichert drei Dateien explizit zwischen:

  • ./ Mittel index.html
  • ./converter.js
  • ./converter.css

Zwei weitere Dateien werden automatisch vom Browser zwischengespeichert:

  • Die Symboldatei (.png).
  • Die Manifestdatei (.json).

Lauschen auf das install Ereignis

Der Service Worker lauscht auf das install Ereignis, das ausgelöst wird, wenn der Benutzer die App installiert, und verwendet es zum Zwischenspeichern der Ressourcen, die Ihre App benötigt, um offline zu funktionieren, z. B.:

  • Die anfängliche HTML-Seite.
  • Die JavaScript-Hauptdatei der App, die die App-Logik enthält.
  • Die CSS-Datei der App.

Um die Installation der App zu ermöglichen, ermöglicht eine JavaScript-Dienst-Workerdatei die Offline-Arbeit der App (ohne immer über eine Internetverbindung), indem erforderliche Front-End-Dateien auf dem lokalen Gerät zwischengespeichert werden.

Lauschen auf das fetch Ereignis

Der Service Worker fängt fetch Ereignisse ab, die jedes Mal auftreten, wenn Ihre App eine Anforderung an den Server sendet, und wendet eine Cache-First-Strategie an.

Der Service Worker gibt zwischengespeicherte Ressourcen zurück, damit Ihre App offline arbeiten kann. Wenn dies fehlschlägt, versucht der Service Worker stattdessen, die Datei vom Server herunterzuladen.

Ein Service Worker ist optional.

Eine progressive Web-App (PWA) benötigt keinen Service Worker für Microsoft Edge, um die App installieren zu können. Es wird jedoch empfohlen, einen Service Worker in Ihre eigene progressive Web-App einzuspeisen, um die App schneller und zuverlässiger zu machen, z. B. wenn Ihr Gerät über eine zeitweilige Netzwerkverbindung verfügt oder offline ist.

Siehe auch:

Nächste Schritte

Führen Sie die Schritte unter Temperaturkonverterbeispiel aus. Um dann Eine eigene progressive Web-App (PWA) zu erstellen, können Sie das Demos\temperature-converter Verzeichnis kopieren, einfügen und ändern. Das Temperaturkonverterbeispiel zeigt nur eine kleine Stichprobe, was progressive Web-Apps (PWAs) leisten kann. Das Beispiel veranschaulicht Code, der für jede progressive Web-App (PWA) wichtig ist, z. B. arbeiten, wenn keine Internetverbindung besteht.

Es gibt zusätzliche Bewährte Methoden für PWAs , damit sich eine progressive Web-App (PWA) wie eine native App anfühlt:

  • Integrieren Sie die App in das Betriebssystem, z. B. durch Die Verarbeitung von Dateien.

  • Ausführen nichttrivialer Computingaufgaben.

  • Laden Sie die App in App-Stores hoch.

Weitere Informationen

MDN:

Hosting:

Beispiel:

  • Last updated on