Progressive Web-Apps (PWAs) für den Desktop sind eine hervorragende plattform- und browserübergreifende Möglichkeit, Apps mit einem Sicherheitsmodell zu entwickeln, das auf Nutzersicherheit und Datenschutz ausgerichtet ist. Außerdem bieten sie integrierte Freigabefunktionen, die auf der Linkbarkeit des Webs basieren. Mit modernen APIs können Sie neue Web-Apps erstellen oder vorhandene Web-Apps verbessern und ihnen Funktionen, Zuverlässigkeit und Installierbarkeit von Desktop-Apps verleihen. PWAs sind die beste Möglichkeit, Ihre Web-App für ChromeOS bereitzustellen.
Unter ChromeOS steht die Leistungsfähigkeit der Webplattform im Vordergrund. Web-Apps sind eine Kernfunktion der Plattform. Installierte PWAs werden im ChromeOS-Launcher angezeigt, können an das Ablagefach angepinnt werden und sind eng in das Betriebssystem integriert.
Sehen Sie sich zuerst die PWA-Checkliste an und prüfen Sie, ob Ihre Web-App die wichtigsten Punkte der Checkliste erfüllt. Mit PWABuilder können Sie eine benutzerdefinierte Offline-Seite bereitstellen und Ihre App installierbar machen. Mit diesen Empfehlungen können Sie Ihre PWA für ChromeOS optimieren.
Installierbar machen
Einer der großen Vorteile von PWAs gegenüber regulären Web-Apps ist, dass sie wie herkömmliche Desktop-Apps installiert werden können. Auf web.dev finden Sie einen Bereich zum Installieren von PWAs. Damit eine PWA unter ChromeOS als installierbar erkannt wird, müssen die folgenden Kriterien erfüllt sein. Sie können mit dem Lighthouse-Audit zur Installierbarkeit geprüft werden:
- Sie muss ein gültiges Web-App-Manifest haben.
-
Sie muss die Installationskriterien von Chrome erfüllen.
- Bei PWAs unter ChromeOS wird in der Omnibox eine Installationsaufforderung angezeigt, ohne dass ein Schwellenwert für die Nutzerinteraktion erreicht werden muss.
Symbole sind ein wichtiger Bestandteil der Identität Ihrer PWA. Achten Sie daher darauf, dass sie interessant und einzigartig sind. Sie können sogar Transparenz enthalten. Da PWAs eine Codebasis haben, die auf allen Plattformen verwendet wird, sollten Sie dafür sorgen, dass ein maskierbares Symbol verfügbar ist. Fügen Sie auch normale Symbole für Betriebssysteme hinzu, die keine maskierbaren Symbole unterstützen.
Da Ihre PWA jetzt installiert werden kann, wird sie in ChromeOS überall angezeigt, vom Launcher bis zum Ablagebereich. Wenn Ihre PWA installiert ist, stehen Ihnen außerdem einige zusätzliche Funktionen zur Verfügung, mit denen Sie Ihre App noch besser gestalten können.
Hinweis zum Offlinearbeiten
Wenn Sie Ihre App installierbar machen, profitieren Sie von vielen Vorteilen in Bezug auf Auffindbarkeit, Nutzerfreundlichkeit und Funktionen. Wenn Sie Ihre PWA installierbar machen, bedeutet das nicht, dass die gesamte Anwendung offline funktionieren muss. Damit sich eine installierte Web-App wie eine herkömmliche App anfühlt, sollte sie jedoch eine Art Offline-Funktionalität haben. Eine einfache benutzerdefinierte Offline-Seite reicht für den Anfang aus. Nutzer erwarten, dass installierte Apps nicht abstürzen, wenn sich der Verbindungsstatus ändert. So wie eine herkömmliche App nie eine leere Seite anzeigt, wenn sie offline ist, sollten PWAs nie die Standard-Offlineseite des Browsers anzeigen. Benutzerdefinierte Offlineseiten können von einer Nachricht, die den Nutzer darüber informiert, dass er eine Verbindung zu einem Spiel benötigt, bis hin zu einem Spiel reichen, mit dem er sich die Zeit vertreiben kann, bis er wieder verbunden ist. Wenn Sie diese benutzerdefinierte Offline-Funktion für nicht im Cache gespeicherte Seiten oder Funktionen bereitstellen, für die eine Verbindung erforderlich ist, können Sie die Lücke bei der Nutzerfreundlichkeit schließen.
Sie können während des install-Ereignisses eines Service Workers eine einfache Offline-Seite erstellen, indem Sie die gewünschte Seite für die spätere Verwendung vorab im Cache speichern und mit ihr antworten, wenn ein Nutzer offline ist. Hier finden Sie ein Beispiel, das zeigt, wie Sie eine benutzerdefinierte Offline-Seite implementieren können.
Wenn Sie eine robustere Lösung anbieten möchten, können Sie zusätzlich zur Cache Storage API Funktionen wie IndexedDB für die NoSQL-Speicherung im Browser und Hintergrundsynchronisierung verwenden. So können Nutzer Aktionen ausführen, wenn sie offline sind, und die Serverkommunikation wird aufgeschoben, bis der Nutzer wieder eine stabile Verbindung hat. Sie können auch Muster wie sichere, langlebige Sitzungen implementieren, um Nutzer authentifiziert zu halten, und Skelettbildschirme verwenden, um Nutzern schnell mitzuteilen, dass Inhalte geladen werden. Bei Bedarf kann auf zwischengespeicherte Inhalte oder einen Offlinemodus zurückgegriffen werden.
Haptik
Fast alle ChromeOS-Geräte unterstützen die Touch-Eingabe und viele auch Stifte. Sie müssen also dafür sorgen, dass Ihre App nicht nur mit Tastatur und Maus, sondern auch mit diesen beiden Eingabemethoden einwandfrei funktioniert. Die Pointer Events API wurde speziell für diesen Zweck entwickelt. Einige grundlegende zeigerbezogene Ereignisse, die Sie wahrscheinlich nicht ändern müssen, sind z. B. click-Ereignisse. Andere Ereignisse wie mouseup oder touchstart sollten zu ihren Pointer-Ereignis-Entsprechungen migriert werden, damit sie nahtlos mit jeder Art von Zeiger funktionieren. Sie können sogar verschiedene Eingabetypen separat verwalten. Bei Apps und Spielen, die stark auf taktile Nutzereingaben angewiesen sind, kann die Umstellung auf die Pointer Events API auf ChromeOS-Geräten einen großen Unterschied machen.
Flüssiges Zeichnen im Web
Wenn Sie eine App entwickeln, in der Nutzer mit ihren Fingern oder Stiften zeichnen, war es bisher schwierig, die Latenz zwischen ihrer Eingabe und Ihrer Ausgabe so gering zu halten, dass sie sich flüssig anfühlt. Wenn Sie diese Art von Apps, die auf der Canvas API basieren, für ChromeOS entwickeln, empfehlen wir, den Hinweis desynchronized für canvas.getContext() zu verwenden, um Rendering mit geringer Latenz zu ermöglichen. So verwenden Sie den desynchronized-Hinweis für einen Canvas:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Designaspekte für die Touchbedienung
Beim Entwerfen von Web-Apps ist es wichtig, die Unterstützung von Touch- und Stifteingabe zu berücksichtigen. Interaktionen, die Sie vielleicht für selbstverständlich halten, z. B. das Hovern, funktionieren bei anderen Eingabemethoden nicht gut oder gar nicht. Hier sind einige Best Practices, die Sie beim Entwerfen von Touch- und Stift-freundlichen Benutzeroberflächen beachten sollten:
- Gehen Sie nicht von bestimmten Eingaben basierend auf der Bildschirmgröße aus. Verwenden Sie stattdessen die Funktionserkennung, idealerweise bei der Eingabe, um zu bestimmen, wie Sie reagieren. Unter ChromeOS können Nutzer nahtlos zwischen Maus, Touch und Eingabestift wechseln – und das innerhalb einer Sitzung.
- Achten Sie darauf, dass Elemente, die Nutzer berühren sollen, eine Mindestzielgröße haben, die groß genug ist, damit nicht versehentlich umgebende Elemente berührt werden.
- Behandeln Sie das Hovern als progressive Verbesserung und sorgen Sie dafür, dass die Interaktion auch auf andere Weise für Touch- und Stiftbedienung möglich ist (z. B. durch langes Drücken oder Tippen).
- Nutzer, die Touch-Geräte verwenden, erwarten, dass sie direkt mit Elementen auf dem Bildschirm interagieren können, z. B. durch Zusammenziehen und Auseinanderziehen von Karten, anstatt Zoom-Schaltflächen zu verwenden. Wenn Sie häufig verwendete Touch-Gesten hinzufügen, kann das die Bedienung Ihrer App deutlich intuitiver machen.
Leistungsfähig
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 das Web für Ihre Apps noch leistungsfähiger machen. Das Chromium-Projekt Web Capabilities, auch bekannt als Project Fugu 🐡, zielt darauf ab, neue, leistungsstarke Webstandards zu ermöglichen, die das Besondere des Webs bewahren: nutzerorientierte Sicherheit, geringe Reibung und plattformübergreifende Kompatibilität.
Hinweis:Diese Funktionen befinden sich in verschiedenen Phasen der Entwicklung, von „in Erwägung gezogen“ bis „veröffentlicht“. Sie sind möglicherweise nur für Computer oder Mobilgeräte verfügbar, nicht für beide. ChromeOS-Nutzer erhalten wahrscheinlich Funktionen für den Desktop, sobald sie verfügbar sind. Die plattformübergreifende Unterstützung, auch die stabile Unterstützung in ChromeOS, kann jedoch manchmal mehrere Jahre dauern.