Progressive Web Apps sind ein webbasiertes Anwendungsmodell. Nach diesem Schema entwickelte Anwendungen laufen offline und lassen sich auf dem Gerät des Nutzers installieren. Vom Homebildschirm oder der Programmliste aus geöffnet unterscheiden sie sich optisch nicht von sonstigen Anwendungen auf dem Gerät. Die dafür erforderlichen Schnittstellen, das Web Application Manifest und die Service Worker, sind nun seit einigen Jahren in allen großen Browsern verfügbar.
Entwickelt werden diese Anwendungen mithilfe von Webtechnologien wie HTML, CSS, JavaScript oder WebAssembly: Unter Zuhilfenahme ein- und desselben Quelltextes lassen sich die Anwendungen auf verschiedensten Zielbetriebssystemen und in unterschiedlichsten Browsern zur Ausführung bringen. Features müssen lediglich einmal implementiert und Fehler nur einmal behoben werden.
2021 war für Anwendungsentwickler im Web ein besonders aufregendes Jahr: Mit Microsoft Visual Studio Code und Adobe Photoshop haben gleich zwei sehr bekannte Produktivitätsanwendungen den Weg ins Web gefunden. Diesem Ziel genähert haben sich die beiden Anwendungen von zwei unterschiedlichen Seiten und sind damit richtungsweisend für andere Entwickler: Das sollten Sie 2022 für die Entwicklung moderner Progressive Web Apps wissen!
Neue Webschnittstellen dank Project Fugu
Beginnen wir mit Visual Studio Code. Microsofts kostenfreier Code-Editor basierte schon immer auf HTML und JavaScript, oder besser dessen typisiertes Superset TypeScript. Für den Desktop wurde und wird die App per GitHub Electron als natives Anwendungsbündel verpackt. Electron gewährt der Anwendung Zugriff auf sämtliche Systemschnittstellen. Eine Ausführung rein im Browser wäre früher gar nicht denkbar gewesen, da kein ausreichend leistungsfähiger Zugriff auf das lokale Dateisystem möglich war. Insbesondere muss Visual Studio Code ganze Verzeichnisstrukturen einlesen und Dateien darin erzeugen und überschreiben können.
Hier setzt Project Fugu an, eine gemeinsame Anstrengung von Google, Microsoft, Intel und weiteren Beteiligten, um das Web leistungsfähiger zu machen. Durch die Einführung neuer Schnittstellen soll die Lücke zwischen Webanwendungen und ihren nativen Gegenstücken geschlossen werden. Die Grundprinzipien des Web sowie Sicherheit und Privatsphäre der Anwender sollen im gleichen Zuge jedoch gewahrt bleiben. Dies stellt das Vorgehensmodell des Fugu-Projektes sicher.
Im Kontext dieses Projektes wurde die File System Access API entworfen. Diese Schnittstelle gewährt Webanwendungen einen eingeschränkten Zugriff auf das Dateisystem: Der Anwender wird zur Auswahl einer Datei oder eines Verzeichnisses aufgefordert. Willigt der Nutzer ein, erhält die Webanwendung Zugriff darauf. Seit die File System Access API in den Chromium-basierten Browsern wie Google Chrome, Microsoft Edge, Opera und anderen verfügbar ist, eröffnete sich für Microsoft die Möglichkeit, Visual Studio Code als reine Webanwendung zur Verfügung zu stellen (abrufbar unter https://vscode.dev/, derzeit Preview-Version).
Die Preview-Version von Visual Studio Code for the Web läuft direkt im Browser – Progressive Web Apps 2022
Weitere interessante Fugu-Schnittstellen sind etwa die File Handling API, die PWAs die Möglichkeit einräumt, sich bei Installation als Bearbeitungsprogramm für bestimmte Dateierweiterungen (wie TXT- oder PNG-Dateien sowie beliebige benutzerdefinierte Formate) zu registrieren. Die Window Controls Overlay API erlaubt es PWAs, ihren Darstellungsbereich bis in die Titelzeile ihres Fensters zu erweitern, wie es Anwendungen wie Slack, Microsoft Teams oder Discord praktizieren (und die im Übrigen auch alle webbasiert sind). Die Window Placement API möchte Entwicklern die Möglichkeit einräumen, neue Fenster an einer definierten Position auf einem bestimmten Bildschirm öffnen zu können – interessant für Trader-Dashboards und andere Multiscreen-Anwendungen.
Electron als Ausweg
Während Visual Studio Code nun auch im Web auf das Dateisystem zugreifen kann und in der webbasierten Version auch viele Plug-ins funktionieren, steht dennoch nicht der komplette Funktionsumfang zur Verfügung, den Nutzer von der Desktopversion gewohnt sind: Unter anderem ist das eingebaute Terminal nicht funktionsfähig, da es hierfür keine Webschnittstelle gibt und aufgrund ihrer besonders tiefen Integration ins System vielleicht auch niemals geben wird. Doch auch hierfür gibt es Lösungsansätze: Dienste wie GitHub Codespaces oder Glitch zeigen Entwicklern ein cloudbasiertes Terminal an. Dazu kommuniziert die Webanwendung mit einem Server in der Cloud, der für den Anwender eine isolierte Konsole bereitstellt. Die Webanwendung überträgt die Tastatureingaben dorthin, nimmt die Inhalte der Cloudkonsole entgegen und zeigt diese dem Anwender an. Auf diese Art lassen sich selbst auf dem iPad Programme entwickeln, mit dem vollen Funktionsumfang, die Entwickler gewöhnt sind. Voraussetzung ist lediglich eine bestehende Internetverbindung.
Wo ein wahlfreier Zugriff auf lokale Systemschnittstellen unbedingt erforderlich ist, steht mit dem Wrapper-Ansatz Electron immer ein möglicher Ausweg zur Verfügung. Entwickler sollten idealerweise danach streben, dass ihre Anwendung mit einem sinnvollen Basisfunktionsumfang direkt im Webbrowser ausgeführt werden kann. Werden weitere Features benötigt, kann zusätzlich auch eine in Electron verpackte Desktopversion angeboten werden. Diese kann ebenfalls wieder auf den Großteil des bestehenden Quelltextes zurückgreifen und fügt für die neuen Funktionen lediglich zusätzlichen Code hinzu oder tauscht ausgewählten Code aus. Mithilfe des Strategy-Patterns lassen sich diese Fälle auch sehr elegant implementieren. Kurzum verbauen sich Entwickler dank der Fallback-Lösung Electron im Web niemals Chancen.
Bestandscode dank WebAssembly ins Web mitnehmen
Während Visual Studio Code ein Greenfield-Webprojekt ist, sieht es bei Adobe Photoshop anders aus. Das beliebte Bildbearbeitungsprogramm ist eine in C++ geschriebene Anwendung mit jahrzehntelanger Historie. Ganz so einfach ist die Bereitstellung einer Webversion in diesem Fall also nicht. Doch auch für Brownfield-Anwendungen gibt es einen interessanten Weg ins Web: Hier kommt WebAssembly (Wasm) ins Spiel. Dabei handelt es sich um einen Bytecode, der durch passende virtuelle Maschinen ausgeführt werden kann.
Die virtuellen Maschinen aller großen Browser, in denen auch JavaScript ausführt wird, verstehen WebAssembly seit einigen Jahren. Doch auch außerhalb des Browsers ließe sich Wasm betreiben. Der WebAssembly-Bytecode wird üblicherweise nicht per Hand geschrieben. Stattdessen werden bestehende Programmiersprachen wie eben C++ genutzt und dann nach Wasm kompiliert. Somit lässt sich auch bestehender Quelltext in den Browser bringen und dort ausführen, sodass nicht die komplette Anwendung in JavaScript reimplementiert werden muss.
Aber auch für neue Anwendungen ist WebAssembly interessant: Microsofts Framework Blazor erlaubt es Entwicklern, Single-Page-Apps für den Browser in C# zu schreiben und damit bestehende Erfahrungen und Kenntnisse aus dem .NET-Bereich mitzunehmen. Da für WebAssembly im Browser dieselbe Sandbox wie für JavaScript-Code greift, ist Wasm nicht mehr oder weniger mächtig als JavaScript. Und für viele Teile braucht WebAssembly auch noch die Unterstützung durch JavaScript, sodass sich beide Ansätze gegenseitig ergänzen statt zu konkurrieren.
Die Betaversion von Photoshop im Web unterstützt bereits einen beeindruckenden Funktionsumfang – Progressive Web Apps 2022
Adobe setzte genau diese Technik ein, um Teile des bestehenden Photoshop-Codes ins Web zu bringen. Dazu arbeitete Adobe mit Google zusammen. Die Oberfläche wurde mithilfe von Web Components neu implementiert. Aktuell wird eine Betaversion der webbasierten Ausgabe von Photoshop für Creative-Cloud-Abonnenten zur Verfügung gestellt. Möglich ist das Ansehen und Kommentieren von in der Cloud gespeicherten Photoshop-Dokumenten, außerdem lassen sich auch Bearbeitungen vornehmen. Unter anderem stehen das Pinsel- und Füllwerkzeug, die Schnellauswahl oder der Zauberstab zur Verfügung.
Ganz ebenbürtig mit der Desktopversion ist der Funktionsumfang der Webausgabe von Photoshop derzeit aber nicht; Adobe beabsichtigt jedoch, weitere Funktionen im Web nachzuliefern. Zeitgleich zu Photoshop kündigte Adobe auch an, das Vektorprogramm Illustrator im Web bereitzustellen. Das Programm ist aktuell jedoch noch nicht generell verfügbar, sondern kann nur im Rahmen eines geschlossenen Betaprogramms ausprobiert werden.
Performancevorteile durch WebAssembly
WebAssembly eignet sich nicht nur zur Übernahme bestehender Quelltexte, sondern kann auch für besonders performancekritische Teile der Anwendung interessant sein: Im Gegensatz zu JavaScript muss WebAssembly nicht erst geparst werden, wodurch sich ein Ladezeitvorteil ergibt. JavaScript-Quelltext wird interpretiert und die Ausführung während der Laufzeit durch die Engine optimiert. Moderne JavaScript-Engines können dabei je nach Anwendungsfall beeindruckende Ergebnisse erzielen. Der WebAssembly-Binärcode kann hingegen von vornherein so optimiert werden, sodass immer ein optimales Laufzeitverhalten erreicht wird. Dann spricht auch der Implementierung von Spielen oder besonders anspruchsvollen Anwendungen im Web nichts mehr entgegen. Beachtet werden muss in diesem Zusammenhang aber auch, dass schlecht optimiertes Wasm langsamer sein kann als JavaScript-Code.
Was Sie 2022 für die Entwicklung von Progressive Web Apps wissen sollten – Fazit
Mit Visual Studio Code und Photoshop ist die Familie der Webanwendungen im Jahr 2021 gleich um zwei Schwergewichte gewachsen. Doch es sind nicht nur die großen Anwendungen, die ihren Weg ins Web finden: Das HTTP Archive, eine Unterorganisation des für seine Wayback Machine bekannten Internet Archive, analysiert jedes Jahr über acht Millionen Websites, um bestimmte Entwicklungen im Web zu beobachten. Das Kapitel zu den Capabilities, also den Fugu-APIs, zeigte auch in diesem Jahr wieder ein starkes Wachstum in der Verwendung moderner Webschnittstellen auf – im Bereich der Async Clipboard API, die asynchronen Zugriff auf die Zwischenablage gewährt und daher für Produktivitätsanwendungen interessant ist, etwa um Faktor 10.
Das Kapitel zu WebAssembly demonstriert, dass derzeit knapp über 2.000 Domains im Web auf WebAssembly setzen: Entwickler bringen damit komplett neue Anwendungen ins Web oder nutzen diese Möglichkeit, um Bestandscode dorthin zu migrieren oder besonders schnell auszuführen. Das Web ist also längst reif für mächtige Produktivitätsanwendungen. Wo bleibt Ihre?
- Was Sie 2022 für die Entwicklung von modernen Progressive Web Apps wissen sollten - 20. Dezember 2021
- Angular-Performance: So zünden Sie den Turbo - 18. August 2020
- Progressive Web Apps mit Angular - 28. Oktober 2019
