Leistungsstarke PWAs

Einige PWA-Funktionen sind allgemein bekannt, z. B. die Notifications API, mit der eine Web-App Plattformbenachrichtigungen empfangen und veröffentlichen kann. Es gibt jedoch eine Reihe neuer und bevorstehender Funktionen, die Ihre Apps im Web noch leistungsfähiger machen. Das Chromium-Projekt Web Capabilities, auch bekannt als Project Fugu 🐡, zielt darauf ab, neue, leistungsstarke Webstandards zu ermöglichen und gleichzeitig die einzigartigen Eigenschaften des Webs zu bewahren: nutzerorientierte Sicherheit, geringe Reibung und plattformübergreifende Kompatibilität.

App-Lücke schließen

Die meisten dieser Funktionen zielen darauf ab, die Lücke zwischen herkömmlichen Desktop- oder mobilen Apps und Web-Apps zu schließen. Die ersten wichtigen Funktionen, die ausgeliefert werden, ermöglichen Web-Apps den Zugriff auf die Kontaktauswahl und Freigabefunktionen der Plattform. Installierte PWAs können sich als Plattformfreigabeziel registrieren und Symbolbadges anzeigen. Das sind nur einige Beispiele.

Jede Funktion durchläuft einen umfassenden Standardisierungsprozess, um Feedback von der Community einzuholen, das in die API einfließt. So wird sichergestellt, dass das endgültige Design sicher, vertraulich und vertrauenswürdig ist. Neue Funktionen werden in einem offenen Tracker erfasst und können in eine von fünf Kategorien unterteilt werden:

VERSANDT

Kann in der aktuellen stabilen Version von Chrome verwendet werden. Kann zuverlässig verwendet werden, sofern die Verwendung ordnungsgemäß erkannt wird.

IM ORIGIN-TEST

Die API ist als Ursprungstest (Origin Trial, OT) für Chrome verfügbar. So können experimentelle Funktionen und APIs vom Chrome-Team in der Praxis validiert werden. Außerdem können Sie Feedback zur Benutzerfreundlichkeit und Effektivität der API geben. OTs sind optional und ermöglichen es Ihnen, diese Funktion mit Ihren Nutzern zu testen, ohne dass diese spezielle Flags in ihrem Browser aktivieren müssen. APIs können sich nach einem OT ändern. Außerdem sind OTs vor dem Start für einen bestimmten Zeitraum nicht verfügbar. Sie sollten daher nicht als Mechanismus für den Vorabstart neuer APIs betrachtet werden.

IM ENTWICKLER-TEST

In Chrome hinter einem Flag verfügbar. Diese APIs sind experimentell und befinden sich noch in der aktiven Entwicklung. Sie sind nicht für die Produktion geeignet, da es wahrscheinlich Fehler gibt und sich die APIs ändern werden. Entwickler können diese Zeit nutzen, um experimentelle Funktionen selbst auszuprobieren. Sie sollten ihre Nutzer jedoch nicht anweisen, Flags zu aktivieren, um ihre Funktionen zu nutzen.

ABFAHRT:

Die Entwicklung hat begonnen, aber es gibt derzeit keine nutzbare API.

WIRD BERÜCKSICHTIGT

APIs, für die Nutzer Interesse bekundet haben, deren Implementierung aber noch nicht begonnen hat. Wenn eine API noch nicht gestartet wurde, markieren Sie sie mit einem Stern oder fügen Sie Ihre Anwendungsfälle dem entsprechenden Problem hinzu, damit das Chromium-Team sie priorisieren kann.

PWA optimieren

Wenn Sie Ihre PWA entwickeln, sollten Sie die folgenden APIs und Best Practices implementieren, um die Nutzerfreundlichkeit Ihrer Web-App deutlich zu verbessern. Je nach allgemeinem Anwendungsfall kann Ihre App von einer oder mehreren APIs profitieren, um die Nutzerfreundlichkeit insgesamt zu verbessern. APIs, die mit 🔮 gekennzeichnet sind, befinden sich in einem Origin-Trial, APIs mit 🚩 in einem Entwickler-Trial und APIs mit 📱 sind derzeit auf Mobilgeräten stabil. Die Implementierung auf Computern hat begonnen. Alle anderen erwähnten APIs sind stabil, aber möglicherweise nicht auf allen Plattformen verfügbar. Es werden nur APIs berücksichtigt, die in den aktuellen stabilen, Beta- (mit β gekennzeichnet) oder Canary-Versionen (mit α gekennzeichnet) von Chrome verfügbar sind. Diese Liste wird regelmäßig aktualisiert, wenn APIs veröffentlicht werden.

