Progressive Web-Apps: Ihre PWA optimieren

1. Willkommen

In diesem Lab nehmen Sie eine vorhandene Webanwendung und fügen ihr erweiterte Funktionen hinzu. Dies ist das sechste in einer Reihe von Codelabs zum Workshop zu progressiven Web-Apps. Das vorherige Codelab hieß Aufforderungen und Messung von Installationen. Diese Reihe umfasst zwei weitere Codelabs.

Lerninhalte

  • Dateien aus dem Dateisystem des Nutzers mit der File System Access API öffnen und speichern
  • Installierte PWA mit der File Handling API als Dateihandler registrieren
  • Mit der Multi-Screen Window Placement API den richtigen Bildschirm für das Öffnen eines Fensters auswählen
  • Verhindern, dass ein Bildschirm in den Ruhemodus wechselt, mit der Screen Wake Lock API

Wichtige Informationen

  • JavaScript

Voraussetzungen

  • Ein Browser, der die oben genannten APIs unterstützt. Für einige APIs müssen Sie möglicherweise einen Browser mit einem aktiven Developer Trial oder Origin Trial verwenden.

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 pwa05--empowering-your-pwa-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

  • js/lib/actions.js: Stellt eine Basisklasse für das Menü bereit.

Wichtiger Hinweis zur Architektur

In diesem Codelab bearbeiten Sie js/lib/action.js, das Aktionen für die verschiedenen Schaltflächen im Menü der App verwaltet. Sie können auf jede Eigenschaft im Konstruktor des initialisierten Menüs zugreifen, einschließlich this.editor für eine Instanz des Haupttexteditors. Zwei wichtige Editormethoden, die Sie in diesem Codelab verwenden werden, sind:

  • this.editor.setContent(content) – Legt den Inhalt des Editors auf das bereitgestellte Inhaltsargument fest.
  • this.editor.content(): Ruft den aktuellen Inhalt des Editors ab.

3. Dateien verwalten

Dank der File System Access API ist es jetzt möglich, Dateien auf dem Computer eines Nutzers zu öffnen, zu speichern und neue Dateien zu erstellen. In Kombination mit der File Handling API, mit der Nutzer Dateien direkt in Ihrer PWA öffnen können, kann sich Ihre PWA nahtlos in den Alltag Ihrer Nutzer einfügen.

In der App öffnen

Die erste Aktion, die Sie einbinden müssen, ist das Öffnen einer Datei aus dem Dateisystem des Nutzers in der App. Schreiben Sie in js/lib/actions.js in der Methode open der Klasse Actions Code, der Folgendes ausführt:

  • Öffnen Sie eine Dateiauswahl, in der die Datei text/markdown mit den Erweiterungen .md oder .markdown ausgewählt werden kann.
  • Legen Sie den Titel der Seite auf den Namen der geöffneten Datei plus PWA Edit fest.
  • Speichern Sie den Dateihandler unter this.handler.
  • Inhalt des Editors auf den Textinhalt der Datei festlegen
  • Speichern Sie den Handler im settings-Objektspeicher in der IndexedDB-Datenbank settings-store.

Positiv: Denken Sie daran, dass Klassenkonstruktoren keine async-Funktionen sein können, aber Sie können Promises in ihnen aufrufen.

Da Sie jetzt eine Datei öffnen und speichern können, welche Datei zwischen den Ladevorgängen geöffnet ist, müssen Sie noch zwei weitere Dinge tun: den Handler beim Laden der App wieder einrichten und ihn aufheben, wenn der Nutzer die App zurücksetzt.

Um das zu erreichen, gehen Sie im Konstruktor der Klasse Actions in js/lib/actions.js so vor:

  • settings-store-Datenbank öffnen
  • Gespeicherten Handler aus dem settings-Objektspeicher abrufen
  • Setzen Sie this.handler auf den abgerufenen Wert und den Titel der Seite auf den Dateinamen des Handlers (plus PWA Edit), falls ein gespeicherter Handler vorhanden ist.

