PWA: Was es ist und wie man sich täglich um die Leistung kümmert

Eine Progressive Web App verspricht das Beste aus beiden Welten: die Erreichbarkeit des Webs mit dem Gefühl einer installierten App. Es öffnet sich schnell, funktioniert offline, kann Benachrichtigungen senden und wird auf dem Startbildschirm installiert, ohne in ein Geschäft gehen zu müssen. Theoretisch ist es elegant.

Viele Leute schalten eine PWA ein, sehen, dass sie „funktioniert“ und gehen davon aus, dass sie kostenlose Leistung erhalten. Ein paar Monate später ist die App langsam, der Cache ist eher ein Hindernis als eine Hilfe und das App-Erlebnis ist zu einer umfangreichen Webseite mit einem Symbol auf dem Bildschirm geworden.

PWA ist kein Leistungsschalter. Es ist eine Architektur, die, wenn sie gut gepflegt wird, für Geschwindigkeit sorgt, und die, wenn sie vernachlässigt wird, für Frustration sorgt. Ich möchte erklären, was eine PWA ist und vor allem, wie Sie eine gesunde Leistung in Ihrem Training aufrechterhalten können, denn täglich gewinnt oder verliert man.

Was ist eine PWA, kein Geheimnis

Eine PWA ist im Wesentlichen eine Website, die eine Reihe moderner Webtechnologien nutzt, um sich wie eine Anwendung zu verhalten. Die drei Säulen sind der Service Worker, der im Hintergrund läuft und das Caching und den Offline-Betrieb steuert; das Manifest, mit dem Sie die App mit einem eigenen Symbol und Namen auf dem Startbildschirm installieren können; und die Verwendung von HTTPS, eine Sicherheitsvoraussetzung, damit all dies funktioniert.

Der Servicemitarbeiter ist das Herzstück der Geschichte. Es befindet sich zwischen der App und dem Netzwerk, fängt Anfragen ab und entscheidet, was aus dem Cache bereitgestellt und was online abgerufen werden soll. Dadurch öffnet sich die PWA sofort und funktioniert ohne Verbindung.

Diese Macht ist auch die Quelle von Problemen. Ein schlecht konfigurierter Servicemitarbeiter stellt alte Inhalte bereit, aktualisiert nicht zum vorgesehenen Zeitpunkt oder füllt das Gerät mit nutzlosem Cache. Der gleiche Teil, der Ihnen Geschwindigkeit verleiht, kann Ihnen Langsamkeit verleihen.

Die These: PWA-Leistung ist Wartung, nicht Installation

Die Idee, die ich am meisten bekämpfen möchte, ist, dass Leistung von der Entscheidung abhängt, „PWA“ zu verwenden“. Ich behaupte, dass es auf kontinuierliche Entwicklungsgewohnheiten zurückzuführen ist und dass eine PWA mehr und nicht weniger Disziplin erfordert als eine typische Website.

Der Grund ist einfach: PWA fügt eine Ebene hinzu, den Service Worker und seine Caching-Strategien, die durchdacht, getestet und gewartet werden müssen. Jede neue Version der App bietet die Möglichkeit, den Cache zu sprengen, veraltete Inhalte bereitzustellen oder die auf dem Gerät gespeicherten Daten zu vergrößern.

Daher handelt es sich bei der Durchführung von PWA um Routinepflege. Es ist etwas, das in den Ablauf jeder Lieferung einfließt, keine Einrichtung, die man einmal durchführt und dann vergisst. Wer es als vergesslich behandelt, häuft Probleme an, die erst dann auftreten, wenn der Benutzer ohnehin genervt ist.

Caching-Strategie: die zentrale Pflege

Die wichtigste Entscheidung in einer PWA-Routine ist, wie jeder Ressourcentyp zwischengespeichert wird. Es gibt keine einheitliche Strategie, die für alles gut ist.

Dateien, die sich selten ändern, Anwendungscode, Symbole, Schriftarten, können aggressiv zwischengespeichert werden und zuerst aus dem Cache bereitgestellt werden, um schnell geöffnet zu werden. Daten, die sich ständig ändern, die Inhalte, die der Benutzer konsumiert, erfordern Strategien, die das Netzwerk priorisieren oder prüfen, ob der Cache noch aktuell ist.

Der häufigste Fehler besteht darin, auf alles eine aggressive Strategie anzuwenden. Die App öffnet sich schnell, zeigt aber alte Informationen an und der Nutzer sieht veraltete Preise, Status oder Inhalte. Bei Anwendungen mit sensiblen Daten kann dies von einem Ärgernis zu einem ernsthaften Problem werden.

