Mit Web-Technologie zu universeller App-Kompatibilität, Teil 3 Tools zum Testen, Debuggen und Veröffentlichen von PWAs

Das Erstellen einer performanten PWA erfordert ausgiebiges Testen und Debuggen. Abhilfe schaffen leistungsstarke Tools und bewährte Praktiken der Webentwicklung. Man muss nicht das Rad gleich neu erfinden.

Um den Code von Web-Anwendungen zu inspizieren und zu debuggen oder an ihrer Leistung und Barrierefreiheit zu feilen, empfiehlt sich der Einsatz von Development-Tools direkt im Webbrowser – so auch im Falle von PWAs. Obwohl PWAs hauptsächlich mobile Geräte adressieren, sollten diese Apps in allen modernen Browsern funktionieren, auch auf dem Desktop.

Daher ist es wichtig, PWAs auf unterschiedlichen Endgeräten und unter verschiedenen Netzwerkbedingungen, online wie auch offline, zu testen, um die optimale Benutzererfahrung (User Experience, UX) zu gewährleisten. Wer bei der Entwicklung von PWAs den sprichwörtlichen Leuchtturm sucht…. greift zum quelloffenen Auditing-Tool von Google namens Lighthouse im tiefen Inneren des DevTools-Bedienfeldes.

Google Lighthouse, der „Leuchtturm“ der PWA-Weisheit

Lighthouse entstand mit dem Ziel, die Qualität von Webseiten zu messen und zu verbessern. Das Werkzeug führt eine Reihe von Tests durch, die verschiedene Aspekte einer Webseite bewerten, darunter:

• Leistung

• Zugänglichkeit

• bewährte Praktiken

• SEO

• PWA

Lighthouse liefert einen Audit-Bericht mit einer Bewertung der App in Punkten auf einer Skala von 0 bis 100 (mit einer optionalen Simulation eines mobilen Endgeräts). Anhand des Reports lässt sich nachvollziehen, wie gut die betreffende Anwendung anhand konkreter Metriken abschneidet und wie sich das Ergebnis verbessern lässt.

Lighthouse macht sich intern die Chromium-Engine zunutze, auf der unter anderem Google Chrome und Microsoft Edge aufsetzen. Das Werkzeug ist ein integraler Bestandteil der sogenannten DevTools in diesen Browsern.

Optional läuft es auch als Browser-Erweiterung (für Chrome, Firefox & Co.), als CLI- sprich Kommandozeilen-Tool sowie als Webdienst im Rahmen von PageSpeedInsights und programmatisch als Modul für Node.js. Die verschiedenen Lighthouse-Workflows haben dabei verschiedene Vor- und Nachteile.

Da Microsoft Edge auf der Chromium-Engine basiert, die auch Google Chrome zu Grunde liegt, ist es möglich, Lighthouse direkt in Edge DevTools auszuführen (ähnlich wie in Chrome). Google bietet wie erwähnt auch eine Lighthouse-Erweiterung für Firefox. Dieses Add-on macht sich die PageSpeed Insights API zu Nutze, um einen Lighthouse-Bericht zu generieren, wobei Chrome ohne GUI von einem von Google betriebenen Dienst zum Tragen kommt.

Eine andere Methode besteht im Einsatz der Tampermonkey-Erweiterung für Firefox. Mit Tampermonkey können Entwickler und Entwicklerinnen eigene Skripte ausführen, die wiederum in der Lage dazu sind, die Lighthouse-Funktionalität zu nutzen.

In jedem dieser Fälle ist Lighthouse an die Chrome-Engine gebunden. Obwohl Lighthouse in Firefox die Resultate ausgibt, laufen die eigentlichen Audits in einer Chrome-Umgebung und darauf beziehen sich die Resultate.

In einigen Fällen möchten Entwickler möglicherweise DevTools für das Debugging oder andere Aufgaben verwenden, während sie separat über die Erweiterung einen Lighthouse-Audit durchführen. Die Erweiterung bietet Blitz-Audits der aktuellen Seite „auf Knopfdruck“, was schneller sein kann als das Navigieren zum Lighthouse-Tab in den DevTools.

Um konsistente Ergebnisse zu gewährleisten, insbesondere beim Benchmarken oder der Fehlersuche, empfiehlt Google im Allgemeinen, Lighthouse in seiner nativen Umgebung zu verwenden: in DevTools im Google Chrome. Dies ist der offiziell bevorzugte Weg – insbesondere dann, wenn Sie lokale Websites oder authentifizierte Seiten testen müssen, da die Browser-Erweiterung diese Funktionen nicht unterstützt.

Methode 1: Lighthouse-Audits in Chrome DevTools

Um eine PWA mit Lighthouse im DevTools-Bedienfeld von Chrome zu testen (Tastenkombination Strg-Umschalttaste-I unter Windows oder Befehlstaste-Wahltaste-I auf dem Mac), navigieren wir zu der PWA im Browser und wechseln in DevTools zum Lighthouse-Tab über das Menüsymbol „>>“.

