PWA - Progressive Web Apps

Eine PWA wird bald so selbstverständlich sein, wie eine Responsive Website.

Progressive, also fortschrittliche Web Apps, sollen die Apps der Zukunft werden. So stellt es sich zumindest Google vor. Apps sollen dann nicht mehr über App-Stores installiert werden, sondern einfach über den Browser. Es sei mal dahingestellt, ob sich dieses Model durchsetzt, aber bereits heute haben PWA’s enorme Vorteile verglichen mit normalen Websites.

Eine PWA ist eine Responsive Website, die einige Merkmale besitzt, die wir von nativen Apps kennen. So können z.B. Inhalte auch Offline gelesen werden.

Anforderungen

Folgende Anforderungen müssen erfüllt werden, damit ein Browser die Website als PWA identifiziert.

  • Die Website muss das HTTPS Protokoll unterstützen.
  • Ein Redirect von HTTP zu HTTPS sollte angeboten werden.
  • Eine serviceworker.js muss vorhanden sein.
  • Eine manifest.json muss vorhanden sein.
  • Icons in verschiedenen Größen müssen vorhanden sein

Viele Frameworks bieten Out of the box schon alles an, damit eine PWA erstellt werden kann. So kann man mit dem Vue CLI  direkt alles generieren lassen, was eine PWA benötigt. Für das CMS Scrivito habe ich ein Webpack Template mit einem Scrivito Theme erstellt, das eine PWA zur Verfügung stellt.

Wer Netlify zum Hosting nutzt, kann ein Force HTTPS einstellen. Diese Möglichkeit wird auch bei der kostenlosen Version angeboten

Entwicklung einer PWA

Die Entwicklung einer PWA entspricht der Entwicklung einer normalen Website mit HTML5, CSS 3 und Javascript.

Wie funktioniert eine PWA?

Einem Benutzer, der die Website auf einem Smartphone aufruft, wird ein Banner angezeigt, wo er mit einem Klick die Site zu seinem Homescreen hinzufügen kann. Ruft er später die Site über das Homescreen-Icon auf, sieht er die Site mit einem Look and Feel einer App. So wird z.B. nicht mehr die URL-Leiste angezeigt.

Vorteile einer PWA

  • Die App muss nicht über einen Store bezogen und installiert werden.
  • Die App kann zum Homescreen hinzugefügt werden.
  • Die App funktioniert auch Offline oder mit einer schlechten Verbindung.

Wer es mit seiner Website auf den Homescreen eines Besuchers schafft, hat enorme Wettbewerbsvorteile gegenüber seiner Konkurrenz.

Die fertige App mit Lightroom testen

Entwickler können im Chrome, über die Entwicklertools mit Lightroom, prüfen, ob alle Kriterien für eine PWA erfüllt werden. Einfach auf den Tab Audit klicken und dann Run Audit aufrufen. Dort kann dann angegeben werden was alles geprüft werden soll. Zur Verfügung stehen Tests für

  • Performance
  • PWA
  • Best Practices
  • Accessibility
  • SEO