Um den Status der App zurückzusetzen (was mit CTRL/CMD + Shift + R erreicht werden kann), aktualisieren Sie die Methode reset der Klasse Actions in js/lib/actions.js, damit Folgendes ausgeführt wird:

  • Dokumenttitel auf PWA Edit festlegen
  • Inhalt des Editors auf einen leeren String setzen
  • Setzen Sie this.handler auf null.
  • Löschen Sie den gespeicherten Handler aus dem settings-Objektspeicher.

Über das Dateisystem des Nutzers öffnen

Nachdem Sie eine Datei über Ihre App öffnen können, sollten Sie Nutzern ermöglichen, Ihre App mit ihrer Datei zu öffnen. Wenn Sie Ihre App als Dateihandler für ein Gerät registrieren, können Nutzer Dateien in Ihrer App von überall in ihrem Dateisystem aus öffnen.

Negativ : Möglicherweise müssen Sie eine Entwickler- oder Origin-Testversion aktivieren, damit das funktioniert. Wenn Sie eine Developer Trial aktivieren müssen, empfehlen wir, dies in einer Kopie von Chrome Canary anstelle Ihres normalen Browsers zu tun. Wenn Sie einen Origin Trial aktivieren müssen, registrieren Sie sich wie gewohnt dafür und fügen Sie das -Tag zu index.html hinzu.

Fügen Sie zuerst in manifest.json einen file_handlers-Eintrag hinzu, der Folgendes ausführt:

  • Öffnet: /
  • Akzeptiert text/markdown mit den Dateiendungen .md oder .markdown.

Dadurch können Nutzer Dateien mit Ihrer App öffnen, die Dateien werden aber nicht tatsächlich in Ihrer App geöffnet. Gehen Sie dazu in der Klasse Actions in js/lib/actions.js so vor:

  • Fügen Sie im Konstruktor einen window.launchQueue-Consumer hinzu und rufen Sie this.open mit dem Handler auf, sofern vorhanden.
  • this.open wurde aktualisiert, um einen optionalen Launch-Handler
      zu akzeptieren.
    • Wenn sie vorhanden ist und eine Instanz von FileSystemFileHandle ist, verwenden Sie sie als Dateihandler für die Funktion.
    • Wenn nicht, öffnen Sie die Dateiauswahl.

Installieren Sie dann Ihre PWA und versuchen Sie, eine Datei damit aus dem Dateisystem zu öffnen.

Datei speichern

Es gibt zwei verschiedene Speicherpfade, die ein Nutzer einschlagen kann: Änderungen an einer bereits geöffneten Datei speichern oder in einer neuen Datei speichern. Mit der File System Access API wird beim Speichern in einer neuen Datei tatsächlich eine neue Datei erstellt und ein Dateihandler zurückgegeben. Beginnen wir also mit dem Speichern über einen vorhandenen Handler.

Führen Sie in der Methode save in der Klasse Actions in js/lib/actions.js folgende Schritte aus:

  • Rufen Sie den Alias entweder aus this.handler ab oder, falls er nicht vorhanden ist, den gespeicherten Alias aus der Datenbank.
  • FileSystemWritableFileStream des Dateihandlers erstellen
  • Inhalte des Editors in den Stream schreiben
  • Stream schließen

Sobald Sie eine Datei speichern können, ist es an der Zeit, „Speichern unter“ zu implementieren. Gehen Sie dazu in der Methode saveAs in der Klasse Actions in js/lib/actions.js so vor:

  • Zeige die Dateiauswahl zum Speichern an und beschreibe sie als Markdown File. Sorge dafür, dass text/markdown-Dateien mit der Erweiterung .md akzeptiert werden.
  • this.handler auf den zurückgegebenen Handler festlegen
  • Handler im settings-Objektspeicher speichern
  • Warten Sie, bis this.save abgeschlossen ist, um die Inhalte in der neu erstellten Datei zu speichern.

Kehren Sie dann zur Methode save zurück und prüfen Sie, ob handler vorhanden ist, bevor Sie versuchen, darauf zuzugreifen. Wenn handler nicht vorhanden ist, warten Sie stattdessen, bis this.saveAs abgeschlossen ist.

4. Vorschau anzeigen