Ein Klick auf „Analyze page load“, und schon geht es los. Nach einer kurzen Wartepause ist der Bericht fertig. So ähnlich läuft der Vorgang auch in Microsoft Edge ab. Ein Klick auf „View Trace" präsentiert eine visuelle Darstellung der Ladezeit der Webseite bzw. PWA.

Methode 2: Geschwindigkeitstests mit Lighthouse in PageSpeed Insights (PSI)

Für einen Performance-Bericht können wir in einem beliebigen Browser zum Webdienst PageSpeed Insights navigieren. Hier gilt es, in das Eingabefeld die URL der zu testenden PWA einzugeben, und auf „Analyse“ zu klicken. Der Bericht beginnt mit der Bewertung der Core Web Vitals der Test-URL.

Hierbei handelt es sich um eine Reihe von Metriken, welche die Ladezeit der Seite, die visuelle Stabilität und die Interaktivität messen. Die Bewertungen basieren auf echten User-Experience-Daten aus dem Chrome User Experience (CrUX) Report.

Der CrUX-Report ist ein öffentlicher Datensatz von Google mit aggregierten Metriken der Benutzererfahrung unter realen Bedingungen. Im Gegensatz zu synthetischen Daten aus einer kontrollierten Testumgebung, die echte Nutzungsbedingungen lediglich simulieren, bietet CrUX also Einblicke in die tatsächliche Erfahrung von Website-Besucherinnen und -Besuchern.

Methode 3. Lighthouse als ein programmierbares Werkzeug: CLI und Node.js

Lighthouse lässt sich nicht nur manuell nutzen, sondern auch als ein programmierbares Werkzeug verwenden und automatisieren. Es lässt sich unter anderem als CLI-Tool oder als Node-Modul ausführen, um Audits zu automatisieren und mit anderen Tools und Workflows zu integrieren.

Lighthouse in der Kommandozeile startet man nach der Installation zum Beispiel so:

Lighthouse CI lässt sich beispielsweise verwenden, um einen Audit bei jedem Commit, Pull Request oder Deployment Ihrer Web-App auszuführen. So erhalten Sie automatisch Feedback darüber, wie sich Ihre neuesten Änderungen auf die Qualität und Leistung Ihrer Web-App auswirken.

In Form des Node.js-Moduls lässt sich Lighthouse serverseitig ausführen. Das benötigte Node.js-Skript könnte zum Beispiel so aussehen:

Lighthouse kann auch in Kombination mit anderen Tools wie Webpack, Gulp oder Firebase zum Einsatz kommen, um eine PWA zu optimieren und bereitzustellen.

Microsoft bietet eine ganze Reihe von Werkzeugen und Technologien für die Entwicklung von PWAs. Diese Werkzeuge empfehlen sich insbesondere für Developer, die mit .NET und verwandten Technologien vertraut sind.

Mit einem Framework namens ASP.NET Core Blazor von Microsoft lassen sich interaktive Web-UIs mit C# anstelle von JavaScript erstellen und so die Vorteile von Webtechnologien mit den Vorteilen von .NET verbinden. Blazor PWAs können offline arbeiten, Push-Benachrichtigungen senden und auf native Gerätefunktionen zugreifen, ähnlich wie native Apps.

Mit den .NET WebAssembly Build Tools können Entwickler Blazor-Anwendungen für WebAssembly kompilieren und bereitstellen. Microsoft hat nicht zuletzt einem Projekt namens PWABuilder zum Start verholfen (siehe weiter unten).

PWAs auf Marktplätzen bereitstellen

Um die Reichweite und Akzeptanz einer PWA zu steigern, ist es möglich, sie auf Marktplätzen wie dem Google Play Store oder (mit etwas Beharrlichkeit und einer Menge Glück) dem Apple App Store zu veröffentlichen. Die Bereitstellung einer PWA in App-Stores kann ihre Reichweite erhöhen und sie neuen Nutzergruppen zugänglich machen.

PWAs sind in erster Linie Web-Anwendungen. Sie werden nicht im traditionellen Sinne „kompiliert“, wie es bei nativen Apps der Fall ist. Stattdessen werden sie typischerweise auf Webservern gehostet und über URLs zugänglich gemacht. Wenn es darum geht, PWAs auf Marktplätzen wie dem Google Play Store oder dem Apple App Store bereitzustellen, sind einige zusätzliche Schritte erforderlich, um die betreffende PWA in eine „App-Hülle“ oder einen „Wrapper“ zu verpacken.

Pflichtübung für den Google Play Store: von PWAs zu TWAs

• Zur Bereitstellung auf Android über den Google Play Store verwandelt man eine PWA in eine sogenannte TWA (Trusted Web Activity). Ein passendes Tool stellen wir weiter unten vor.

• Apple unterstützt derzeit keine TWAs, deshalb muss man für iOS und den Apple App Store tiefer in die Trickkiste greifen. Zuerst muss man die PWA in eine Komponente namens WebView einbetten und dann als eine native App kompilieren.