App-Installation

Wenn Sie möchten, dass Ihre Web-App neben anderen installierten Apps verfügbar ist, z. B. in der Taskleiste, im Launcher, auf dem Desktop und in der App-Übersicht, sollten Sie die folgenden APIs implementieren, damit Ihre PWA installierbar ist. Optional diesem Codelab folgen.

  • Web-App-Manifest: Enthält Informationen zu Ihrer Web-App für den Browser und das Betriebssystem, z. B. Name, Logo, Start-URL und Darstellung der Web-App.
  • Service Worker und Cache Storage API: Ermöglichen es Ihrer Web-App, einen Proxyserver zu erstellen und zu steuern, wie der Browsercache behandelt wird. Ein Service Worker, der auf das Fetch-Ereignis eines Browsers reagiert und auf eine Fetch-Anfrage für die im Web-App-Manifest angegebene Start-URL mit Inhalten antworten kann, wenn Offlinebetrieb erforderlich ist, ist eine Voraussetzung für die Installierbarkeit.
  • Bei der Anmeldung ausführen 🚩β: Hiermit können Sie Ihre PWA so konfigurieren, dass sie automatisch gestartet wird, wenn sich der Nutzer anmeldet.
  • App-Symbol-Verknüpfungen: Auf unterstützten Plattformen können Sie über das Kontextmenü des installierten App-Symbols (z. B. durch langes Drücken auf Mobilgeräten oder durch Klicken mit der rechten Maustaste auf Computern) Verknüpfungen zu bestimmten URLs in Ihrer Web-App bereitstellen (z. B. zum Starten eines Chats oder zum Hochladen eines Fotos).
  • getInstalledRelatedApps: Ermöglicht es Ihrer Web-App, zu prüfen, ob Ihre PWA, Android-App oder Windows-App (UWP) bereits installiert wurde.

Adaptiv und barrierefrei

Wenn Ihre Web-App von Nutzern mit unterschiedlichen Geräten und unterschiedlichen körperlichen und/oder geistigen Anforderungen verwendet werden soll, sollten Sie Folgendes implementieren:

  • Responsives Design: Sorgen Sie dafür, dass Ihre Web-App auf kleinen bis großen Bildschirmen nutzbar ist oder zumindest nicht fehlerhaft dargestellt wird. So können Nutzer mit verschiedenen Geräten und Fensteranordnungen Ihre App verwenden.
  • WCAG 2.0-Richtlinien: Sorgen Sie dafür, dass Ihre Web-App von Menschen mit unterschiedlichen körperlichen und geistigen Fähigkeiten verwendet werden kann, nicht nur von neurotypischen und körperlich gesunden Personen. Weitere Informationen finden Sie in den Do’s and don’ts on designing for accessibility der britischen Regierung.

Monetarisierung und Vertrieb

  • Web Payments: Flexible Standardschnittstelle für Onlinezahlungen, die in jedem Browser und auf jedem Gerät sowie mit jedem Zahlungs- oder Zahlungsdienstanbieter funktioniert.
  • Digital Goods API 🔮: Flexible Standardschnittstelle zum Abfragen und Verwalten von In-App-Käufen aus Webanwendungen, einschließlich Unterstützung für gängige Kaufarten wie Einmalkäufe, wiederholbare Käufe (z. B. In-Game-Juwelen/Währung) und Abos. Funktioniert in Verbindung mit Web Payments.
  • Vertrauenswürdige Web-Aktivität: Erstellen Sie eine Android-App für Ihre PWA, damit sie in kompatiblen Shops wie Google Play zum Download angeboten werden kann.

Zugriff auf die Zwischenablage

  • Async Clipboard: Text und Bilder in die Zwischenablage des Nutzers lesen und schreiben sowie auf Kopier- und Einfügeereignisse des Nutzers warten.

Benachrichtigungen

Wenn Ihre Web-App Nutzer benachrichtigen muss, z. B. bei einer Chat-App oder wenn im Hintergrund eine Codierung erfolgt, sollten Sie die folgenden APIs implementieren:

  • Web-Push-Benachrichtigungen: Wenn ein Nutzer diese Option aktiviert hat, kann Ihre Web-App Push-Benachrichtigungen an ihn senden.
  • Badging API: Mit dieser API kann Ihre installierte Web-App ein anwendungsweites Symbol auf dem App-Symbol festlegen, optional mit einer Zahl.
  • Auslöser für Benachrichtigungen 🔮: Benachrichtigungen an Nutzer senden, wenn eine Auslösebedingung erfüllt ist, z. B. zeit- oder standortbasiert (z. B. Benachrichtigungen zu Kalenderereignissen)

