Werkzeuge¶
Chrome¶
Es wird empfohlen, Chrome als Browser zu verwenden, da dieser Browser die besten Entwicklertools für Progressive Web Apps zur Verfügung stellt. Insbesondere ist es empfehlenswert, das Plugin Lighthouse für die Developertools von Chrome zu installieren.
Lighthouse¶
Lighthouse ist ein Plugin für die Chrome-Developertools, mit dessen Hilfe gemessen werden kann, wie progressive eine App ist. Installieren Sie sich dieses Plugin, um auch die Performance Ihrer PWA zu messen.
Integrated Development Environment (IDE)¶
Für die Webentwicklung stehen Ihnen viele gute Entwicklungswerkzeuge zur Verfügung. Für welches Sie sich entscheiden, bleibt Ihnen überlassen. Hier eine Auswahl der aus meiner Sicht besten Entwicklungswerkzeuge:
Für die Tools von Jetbrains benötigen Sie einen Account. Mit Ihrer HTW-E-Mail-Adresse bekommen Sie aber eine kostenlose Hochschullizenz und können so die Enterprise-Versionen kostenlos nutzen. Sublime Text ist Shareware und fragt regelmäßig, ob Sie spenden möchten.
Node.js¶
Node.js ist eine JavaScript-Laufzeitumgebung. Node.js reagiert auf Ereignisse und antwortet asynchron. Das bedeutet, dass die Ausführung einer Ereignisbearbeitung nicht zum Blockieren der Laufzeitumgebung führt, sondern nebenläufig weitere Ereignisse eintreffen können, die ebenfalls asynchron behandelt werden. Dies geschieht mithilfe des Callback-Patterns. Laden Sie sich hier die aktuellste Version von Node.js herunter und installieren Sie diese auf Ihrem Rechner.
Android Studio¶
Um unsere PWAs als mobile Webanwendungen zu emulieren, benutzen wir Android Studio. Es ist für Mac, Linux und Windows verfügbar. Laden Sie es sich herunter und installieren Sie es. Sie können es herunterladen und installieren, ohne einen Google-Account anzulegen (es gibt auch keinen Grund, das zu tun ;-)).
https für localhost¶
- für Mac siehe hier
https für Webserver¶
Icons erzeugen und in die manifest.webmanifest eintragen¶
Es ist ziemlich mühsam, alle benötigten Icons für die unterschiedlichen Plattformen zu erzeugen und dann noch die entsprechenden Einträge in der manifest.webmanifest vorzunehmen. Zum Glück gibt es aber ein Werkzeug, das das für uns übernimmt: pwa-asset-generator. Sie benötigen nur das Ausgangsicon in Originalgröße und alles andere wird für Sie erledgt. Alles weitere dazu steht hier.
WebApp-Manifest-Generator¶
Bei der Erstellung Ihrer manifest.webmanifest können Sie sich auch unterstützen lassen, nämlich hier oder hier.
Workbox¶
Workbox ist eine JavaScript-Bibliothek, die alle wesentlichen Funktionalitäten von service workern bereitstellt.