• Microsoft bietet wiederum eine eigene Methode, PWAs im Microsoft Store über die Edge-Plattform bereitzustellen.

Obwohl diese Methoden PWAs auf „nativen“ Marktplätzen der jeweiligen Zielplattform bereitstellen, handelt es sich bei den resultierenden Apps immer noch um Webanwendungen, die von den ihnen zugrunde liegenden PWAs abhängen. Die eingereichte App ist im Wesentlichen eine Hülle für oder bietet ein Fenster zur PWA; die eigentliche Logik und Funktionalität ist immer noch webbasiert und unterliegt denselben Einschränkungen wie vorher

Auch im „Kleingedruckten“ ist die Prozedur der App-Bereitstellung auf Marktplätzen noch mit weiteren nicht unerheblichen Herausforderungen verbunden. Abhilfe schaffen Tools wie der PWABuilder.

PWABuilder: PWAs verpacken

PWABuilder bietet Developern die Möglichkeit, PWAs für die führenden App-Stores zu verpacken, konkret:

• Google Play Store

• Microsoft Store/

• Apple App Store

• Meta Quest Store

Der Hauptvorteil besteht in der Fähigkeit, alle wesentlichen Schritte für alle unterstützten Marktplätze zentral an einer Stelle zu erledigen, ohne sich zu verzetteln. Das Einreichen einer mobilen App bei den Marktplätzen ist nämlich mit viel Kleinarbeit verbunden.

Der Vorgang erfordert nicht zuletzt das Einrichten und die Pflege von mindestens zwei sehr unterschiedlichen Entwicklungsumgebungen: einer unter Windows für die Android-Plattform von Google, einer anderen unter macOS für Apples iOS.

Die Herausforderung beginnt schon damit, dass man je eine Code-Basis in einer der nativen Sprachen jeder Zielplattform verfassen muss: in Kotlin und/oder Java für Android (in einer Entwicklungsumgebung wahlweise unter Windows oder macOS) und dann auch noch in Swift und/oder Objective C für iOS (was Apple ja nur in Xcode und nur unter macOS unterstützt). Native Sprachen müssen einer/einem Webentwickler/in nicht unbedingt vertraut sein.

Doch damit ist es noch nicht genug an Herausforderungen. Denn man darf ja die unzähligen kleinen Besonderheiten der jeweiligen Zielplattform nicht aus dem Blick verlieren. So muss man etwa App-Symbole punktgenau in den richtigen Größen der avisierten Zielplattform erstellen, plattformspezifische Einstellungen vornehmen und die resultierende App auf verschiedenen Geräten und Betriebssystemen testen.

PWABuilder erledigt viele dieser Aufgaben automatisch und reduziert somit den Zeitaufwand und die Mühe, die ansonsten bei der Veröffentlichung von Apps anfallen. Für iOS erstellt das Tool eine native Swift-App mit einer WebKit-WebView, um die App zu laden und PWA-Funktionen wie Service-Worker, Farbschemata, App-Symbole, In-scope-URLs und ähnliche Features bereitzustellen.

Daten aus dem Manifest der PWA fungieren dabei als Standardwerte; im Optionsdialog von PWABuilder für die iOS-Veröffentlichung lassen sich diese Einträge bei Bedarf anpassen.

Sollte das PWA-Manifest die richtigen Bildgrößen für die iOS-App nicht angeben, generiert PWABuilder die benötigten Icons von sich aus den bestehenden Daten. Das Tool verpackt dann alles für Xcode als Projekt-Workspace. Jetzt geht es damit hin zu Xcode und dann in den iOS App Store. Für Apple sieht es so aus, als ob die Entwickler nur in Xcode gearbeitet hätten.

PWABuilder bietet im Übrigen eine Erweiterung für Microsoft VS Code, mit der Entwickler und Entwicklerinnen ihre PWAs direkt in Visual Studio Code erstellen, verbessern und für Marktplätze verpacken können. Im Falle von Google Play Store, Microsoft Store und dem Meta Quest Store ist die Einreichung mit Drittanbieter-Werkzeugen offiziell vorgesehen und den App-Entwicklern steht es frei, sich das bevorzugte Werkzeug auszusuchen. Apple macht es anders.

Die mit PWABuilder erstellten PWAs lassen sich problemlos auch im Apple App Store einreichen (wohlgemerkt bisher), aber Apple erzwingt hierzu den Einsatz von Xcode in der passenden Version.

Das SDK für iOS 17 erfordert beispielsweise Xcode 15 – und damit setzt es einen Mac mit macOS Ventura 13.4 voraus. Mit Windows ist da nichts zu wollen.

Unterm Strich

Mit PWA-Werkzeugen wie Google Lighthouse können Developer die Qualität und Leistung ihrer PWAs nach dem neuesten Wissensstand optimieren, um die Benutzererfahrung zu verbessern und das Engagement zu maximieren. Tools wie PWABuilder erleichtern die plattformübergreifende Bereitstellung und erhöhen nicht zuletzt auch die Reichweite der Anwendungen enorm.

(ID:49804357)