Intent-Freigabe und Protokollverarbeitung

  • Registrierung von URL-Protokollen 🚩α: Webanwendungen können sich über ihr Installationsmanifest als Handler für benutzerdefinierte URL-Protokolle/-Schemata registrieren.
  • Web Share: Mit der integrierten System-UI für die Freigabe auf unterstützten Geräten können Nutzer URLs, Text und Dateien für andere auf ihrem Gerät installierte Apps freigeben. Ihre App muss nicht installiert sein.
  • Web Share Target: Ihre installierte PWA ist auf unterstützten Geräten in der integrierten Benutzeroberfläche für das Teilen von Systemen verfügbar. So können Nutzer Text und Dateien aus anderen Apps für Ihre App freigeben.

Dateien öffnen und speichern

  • File Handling API 🚩: Mit dieser API kann Ihre installierte Web-App beim Betriebssystem registrieren, dass sie Dateien mit bestimmten MIME-Typen und/oder Dateiendungen verarbeiten (lesen/streamen/bearbeiten) kann. So kann sie beispielsweise in der Liste „Öffnen mit…“ eines Kontextmenüs angezeigt werden.
  • File System Access API: Robuster Zugriff auf das Dateisystem des Nutzers pro Sitzung, der die folgenden Interaktionen ermöglicht (je nach Bedarf Ihrer App)
    • Dateien aus dem lokalen Dateisystem lesen: Zeigt eine Dateiauswahl an und ermöglicht es dem Nutzer, eine oder optional mehrere Dateien zum Öffnen auszuwählen. Die zulässigen Dateitypen können nach MIME-Typ und Erweiterung eingeschränkt werden.
    • Änderungen an geöffneter Datei speichern: Änderungen an einer mit FSA geöffneten Datei werden direkt gespeichert, ohne dass der Nutzer aufgefordert wird, einen Speicherort auszuwählen oder eine Kopie herunterzuladen.
    • Neue Datei im lokalen Dateisystem erstellen: Ermöglicht es einem Nutzer, eine neue Datei (optional mit Standarddateiendung) in seinem lokalen Dateisystem zu erstellen, auf die Ihre App dann Zugriff hat, um sie zu speichern.
    • Zuletzt geöffnete Dateien: Mit der File System Access API erstellte Dateihandler können in IndexedDB gespeichert werden. So können Sie zwischen Nutzersitzungen eine Liste der zuletzt verwendeten Dateien anzeigen (die Bearbeitungsberechtigungen bleiben jedoch nicht zwischen Sitzungen erhalten).
    • Verzeichnis lesen, schreiben und bearbeiten: Ermöglicht es einem Nutzer, ein Verzeichnis in seinem lokalen Dateisystem auszuwählen, dessen Inhalt Ihre App dann lesen, in dem sie Dateien und Unterverzeichnisse erstellen, lesen und löschen und in dem sie relative Dateipfade ermitteln kann.
  • Compression Streams: Komprimieren oder dekomprimieren Sie Daten mit den Komprimierungsalgorithmen gzip und deflate.

Fensterverwaltung

  • Vollbild-API: Ermöglicht es Nutzern, ein Element in Ihrer Web-App, z. B. ein Video, im Vollbildmodus anzuzeigen.
  • Cross-Screen Window Placement API 🔮: Mit dieser API kann Ihre Web-App Informationen zu verbundenen Displays abrufen und Fenster relativ zu diesen Displays positionieren. So können Sie Web-Apps mit mehreren Fenstern und mehreren Displays erstellen.
  • Anzeigemodus für Anwendungen mit Tabs 🚩: Ermöglichen Sie, dass Ihre installierte Web-App in einem oder mehreren Tabs und nicht nur in einem einzelnen Fenster angezeigt wird.

