VuePress.de

Progressive Web Apps

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.

Info

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.

Viele Frameworks bieten Out of the box schon alles an, damit eine PWA erstellt werden kann. So kann man mit dem Vue CLI auch direkt alles generieren lassen, was eine PWA benötigt.

Bei Vuepress muss man die manifest.json manuell erzeugen. Mein One-Click Deploy Projekt enthält die manifest.json, die natürlich bearbeitet und an die eigene Website angepasst werden muss.

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. Bei Vuepress kann jede erweiterte Funktionalität mit Vue.js und Vuex entwickelt werden.

Wie funktioniert die App?

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.

Info

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

Vuepress.de erzielt hier die Werte 97, 91, 100, 100, 89.