Erste Schritte mit progressiven Web-Apps

Artikel
07/16/2024

Progressive Web-Apps (PWAs) sind Anwendungen, die Sie mithilfe von Webtechnologien erstellen und die auf allen Geräten aus einer Codebasis installiert und ausgeführt werden können.

Weitere Informationen zu PWAs und ihren Vorteilen finden Sie unter Übersicht über progressive Web-Apps (PWAs).

Dieser Leitfaden richtet sich an Webentwickler, die lernen möchten, PWAs zu erstellen. Weitere Informationen zum Installieren und Ausführen von PWAs finden Sie unter Installieren einer PWA unter Verwenden progressiver Web-Apps in Microsoft Edge.

In diesem Leitfaden erfahren Sie zunächst, wie PWAs funktionieren, erstellen dann Ihre erste einfache PWA, bei der es sich um eine Temperaturkonverter-App handelt, und erfahren dann mehr darüber, wie Sie großartige PWAs erstellen.

Den endgültigen Quellcode der App, die Sie erstellen werden, finden Sie in diesem Leitfaden im Repository für erste Schritte der PWA-Demo-App.

Voraussetzungen

Installieren Sie Visual Studio Code , um Ihren PWA-Quellcode zu bearbeiten.
Installieren Sie Node.js , um sie als lokalen Webserver zu verwenden.
Kenntnisse in HTML, CSS und JavaScript sind ebenfalls von Vorteil.

Die Architektur einer PWA

Progressive Web-Apps werden mit den Programmiersprachen des Webs geschrieben: HTML, CSS und JavaScript, und werden mithilfe von Webservern an Ihre Benutzer verteilt.

Um Ihre App benutzern zur Verfügung zu stellen, stellen Sie sie auf einem Webserver bereit, auf den über HTTPS zugegriffen werden kann. Ihr Server enthält Folgendes:

Back-End-Code: Die Endpunkte, die ihre App benötigt, wenn sie mit dem Internet verbunden sind, um dynamische Inhalte abzurufen, die möglicherweise in einer Datenbank auf Ihrem Server gespeichert werden.
Front-End-Code: Die Ressourcen, die für die Installation der App auf dem Gerät des Benutzers erforderlich sind, z. B. HTML-, CSS- und JavaScript-Code.

Ihr Back-End-Code kann die serverseitigen Sprachen Ihrer Wahl verwenden, z. B. ASP.NET, Java, Node.js oder PHP. Beachten Sie jedoch, dass serverseitige Endpunkte abhängig von der App, die Sie erstellen, möglicherweise nicht einmal erforderlich sind. Die PWA, die Sie in diesem Tutorial erstellen, enthält 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.

Ihr Front-End-Code verwendet nur HTML, CSS, JavaScript und ein JSON-Manifest.

Sie verwenden HTML, um den Inhalt ihrer App zu beschreiben, z. B. Text, Bilder, Textfelder oder Schaltflächen, die auf der Benutzeroberfläche angezeigt werden. Anschließend verwenden Sie CSS, um den HTML-Inhalt in einem Layout zu organisieren und Stile für Elemente bereitzustellen. Sie verwenden JavaScript, um Ihrer Benutzeroberfläche Benutzerinteraktionen hinzuzufügen. Und schließlich verwenden Sie eine JSON-Manifestdatei, die Ihre Anwendung für das Hostbetriebssystem beschreibt.

Obwohl Ihr Front-End-Code über den Webbrowser des Geräts ausgeführt wird, ist die Browserbenutzeroberfläche möglicherweise nicht sichtbar, da Ihre App die Ausführung in einem eigenständigen Fenster auswählen kann.

Zusätzlich zum Benutzeroberflächencode können Sie auch JavaScript verwenden, um Ihre Anwendung schneller, zuverlässiger und netzwerkunabhängiger zu machen, indem Sie eine Service Worker-Datei verwenden. Schließlich enthält Ihr Front-End-Code auch eine JSON-Manifestdatei, die Ihre Anwendung für das Hostbetriebssystem beschreibt.

Das folgende Diagramm zeigt die allgemeine Architektur einer PWA. Der Webserver befindet sich auf der einen Seite des PWA und das Gerät auf der anderen Seite. Das Gerät enthält den Front-End-Code, einschließlich HTML, CSS, JavaScript, dem Service Worker und dem Manifest:

