Eine Webseite in eine Progressive Web App verwandeln

Die eigene Webseite auch als installierbare App für den Smartphone zur Verfügung stellen?

Es gibt soweit ich informiert bin 2 verschiedene Möglichkeiten dafür:

  • Eine App für die verschiedenen Betriebssysteme (Android, IOS, usw.) separat programmieren.
  • Eine Webseite in eine Progressive Web App verwandeln.

Eine Progressive Web App ist kurz erklärt eine Webseite die sich auf den Smartphone oder andere Endgeräte als App installieren lässt.

Definitionen und Erklärungen dazu:

Wichtige Information zu Progressive Web Apps.

Auf IOS Geräten funktionieren Progressive Web Apps erst ab IOS Version 11.3. Information dazu: https://caniuse.com/

Eine Webseite lässt sich ohne viel Aufwand in eine Progressive Web App verwandeln, je nachdem welche Funktionalität die App erfüllen muss kann es also lohnen die Webseite in eine Progressive Web App zu verwandeln ansttat eine eigenständige App zu programmieren. Die Vorteile sind dass man dabei sehr viel Zeit und Geld sparen kann. (Programmieraufwand, Lizenzkosten, usw.)

Voraussetzungen damit man eine Webseite in eine Progressive Web App verwandeln kann:

  • HTTPS: Die Webseite sollte über HTTPS laufen.
  • Responsive: Die Webseite sollte sich an den verschiedenen Bildschirmgrössen anpassen.

Schritte um eine Webseite in eine Progressive Web App zu verwandeln

Es braucht eigentlich nur 2 Dateien um eine Webseite in eine Progressive Web App zu verwandeln:

  • Manifest.json: Diese Datei wird benötigt um die Progressive Web App auf den Smartphone zu installieren, damit lässt sich steuern wie die App dem Benutzer angezeigt wird.
  • Service Worker: Diese Datei wird benötigt für das Caching der App, damit lässt sich das Offline-Erlebniss der App für den Benutzer steuern.

Eine gute und einfache Anleitung in der alle Schritte ausführlich erklärt werden: https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605

Die offizielle Anleitung von Google: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp?hl=de

Zur Kontrolle ob man die Webseite erfolgreich in eine Progressive Web App verwandelt hat bietet Google das Tool Google Lighthouse.

Weitere Informationen zu Lighthouse: https://developers.google.com/web/tools/lighthouse

Kommentar eingeben