Umfassendere Betriebssystemintegration

  • Local Fonts API 🔮: Mit dieser API kann Ihre Web-App lokal installierte Schriftarten auflisten und einen Low-Level-Zugriff (byteorientiert) auf SFNT-Container anfordern, der die vollständigen Schriftartdaten enthält. So kann Ihre App lokal installierte Schriftarten benutzerdefiniert rendern.
  • Wake Lock: Ermöglicht es Ihrer Web-App, zu verhindern, dass ein Bildschirm in den Ruhemodus wechselt. So kann Ihre Web-App lang andauernde Aufgaben ohne Unterbrechung ausführen (z. B. Dateitranskodierung oder Anzeige eines Rezepts während des Kochens).
  • Erkennung von Inaktivität 🔮: Ermöglicht Ihrer Web-App, zu erkennen, wann der Nutzer sein Gerät nicht aktiv verwendet.

Erweiterte Offlineunterstützung

Wenn Ihre Web-App auch offline noch besser funktionieren soll, sollten Sie die Implementierung der folgenden APIs in Betracht ziehen:

  • Hintergrundsynchronisierung: Wenn Sie offline sind, werden Anfragen, für die eine Verbindung erforderlich ist, in die Warteschlange gestellt und die Daten Ihrer Web-App werden im Hintergrund synchronisiert, sobald das Netzwerk verfügbar ist. Anfragen werden also nicht einfach offline nicht verarbeitet. So können beispielsweise Nachrichten gesendet oder inkrementelle Änderungen an einem Dokument synchronisiert werden, wenn Sie wieder online sind.
  • Regelmäßige Hintergrundsynchronisierung: Ermöglicht es, dass der Service Worker Ihrer installierten und häufig verwendeten Web-App in regelmäßigen Abständen aktiviert wird, wenn eine Mindestzeit verstrichen ist. So kann er beispielsweise einen Cache aktualisieren, damit Inhalte auf dem neuesten Stand sind, wenn ein Nutzer die App öffnet.
  • Content Indexing API: Mit dieser API können Sie dem Browser mitteilen, welche Inhalte offline verfügbar sind, damit der Browser sie Nutzern präsentieren kann.
  • Background Fetch: Ermöglicht lang andauernde Hintergrundabrufe, z. B. das Herunterladen von Filmen oder das Hochladen von Videos und Bildern, ohne dass der Service Worker beendet wird.

Medienstreaming, ‑codierung und ‑decodierung

Wenn in Ihrer Web-App Medien wie Video- oder Audiodateien wiedergegeben werden, sollten Sie die Implementierung der folgenden APIs in Betracht ziehen:

  • Adaptives Streaming: Videostreams können je nach Netzwerkleistung zwischen Bitraten wechseln.
  • Bild im Bild: Nutzer können Videos aus Ihrer Web-App in ein Fenster auslagern, das immer im Vordergrund angezeigt wird und unabhängig verschoben und in der Größe angepasst werden kann.
  • Media Session API: Ermöglicht Nutzern, die Medienwiedergabe für Ihre Web-App über Hardware- und Betriebssystemfunktionen (z. B. Wiedergabe-/Pausen-/Stopp-Schaltflächen auf Tastaturen oder Sperrbildschirmen) zu steuern und Betriebssystembenachrichtigungen für Medien (z. B. Titel, Künstler, Album und Cover) zu verwalten.
  • Chromecast API: Ermöglicht es Nutzern, Medien auf einen verfügbaren Chromecast-Empfänger zu streamen, z. B. ein Video aus Ihrer Web-App auf ihrem Fernseher abzuspielen.
  • Web-Codecs 🔮: Zugriff auf integrierte Hardware- und Software-Media-Encoder und ‑Decoder, die sowohl für Echtzeit-Anwendungsfälle wie Live-Streaming mit geringer Latenz als auch für das Encodieren, Decodieren und Transcodieren von Dateien nützlich sind.

Erweiterte Eingabeunterstützung

Erweiterte Unterstützung von Peripheriegeräten

  • WebUSB: Ermöglicht Ihrer Web-App den Zugriff auf nicht standardmäßige USB-Geräte (z. B. Tastaturen und Mäuse) über Ihre App.
  • Serial API 🔮: Fügt eine API für die Kommunikation mit Hardwaregeräten über einen physischen oder virtuellen seriellen Port hinzu.

Ihre PWA-Checkliste

Möchten Sie Ihre PWA mit diesen neuen leistungsstarken APIs optimieren? Wählen Sie einen der Anwendungsfälle unten aus, um eine empfohlene Gruppe von APIs zu sehen, die Sie verwenden können. Sie können aber auch eine eigene Checkliste erstellen und darauf hinarbeiten, sie zu vervollständigen.