Progressive Web-Apps: Vom Tab zur Taskleiste

1. Willkommen

In diesem Lab machen Sie eine vorhandene Webanwendung installierbar. Dies ist das vierte in einer Reihe von Codelabs für den Workshop zu progressiven Web-Apps. Das vorherige Codelab war IndexedDB. Diese Reihe umfasst vier weitere Codelabs.

Lerninhalte

  • Service Worker manuell schreiben
  • Service Worker zu einer vorhandenen Webanwendung hinzufügen
  • Service Worker und Cache Storage API verwenden, um Ressourcen offline verfügbar zu machen

Wichtige Informationen

  • Einfaches HTML und JavaScript

Voraussetzungen

2. Einrichtung

Klonen oder laden Sie zuerst den Starter-Code herunter, der für dieses Codelab benötigt wird:

Wenn Sie das Repository klonen, achten Sie darauf, dass Sie sich im pwa04--tab-to-taskbar-Branch befinden. Die ZIP-Datei enthält auch den Code für diesen Zweig.

Für diese Codebasis ist Node.js 14 oder höher erforderlich. Sobald Sie den Code haben, führen Sie npm ci über die Befehlszeile im Ordner des Codes aus, um alle erforderlichen Abhängigkeiten zu installieren. Führen Sie dann npm start aus, um den Entwicklungsserver für das Codelab zu starten.

Die README.md-Datei des Quellcodes enthält eine Erklärung für alle verteilten Dateien. Außerdem sind die folgenden Dateien wichtig, mit denen Sie in diesem Codelab arbeiten werden:

Schlüsseldateien

  • index.html – HTML der Hauptanwendung

3. Web-App-Manifest erstellen

Web-App-Manifestdateien beschreiben Ihre PWA, sodass ein Browser in Verbindung mit einem funktionierenden Service Worker weiß, dass Ihre Web-App installiert werden kann und wie sie auf dem Gerät dargestellt werden soll, auf dem sie installiert wird. Zuerst muss sie jedoch erstellt werden. Fügen Sie im Ordner public Ihrer Web-App eine Datei mit dem Namen manifest.json hinzu und fügen Sie Folgendes ein:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Vergessen Sie nicht, ein Apple Touch-Symbol für iOS-Geräte einzufügen. Fügen Sie die folgende Codezeile direkt nach dem <title>-Tag in <head> in index.html ein.

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Erklärung

Dieses Manifest enthält erforderliche, empfohlene und Werbefelder. Es ist also sehr umfangreich. Zuerst die erforderlichen Felder, in denen der Name, die Start-URL, der Anzeigemodus und die Symbole der PWA definiert sind. Das letzte Symbol ist ein maskierbares Symbol, das je nach Benutzeroberfläche eines Geräts mehrere Symbolanzeigen ermöglicht. Als Nächstes folgen die Felder für das empfohlene Design und die empfohlene Hintergrundfarbe. Schließlich gibt es noch die Angebotsfelder, eine Beschreibung und Kategorien, in die diese PWA passt. Wenn dieses Manifest an eine PWA angehängt wird, wird damit festgelegt, wie die installierte App der PWA angezeigt und verwaltet wird.

4. Manifest an PWA anhängen

Nachdem die Manifestdatei erstellt wurde, muss sie angehängt werden, damit sie mit der PWA verknüpft wird. Öffnen Sie dazu index.html und fügen Sie Folgendes direkt unter dem <title>-Tag in <head> ein:

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

Erklärung

Ein Manifestlink informiert Browser, die ihn unterstützen, dass das verlinkte Web-App-Manifest die aktuelle Website beschreibt. Wenn das Manifest gültig und verfügbar ist, ein funktionierender Service Worker vorhanden ist und die Web-App alle zusätzlichen browserspezifischen Installationskriterien erfüllt, kann Ihre App direkt auf dem Gerät eines Nutzers installiert werden.

5. Verknüpfungen hinzufügen

Eine gute Möglichkeit, Ihre PWA stärker in ein Gerät zu integrieren, besteht darin, Kontextmenü-Verknüpfungen zu bestimmten Funktionen in Ihrer App bereitzustellen. Mit dem Schalter für den Nachtmodus in der PWA kann der Modus ausgewählt werden, indem der Abfrageparameter mode auf night oder day gesetzt wird. Richten Sie in manifest.json zwei Verknüpfungen ein, die Folgendes tun:

  • Startet die PWA entweder im Modus night oder day.
  • Verwendet /images/logo.svg in der Größe 150x150 für ein Symbol

6. Glückwunsch!

Sie haben gerade gelernt, wie Sie eine Manifestdatei für Web-Apps erstellen, sie an eine Webseite anhängen und App-Verknüpfungen hinzufügen, wenn sie installiert ist.

Das nächste Codelab in der Reihe ist Aufforderung und Messung der Installation.