Progressive Web Apps erstellen 8 Tools für PWA-Entwickler

Autor / Redakteur: Christian Rentrop / Stephan Augsten

Progressive Web Apps sind eine praktische Methode, um Webdienste ohne App-Stores als App auf verschiedenen Betriebssystemen anzubieten. Um diese zu entwickeln, sind jedoch einige Werkzeuge vonnöten.

Firmen zum Thema

Die Website Dev-Insider als rudimentäre Progressive Web App.
Die Website Dev-Insider als rudimentäre Progressive Web App.
(Bild: Vogel IT-Medien)

Einen Webservice auch als Progressive Web App anzubieten, hat eine Reihe von Vorteilen. Allerdings ist die Umsetzung nicht immer ganz trivial, zumal verschiedene Betriebssysteme und Browser möglicherweise verschiedene Vorgehensweisen bei der Entwicklung erfordern können. Dennoch ist PWA-Entwicklung keine Zauberei – und mit den richtigen Werkzeugen schnell zu bewerkstelligen.

ReactJS: Open-Source-JavaScript-Bibliothek

Eines der interessantesten Tools für die PWA-Entwicklung ist ReactJS: Die kostenlose quelloffene JavaScript-Bibliothek ermöglicht mit einem einfachen Befehl die Erstellung einer universellen PWA für eine Vielzahl von Browsern und Betriebssystemen mit Ausnahme des Apple-Ökosystems. Nach der eigentlichen Erstellung der Web-App müssen nur noch die jeweilige Manifest-Datei und der Service-Worker eingebunden werden. Übrigens können mit dem Ableger React Native auch direkt native Apps für iOS und Android entwickelt werden.

Chromium-Browser Microsoft Edge und Google Chrome

Mit Microsofts neuem Edge-Browser auf Chromium-Basis und Google Chrome ist es möglich, jede Website als Progressive Web App unter macOS oder Windows zu installieren. Das ist perfekt, um zum Beispiel schnell und einfach zu überprüfen, ob das bestehende Layout sich bereits für den Einsatz als Progressive Web App eignet oder um eine häufig besuchte Website als App zu verwenden.

Möglich ist das über die App-Funktion des Browsers (Edge) beziehungsweise über die Erstellung einer Verknüpfung (Chrome). Diese „Quick-and-dirty-PWA“ sind dann mit zwei Klicks erstellt und können getestet und verwendet werden. Zusätzlich findet sich im Entwickler-Bereich von Microsoft sowie bei den Google Developers eine interessante Anleitung für die Erstellung vollständiger Progressive Web Apps für die Chromium-Plattform, also die Browser Edge, Chrome und Safari.

Polymer Project

Bei Polymer handelt es sich wie bei ReactJS um eine Open-Source-JavaScript-Bibliothek, die unter anderem von Google gepflegt wird. Sie ist dafür gedacht, Web-Anwendungen und -Komponenten zielgerichtet und effizient zu entwickeln. Neben Google verwenden zum Beispiel Dienste wie Netflix oder Unternehmen wie Coca-Cola die Library, um Web-Anwendungen herzustellen, inklusive Progressive Web Apps.

ScandiPWA für Magento

Das Magento-Webshop-System ist der Quasi-Standard für die Erstellung leistungsfähiger Online-Shops. Mit dem Open-Source-Theme ScandiPWA kann es um PWA-Funktionen erweitert werden. Das erlaubt die einfache Erstellung von Webshops, die auch als PWA genutzt werden können. ScandiPWA unterstützt über 350 Magento-Funktionen, ist frei skalierbar und kommt ohne zusätzliche externe Tools aus. Dadurch besteht großes Potenzial für die Einsparung von Entwicklungskosten.

Vue.JS mit Quasar-Framework

Auch die beliebte JavaScript-Framework Vue.JS kann bei der Entwicklung progressiver Web-Apps helfen: Durch das zusätzliche Quasar-Framework können sowohl Mobile-Apps als auch Desktop-Apps, Browser-Erweiterungen und natürlich PWAs erstellt werden. Dabei werden neben Windows auch Android, MacOS und Linux als Plattformen unterstützt. Praktisch ist, dass sich bestehende App-Projekte sehr leicht in andere umwandeln lassen.

Ionic

Auch bei Ionic handelt es sich um ein Entwickler-Framework, das sich auf die Erstellung von Apps spezialisiert hat. Entwickler können auf zahlreiche voreingestellte Komponenten zurückgreifen, zudem ist Ionic mit Vue.JS verbunden. Ionic verspricht eine besonders schnelle und effiziente App-Entwicklung mit Low-Code-Elementen. Die Adaptive-Styling-Funktion ermöglicht eine besonders schnelle Entwicklung attraktiver Frontends sowohl für PWAs als auch für andere Apps.

Svelte

Das Component-Framework Svelte bewirbt sich selbst als „völlig neuer Ansatz für den Bau von User-Interfaces“. Bei der Entwicklung von PWAs kann das nur hilfreich sein: Svelte ermöglicht den einsteigerfreundlichen Bau besonders schneller Apps, indem es nicht nur einen Editor mit Vorschaufunktion bietet, sondern sich auch auf HTML, CSS und JavaScript beschränkt. Die Erstellung notwendiger und nach eigenen Angaben besonders flinker JS-Module erfolgt anschließend durch Kompilierung.

PWA Builder

Der PWA-Builder ist ein besonders interessantes Tool, wenn es darum geht, eine bestehende Website in eine PWA umzuwandeln: Ursprünglich von Microsoft initiiert, bietet die Website die Möglichkeit, eine URL abzufragen und auf ihre PWA-Tauglichkeit zu untersuchen. Was banal klingt, ist in der Praxis sehr hilfreich: So zeigt der Service an, welche Komponenten wie gut umgesetzt sind und welche Arbeitsschritte noch benötigt werden, um eine Website als PWA zur Verfügung zu stellen. Gleichzeitig bietet PWA Builder die Möglichkeit, die entsprechenden Komponenten nachzurüsten.

(ID:47061269)

Über den Autor

 Christian Rentrop

Christian Rentrop

IT-Fachautor