Architekturdiagramm einer PWA

Schritt 1: Starten eines Webservers

PWAs werden mithilfe von Webservern an Benutzer verteilt. Sobald Ihre App bereit ist, stellen Sie sie mithilfe eines Webhostinganbieters im Web bereit. Anschließend können Sie Ihre App aktualisieren, indem Sie die neue Version erneut auf Ihrem Webserver bereitstellen.

Um mit der Entwicklung Ihrer PWA zu beginnen, können Sie stattdessen einen lokalen Webserver verwenden. So starten Sie einen lokalen Server:

Erstellen Sie einen neuen Ordner auf Ihrem Computer, in dem der Webserver ausgeführt wird.

Öffnen Sie dazu eine Eingabeaufforderung und geben Sie Folgendes ein:
```
cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA
```
Starten Sie den Server mithilfe der http-server Node.js Bibliothek:
```
npx http-server
```

Sie verfügen jetzt über einen einfachen lokalen Webserver, der unter http://localhost:8080ausgeführt wird.

Wichtige Teile der Progressive Web Apps-Plattform, z. B. Service Worker, erfordern die Verwendung von HTTPS. Wenn Ihre 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 kostenloses Azure-Konto erstellen. Wenn Sie Ihre Website in Microsoft Azure App Service hosten, wird sie standardmäßig über HTTPS bereitgestellt.

Sie können Ihre Website auch auf GitHub Pages hosten, die auch HTTPS unterstützt.

Zu Debugzwecken erlaubt Microsoft Edge einem localhost Webserver auch die Verwendung der PWA-APIs ohne HTTPS.

Schritt 2: Erstellen der App-Startseite

Bisher sind auf Ihrem Webserver keine Inhalte verfügbar. Erstellen Sie zunächst die erste Seite, die Benutzern angezeigt wird, wenn sie auf Ihre Temperaturkonverter-App zugreifen.

Öffnen Sie Visual Studio Code, wählen Sie Datei>Ordner öffnen aus, und wählen Sie dann das MySamplePWA Verzeichnis aus, das Sie im vorherigen Schritt erstellt haben.

Erstellen Sie eine neue Datei im Projekt, indem Sie STRG+N drücken, den folgenden Inhalt hinzufügen und die Datei als index.htmlspeichern:

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
    <title>Temperature converter</title>
  </head>
  <body>
    <h1>Temperature converter</h1>
  </body>
</html>

Wechseln Sie zu http://localhost:8080 , um Ihre App anzuzeigen:

Die App wird vorerst im Browser ausgeführt und kann nicht installiert werden. Damit die App installiert werden kann, benötigt die App ein Web-App-Manifest.

Schritt 3: 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 die verschiedenen verwendeten Betriebssystemfeatures. Weitere Informationen finden Sie unter Verwenden eines Web-App-Manifests zum Integrieren einer PWA in das Betriebssystem.

So fügen Sie Ihrer App ein App-Manifest hinzu:

Drücken Sie in Visual Studio Code STRG+N , um eine neue Datei mit dem folgenden Inhalt zu erstellen, und speichern Sie die Datei als 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"
        }
    ]
}

Fügen Sie ihrem Projekt ein App-Symbolbild mit dem Namen icon512.png 512 x 512 Pixel hinzu. Sie können das Beispielbild zu Testzwecken verwenden.
Öffnen Sie index.htmlin Visual Studio Code , und fügen Sie den folgenden Code innerhalb des <head> Tags hinzu.
```
<link rel="manifest" href="/manifest.json">
```

Der obige Codeausschnitt verknüpft die neue Web-App-Manifestdatei mit Ihrer Website.

Ihr VS Code-Projekt sollte jetzt in etwa wie folgt aussehen:

Screenshot von VS Code mit dem PWA-Beispielprojekt mit den index.html-, manifest.json- und Symboldateien

Schritt 4: Fortsetzen der Erstellung der Benutzeroberfläche Ihrer App

Da Ihre App nun über eine Web-App-Manifestdatei und eine Startseite verfügt, ist es an der Zeit, die Hauptfunktionen der App zu erstellen.

In diesem Schritt des Tutorials erstellen wir eine App zum Konvertieren von Temperatureinheiten.