Nutzer möchten in einem Markdown-Editor eine Vorschau der gerenderten Ausgabe sehen. Mit der Window Management API öffnen Sie eine Vorschau der gerenderten Inhalte auf dem primären Bildschirm des Nutzers.

Erstellen Sie zuerst eine Datei mit dem Namen js/preview.js und fügen Sie den folgenden Code hinzu, damit beim Laden eine Vorschau angezeigt wird:

import { openDB } from 'idb';
import { marked } from 'marked';

window.addEventListener('DOMContentLoaded', async () => {
  const preview = document.querySelector('.preview');
  const db = await openDB('settings-store');
  const content = (await db.get('settings', 'content')) || '';

  preview.innerHTML = marked(content);
});

Die Vorschau sollte sich so verhalten:

  • Wenn ein Nutzer auf die Schaltfläche „Vorschau“ klickt und keine Vorschau geöffnet ist, sollte die Vorschau geöffnet werden.
  • Wenn ein Nutzer auf die Schaltfläche „Vorschau“ klickt und eine Vorschau geöffnet ist, sollte die Vorschau geschlossen werden.
  • Wenn der Nutzer die PWA schließt oder aktualisiert, sollte die Vorschau geschlossen werden.

Beginnen Sie mit der Bearbeitung der Methode preview in der Klasse Actions in js/lib/actions.js, um Folgendes zu tun:

  • Verfügbare Bildschirme mit der Window Management API abrufen
  • Bildschirme filtern, um den primären Bildschirm zu finden
  • Öffne ein Fenster für /preview mit dem Titel Markdown preview, das die Hälfte der verfügbaren Breite und die gesamte verfügbare Höhe des primären Bildschirms einnimmt und so positioniert ist, dass es die gesamte verfügbare rechte Hälfte dieses Bildschirms einnimmt. Die verfügbaren Dimensionen schließen reservierte Bereiche des Bildschirms aus, z. B. eine Systemmenüleiste, Symbolleiste, Status- oder Standortleiste.
  • Speichern Sie dieses geöffnete Fenster in this.previewWindow.
  • Prüfen Sie oben in der Methode, ob this.previewWindow vorhanden ist. Wenn ja, schließen Sie das Fenster und heben Sie die Einstellung für this.previewWindow auf, anstatt eine Fenster-Vorschau zu öffnen.

Führen Sie schließlich am Ende des Konstruktors der Klasse Actions in js/lib/actions.js Folgendes aus:

  • Schließe this.previewWindow während des beforeunload-Events.

5. Fokus

Außerdem möchten wir Nutzern einen ablenkungsfreien Schreibmodus anbieten. „Ablenkungsfrei“ bedeutet nicht nur, dass keine anderen Apps im Vordergrund angezeigt werden, sondern auch, dass der Bildschirm des Nutzers nicht in den Ruhemodus wechselt. Dazu verwenden Sie die Screen Wake Lock API.

Die Schaltfläche für den Wake Lock funktioniert genau wie die Vorschau-Schaltfläche und wechselt zwischen dem Ein- und dem Aus-Status. Gehen Sie dazu in der Methode focus der Klasse Actions in js/lib/actions.js so vor:

  • Prüfen, ob das Dokument ein Vollbildelement enthält
  • Falls ja, gehen Sie so vor:
    • Vollbildmodus beenden
    • Wenn this.wakeLock vorhanden ist, gib den Wakelock frei und setze this.wakeLock zurück.
  • Wenn nicht:
    • Wake-Lock-Sentinel anfordern und auf this.wakeLock festlegen
    • Fordern Sie an, dass der Text des Dokuments im Vollbildmodus angezeigt wird.

6. Glückwunsch!

Sie haben gelernt, wie Sie Systemdateien verwalten und Ihre PWA mit einem System über die File System Access API und die File Handling API verknüpfen, Fenster auf verschiedenen Bildschirmen mit der Window Management API öffnen und verhindern, dass ein Bildschirm mit der Screen Wake Lock API in den Ruhezustand wechselt.

Das nächste Codelab in der Reihe ist Service Worker Includes.