Täglich sollte jede neue Funktion, die der App hinzugefügt wird, die Frage aufwerfen: Wie soll diese zwischengespeichert werden? Diese Frage als Teil der Entwicklung und nicht als Detail zu behandeln, ist das, was Leistung und Korrektheit zusammenhält.

Problemlose Versionierung und Aktualisierung

Ein klassisches PWA-Problem besteht darin, dass der Benutzer bei einer alten Version hängen bleibt, weil der Servicemitarbeiter weiterhin den alten Cache bereitstellt. Sie veröffentlichen eine Korrektur und der Benutzer sieht sie nicht, weil seine App darauf besteht, anzuzeigen, was er gespeichert hat.

Um dieses Problem zu lösen, ist eine Cache-Versionierungs- und Service-Worker-Update-Strategie erforderlich. Wenn eine neue Version veröffentlicht wird, muss die App die neuen Inhalte bemerken, herunterladen und auf kontrollierte Weise aktivieren, idealerweise den Benutzer benachrichtigen oder sie beim nächsten Öffnen aktualisieren.

Dieser Ablauf muss bei jeder Lieferung getestet werden. Ich habe gesehen, dass Teams dringende Korrekturen veröffentlichten, die die Benutzer aufgrund eines schlecht verwalteten Caches einfach nicht erreichten. Der Fix existierte auf dem Server und war auf dem Gerät nutzlos. Zur Leistung gehört hier die Fähigkeit, schnell Patches durchzuführen, und dies hängt davon ab, ob der Update-Zyklus funktioniert.

Messen gehört zur Routine

Sie können sich nicht um das kümmern, was Sie nicht messen. Die Leistung einer PWA muss mit realen Daten überwacht werden, nicht nur mit dem Eindruck, dass „sie auf meinem Rechner schnell ist“.

Mithilfe von Web-Performance-Audit-Tools können Sie die Ladezeit, die Ressourcengröße und die Qualität des Offline-Betriebs messen. Wahrgenommene Lastmetriken, also wie schnell der Benutzer etwas Nützliches auf dem Bildschirm sieht, sagen mehr über das Erlebnis aus als isolierte technische Zahlen.

Ideal ist es, diese Messung in den Lieferfluss zu integrieren, sodass Leistungsrückgänge erkannt werden, bevor sie den Benutzer erreichen. Eine App, die schnell und langsam war, wurde selten auf einmal schlechter; Es wurde nach und nach schlimmer, bei Lieferungen, die niemand gemessen hatte. Durch kontinuierliche Messung wird aus Leistung Glück Kontrolle.

Die Grenzen und Fallstricke von PWA

So sehr ich PWA verteidige, ist es wichtig, seine Grenzen zu erkennen, um keine Illusionen zu verkaufen. In einigen Systemen ist der Zugriff auf Geräteressourcen sogar noch stärker eingeschränkt als in einer nativen App. Benachrichtigungen und Installationsverhalten variieren zwischen den Plattformen. Und es gibt Hardware-Features, die eine PWA einfach nicht in der gleichen Tiefe abdeckt.

Darüber hinaus kann die Flexibilität des Webs selbst zu überladenen Apps führen. Ohne Disziplin ist es leicht, Bibliotheken, Skripte und Stile anzuhäufen, die die Arbeit erschweren. PWA behebt keinen fehlerhaften Code; es fügt einfach eine Ebene darüber hinzu. Die schlechte Leistung an der Basis bleibt bei aktivierter PWA weiterhin schlecht.

Die größte Falle ist Selbstzufriedenheit. Da die PWA wie eine App „sieht“ und sich nach dem ersten Laden schnell öffnet, ist es einfach, mit dem Messen und Kümmern aufzuhören. Die Verschlechterung tritt unbemerkt ein, und wenn jemand es bemerkt, kostet die Wiederherstellung der Leistung mehr, als es gekostet hätte, sie aufrechtzuerhalten.

PWA ist eine hervorragende Technologie für alle, die Web-Reichweite in Anwendungsqualität wünschen, sofern sie verstehen, dass diese Qualität das Ergebnis kontinuierlicher Sorgfalt ist. Die Geschwindigkeit des ersten Tages bleibt nur erhalten, wenn jeden Tag Disziplin herrscht.

Wenn Ihr Team eine PWA pflegt und eine Leistungspflegeroutine strukturieren möchte, finden Sie hier im Blog weitere Texte zum Thema Web, Leistung und Entwicklung. Und wenn Sie über Ihr Produkt sprechen möchten, stehe ich Ihnen gerne zur Verfügung.