Um den Hauptinhalt der Benutzeroberfläche zu erstellen, kopieren Sie den folgenden HTML-Code, und fügen Sie ihn in die index.html Datei ein. Ersetzen Sie dabei das <h1> HTML-Tag:

<form id="converter">
  <label for="input-temp">temperature</label>
  <input type="text" id="input-temp" name="input-temp" value="20" />
  <label for="input-unit">from</label>
  <select id="input-unit" name="input-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <label for="output-unit">to</label>
  <select id="output-unit" name="output-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>

Der obige HTML-Code enthält ein Formular mit mehreren Eingabeelementen, die Ihre App verwendet, um einen Temperaturwert von einer Einheit in eine andere zu konvertieren.

Damit der Konverter funktioniert, verwenden Sie JavaScript-Code. Erstellen Sie eine neue Datei mit dem Namen converter.js in Ihrem Projekt, und fügen Sie ihr den folgenden Code hinzu:

const inputField = document.getElementById('input-temp');
const fromUnitField = document.getElementById('input-unit');
const toUnitField = document.getElementById('output-unit');
const outputField = document.getElementById('output-temp');
const form = document.getElementById('converter');

function convertTemp(value, fromUnit, toUnit) {
  if (fromUnit === 'c') {
    if (toUnit === 'f') {
      return value * 9 / 5 + 32;
    } else if (toUnit === 'k') {
      return value + 273.15;
    }
    return value;
  }
  if (fromUnit === 'f') {
    if (toUnit === 'c') {
      return (value - 32) * 5 / 9;
    } else if (toUnit === 'k') {
      return (value + 459.67) * 5 / 9;
    }
    return value;
  }
  if (fromUnit === 'k') {
    if (toUnit === 'c') {
      return value - 273.15;
    } else if (toUnit === 'f') {
      return value * 9 / 5 - 459.67;
    }
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  const fromUnit = fromUnitField.value;
  const toUnit = toUnitField.value;

  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

Öffnen Sie die index.html Datei erneut, und fügen Sie den folgenden Code nach dem schließenden </form> Tag hinzu, um die JavaScript-Datei zu laden:
```
<script src="converter.js"></script>
```

Fügen Sie der App nun einen CSS-Stil hinzu, um sie visuell ansprechender zu gestalten. Erstellen Sie eine neue Datei namens converter.css in Ihrem Projekt, und fügen Sie ihr den folgenden Code hinzu:

html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
}

#converter {
  width: 15rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 0 2rem 0 #0001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#converter input, #converter select {
  font-family: inherit;
  font-size: inherit;
  margin-block-end: 1rem;
  text-align: center;
  width: 10rem;
}

#converter #output-temp {
  font-size: 2rem;
  font-weight: bold;
}

Öffnen Sie index.html erneut, und verweisen Sie darin auf die neue CSS-Datei, indem Sie den folgenden Code innerhalb des <head> Tags hinzufügen:
```
<link rel="stylesheet" href="converter.css">
```
Ihr Visual Studio Code-Projekt sollte jetzt in etwa wie folgt aussehen:
Wechseln Sie zu http://localhost:8080 , um Ihre App anzuzeigen:

Ihre App ist jetzt nützlich und kann von Benutzern als eigenständige App installiert werden. Erstellen Sie vor der Installation der App einen Service Worker, damit die App offline funktioniert.

Schritt 5: Hinzufügen eines Service Workers

Servicemitarbeiter sind eine Schlüsseltechnologie, die pwAs schnell und unabhängig von Netzwerkbedingungen macht.

Ein Service Worker ist ein spezialisierter Web-Worker , der Netzwerkanforderungen von Ihrer PWA abfangen kann und Szenarien wie die folgenden ermöglicht:

Offlineunterstützung, einschließlich zeitweiliger Verbindungen.
Erweitertes Zwischenspeichern.
Ausführen von Hintergrundaufgaben, z. B. Empfangen von PUSH-Nachrichten, Hinzufügen von Signalen zum App-Symbol oder Abrufen von Daten von einem Server.

Eine PWA benötigt keinen Service Worker für Microsoft Edge, um die App installieren zu können. Es wird jedoch empfohlen, Einen Service Worker zu Ihrer PWA hinzuzufügen, um es schneller zu machen und Ihre PWA zuverlässiger zu machen, z. B. wenn Ihr Gerät über eine zeitweilige Netzwerkverbindung verfügt oder offline ist.

