Unterstützende Ressourcen zur PWA-Entwicklung Praktische Helfer für Progressive Web Apps

Für die Entwicklung von Progressive Web Apps sind einige Kleinigkeiten erforderlich. Allerdings ist die Erstellung eines entsprechenden Angebots angenehm einfach. Wir haben einige praktische Ressourcen für Sie zusammengestellt.

Progressive Web Apps, kurz PWA, sind eine praktische Möglichkeit, eine App ohne den Umweg über den App- oder Play-Store anzubieten. Für Web-Entwickler hat das gleich mehrere Vorteile: Einerseits werden lästige Freigabeprozesse umgangen, andererseits halten sich Kosten und Aufwand im Vergleich zu einer Native-App massiv in Grenzen.

Das Schöne an einer PWA ist nämlich, dass sie auf jeder bestehenden Website nachgerüstet werden kann, um den Content ohne Umwege auch als App anbieten zu können. Mit den folgenden Tools und Web-Ressourcen wird die Erstellung einer PWA noch einmal erleichtert.

PWA: Icons und Startbildschirm erstellen

Ein wichtiges Element jeder PWA ist das App-Icon. Das sollte attraktiv und eindeutig sein, damit Nutzer die Web-App gerne auf ihrem Home-Screen behalten und auch gerne anklicken. Allerdings können Progressive Web Apps nicht einfach vorhandene Favicons einer Website übernehmen.

Da das Icon auf dem Smartphone-Homescreen deutlich größer dargestellt wird und es eine Vielzahl von Auflösungen auf Desktop- und Mobilsystemen gibt, sollten Icons in möglichst vielen Größenversionen vorliegen. Nur so wird die App auch attraktiv dargestellt. Ein praktisches Tool hierfür ist der PWA Asset Generator.

Dieses Tool generiert auf Basis einer Quelldatei die notwendigen Icon-Größen und einen Splash-Screen für die App direkt in der Kommandozeile. Bei Bedarf aktualisiert es auch die manifest.json und die Index.html der Web-App. Um den PWA Asset Generator nutzen zu können, muss zunächst Node.js samt NPM für Windows, MacOS oder Linux installiert werden. Anschließend lässt sich das Tool mit dem Befehl …

… auf dem System installieren.

Manifest.json per Web-Interface generieren...

Die für die PWA-Ausführung zwingend notwendige manifest.json ist zwar keine Raketenwissenschaft, verlangt aber ein wenig Coding. Wer darauf keine Lust hat, kann zum Web-Manifest-Generator greifen. Hier können alle notwendigen Angaben wie der App-Name, der Display-Typ, verschiedene Icons sowie verknüpfte Plattformen angeben werden. Der Generator erstellt automatisch live den notwendigen Quellcode für die manifest-Datei. Diese kann natürlich anschließend in einen Text-Editor kopiert und natürlich noch manuell angepasst werden.

... oder per Kommandozeile

Natürlich gibt es auch die Möglichkeit, die benötigten Dateien für eine PWA direkt in der Kommandozeile zu generieren. Ist Node.js bereits installiert, können Linux- und Mac-Nutzer (oder Windows-User, die das Windows-Subsystem for Linux nutzen, ganz einfach die pwabuilder CLI auf ihrem System aufsetzen:

Diese hilft dabei, alle für eine Progressive Web App benötigten Dateien auf einen Schwung zu generieren – und zwar für alle Plattformen. Die Bedienung ist dabei denkbar einfach: Mit einem einfachen pwabuilder werden alle gewünschten Dateien angelegt, zusätzlich gibt es eine ganze Reihe praktischer Parameter, etwa um nur die Web-App-Files für ein bestimmtes Browser-System anzulegen oder um die App direkt auszuführen. Leider ist der PWA-Builder nicht mehr ganz aktuell. Hier und da erfordern Fehlermeldungen händisches Eingreifen.

PWABuilder.com

Statt auf der Kommandozeile kann der pwabuilder natürlich auch über seine Website genutzt werden. Der Vorteil dieser Lösung ist die grafische Benutzeroberfläche sowie die praktische Analyse der bereits vorhandenen und noch fehlenden Elemente. Die Bedienung ist dabei denkbar einfach: Zunächst kann die Website auf ihre bereits vorhandene PWA-Tauglichkeit analysiert werden. Anschließend wird Hilfestellung für die noch fehlenden Elemente gegeben.

Praktisch daran ist, dass zum Beispiel die manifest.json direkt angepasst und heruntergeladen werden kann. Auch einige Standard-Service-Worker hat die Website im Angebot. Bei anderen fehlenden Elementen wird im Zweifel auf eine Quelle im Netz verwiesen, in der genau erklärt wird, wie das entsprechende Element eingebaut werden kann. Gerade für Einsteiger in den PWA-Betrieb eine enorme Hilfestellung.

Webpack

Um die Auslieferung einer PWA möglichst effizient zu gestalten, bietet sich Webpack an: Als JavaScript-Modul-Packer bündelt das Tool Java-Script-Dateien und Abhängigkeiten für die Nutzung in einem Webbrowser oder eben als Progressive Web App. Auch Frontend-Elemente wie HTML, CSS oder Bilddateien können auf diese Weise zu einem hübschen Paket geschnürt werden. Ein praktisches Beispiel für den Einstieg mit Webpack gibt es bei Github.

Microsoft Visual Studio Code

Natürlich stellt sich bei der Entwicklung einer Progressive Web App auch die Frage nach dem passenden Editor. Microsoft stellt sich hier mit dem kostenlosen Sourcecode-Editor Visual Studio Code für Windows, Mac und Linux an die vorderste Front. Der Editor wird von vielen PWA-Entwicklern empfohlen.

VS Code bietet nämlich eine Plugin-Schnittstelle und dadurch eine Reihe praktischer PWA-Extensions, die sich mit wenigen Handgriffen einfügen lassen. Mit diesen ist die Erstellung des für eine PWA notwendigen Codes ein Kinderspiel. Neben der PWA-Funktionalität dient sich Microsoft Visual Studio Code aber auch einfach als sehr ansprechender Editor für jede Art von Softwareentwicklung an.

pwafire.org: Das Online-Handbuch für die PWA-Entwicklung

Im Developer-Bereich von pwafire.org findet sich riesige Ressourcensammlung für die Entwicklung von Progressive Web Apps: Hier gibt es neben Basis-Anleitungen und Code-Schnipseln auch ein Browser-Testing-Tool, How-Tos für die Entwicklung und Hilfen beim Debuggen. Praktischerweise bietet die Website auch gleich eine Erweiterung für Visual Studio Code an, mit deren Hilfe sich die PWA-Entwicklung deutlich beschleunigen lässt.

(ID:47100725)