Erste Schritte mit progressiven Web-Apps

  • Artikel

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 von progressiven 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.

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

Zusätzlich zum Benutzeroberflächencode verwenden Sie javaScript, 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:

  1. 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

  2. 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 bieten jetzt standardmäßig HTTPS an, aber wenn Ihr Host dies nicht tut, 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 auf dem 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.

  1. Ö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.

  2. 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>

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

    Ausführen Ihrer neuen PWA auf localhost

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. den Namen, die Beschreibung, Symbole und die verschiedenen verwendeten Betriebssystemfeatures.

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

  1. 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"
        }
    ]
}

  2. 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.

  3. Ö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 dateien index.html, manifest.json und symbol

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 Standard App-Funktionalität zu erstellen.

In diesem Schritt des Tutorials erstellen wir eine einfache App für die Konvertierung von Temperatureinheiten.

  1. Um den inhalt der Standard Benutzeroberfläche zu erstellen, kopieren Sie den folgenden HTML-Code, und fügen Sie ihn in die index.html Datei ein, und 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.

  2. 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();
});

  3. Ö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>

  4. Fügen Sie der App nun einen CSS-Stil hinzu, um sie visuell interessanter 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;
}

  5. Ö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:

    Das PWA-Beispielprojekt in Visual Studio Code mit den Dateien index.html, converter.js, converter.css und manifest.json

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

    Ausführen Ihrer neuen PWA mit dem Front-End-Code auf localhost

Ihre App bietet jetzt nützliche Funktionen, kann aber noch nicht installiert werden, da es keinen Service Worker gibt. Im nächsten Schritt können Sie Ihre App installieren, indem Sie einen Service Worker erstellen.

Schritt 5: Hinzufügen eines Service Workers

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

Service Worker sind spezialisierte Web-Worker , die Netzwerkanforderungen von Ihrer PWA abfangen und Szenarien ermöglichen, die zuvor auf native Apps beschränkt waren, einschließlich:

  • Offlineunterstützung.
  • 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.

Damit Microsoft Edge die App installieren kann, muss Ihre App über eine Service Worker-Datei verfügen.

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:

  1. 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 und verwendet es, um alle Ressourcen zwischenzuspeichern, die die App für die Funktion benötigt: die HTML-Startseite, die JavaScript-Konverterdatei 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.

  2. Ö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:

  1. Navigieren Sie in Microsoft Edge zu http://localhost:8080.

  2. 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.

  3. Öffnen Sie das Anwendungstool und dann Service Worker. Wenn der Service Worker nicht angezeigt wird, aktualisieren Sie die Seite.

    Das DevTools-Anwendungstool, das den Bereich Service Worker anzeigt, wobei der neue sw.js Worker ausgeführt wird

  4. 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.

    DevTools: Zeigt an, wo die zwischengespeicherten Ressourcen angezeigt werden.

  5. Probieren Sie Ihre PWA als Offline-App aus. Öffnen Sie in DevTools das Tool Netzwerk , und ändern Sie den Drosselungswert in Offline.

  6. Aktualisieren Sie Ihre App. Es sollte weiterhin ordnungsgemäß im Browser angezeigt werden, indem zwischengespeicherte Ressourcen verwendet werden, die vom Service Worker bereitgestellt werden.

    DevTools: Zeigt an, wo der Drosselungswert auf Offline umgestellt werden soll

Schritt 6: Installieren der App

Da Ihre App nun über ein Web-App-Manifest und einen Service Worker verfügt, können unterstützende Browser sie 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.

Microsoft Edge, mit der Beispiel-PWA auf einer Registerkarte. Auf die Schaltfläche

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 von progressiven Web-Apps in Microsoft Edge.

Nächste Schritte

Der einfache Temperaturkonverter PWA, den Sie bisher gebaut haben, kratzt nur an der Oberfläche, was PWAs leisten können. 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