Ein Service Worker wird in einer JavaScript-Datei definiert, die von Ihrer App geladen wird. So fügen Sie ihrem Projekt einen Service Worker hinzu:

Erstellen Sie in Visual Studio Code eine neue Datei (STRG+N), fügen Sie den folgenden Inhalt hinzu, und speichern Sie die Datei als 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.
        }
    }
  })());
});

Die sw.js Datei fungiert als Service Worker Ihrer PWA. Der obige Code lauscht auf das install Ereignis, das ausgelöst wird, wenn der Benutzer Ihre App installiert, und verwendet es, um die Ressourcen zwischenzuspeichern, die Ihre App benötigt, um offline zu funktionieren, z. B. die anfängliche HTML-Seite, die Konverter-JavaScript-Datei und die CSS-Konverterdatei.

Der Code fängt fetch auch 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, und wenn dies fehlschlägt, versuchen Sie, vom Server herunterzuladen.

Öffnen Sie index.html den folgenden Code, und fügen Sie am Ende des Tags den <body> folgenden Code hinzu, um Ihren Service Worker zu registrieren:
```
<script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>
```

So bestätigen Sie, dass Ihr Service Worker ausgeführt wird:

Navigieren Sie in Microsoft Edge zu http://localhost:8080.
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Öffnen Sie das Anwendungstool , und klicken Sie dann auf Service Worker. Wenn der Service Worker nicht angezeigt wird, aktualisieren Sie die Seite.
Zeigen Sie den Service Worker-Cache an, indem Sie Cachespeicher erweitern und temperaturkonverter-v1 auswählen. Alle vom Service Worker zwischengespeicherten Ressourcen sollten angezeigt werden. Die vom Service Worker zwischengespeicherten Ressourcen umfassen das App-Symbol, das App-Manifest und die Startseite.
Probieren Sie Ihre PWA als Offline-App aus. Öffnen Sie in DevTools das Tool Netzwerk , und ändern Sie den Drosselungswert in Offline.
Aktualisieren Sie Ihre App. Es sollte weiterhin ordnungsgemäß im Browser angezeigt werden, indem zwischengespeicherte Ressourcen verwendet werden, die vom Service Worker bereitgestellt werden.

Schritt 6: Installieren der App

Da Ihre App nun über ein Web-App-Manifest verfügt, können unterstützende Browser Ihre App als PWA installieren.

In Microsoft Edge wird nach dem Aktualisieren Ihrer App die Schaltfläche App verfügbar in der Adressleiste angezeigt. Wenn Sie auf die Schaltfläche App verfügbar klicken, werden Sie aufgefordert, die App lokal zu installieren.

Klicken Sie auf Installieren , um die App lokal zu installieren. Nach Abschluss der Installation wird Ihre App in einem eigenen Fenster und einem eigenen Anwendungssymbol auf der Taskleiste angezeigt.

Die Beispiel-PWA, die in einem eigenen Fenster installiert und ausgeführt wird

Weitere Informationen zum Installieren von PWAs finden Sie unter Verwenden progressiver Web-Apps in Microsoft Edge.

Nächste Schritte

Der Temperaturkonverter PWA, den Sie bisher erstellt haben, ist nur eine kleine Stichprobe der Möglichkeiten von PWAs. Die vorherigen Schritte sind wichtige Voraussetzungen für jede PWA, aber es gibt wichtige bewährte Methoden, mit denen sich Ihre PWA bei der Installation wie eine echte App anfühlt.

Wenn Benutzer Anwendungen installieren, haben sie bestimmte Erwartungen, was diese Anwendungen tun können. Zum Beispiel:

Benutzer erwarten, dass Apps offline funktionieren.
Benutzer erwarten, dass Apps in das Betriebssystem integriert werden, z. B. durch die Verarbeitung von Dateien.
Benutzer erwarten, dass Apps nicht triviale Rechenaufgaben ausführen.
Benutzer erwarten apps in App Stores zu finden.

Informationen zum Erstellen einer hervorragenden PWA finden Sie unter Bewährte Methoden für PWAs.

Weitere Informationen

Erste Schritte mit progressiven Web-Apps (Workshop).

Freigeben über