Erstellen einer Progressive Web App ( PWA )
In einem vorherigen Post habe ich meinen kleinen Notenrechner vorgestellt.
In diesem Post möchte ich basierend darauf eine Progressive Web App vorstellen welche Online wie Offline funktioniert. Und welche man auch dann laden kann wenn der Browser offline ist.
Die Seite sowie den Quellcode findet hier hier:
Notenrechner:
https://kayschneider.github.io/notenRechner/#/calc
Quellcode:
https://github.com/KaySchneider/notenRechner
Was genau eine Progressive Web App ist, wird hier erklärt:
https://developers.google.com/web/progressive-web-apps/
In diesem kleinen Notenrechner, widme ich mich nur der Offline Funktionalität der kleinen App. Der Notenrechner soll online und offline gleichermaßen funktionieren.
Dazu benötigen wir einen Service Worker, welcher uns den gewünschten content herunterlädt und beim Nutzer auf die Festplatte ablegt, dort kann nun auch im Offline Modus auf die Inhalte zugegriffen werden. Als positiver Nebeneffekt, lädt die Seite auch schneller zumindest beim zweiten Besuch der Seite da die Inhalte schon beim Nutzer liegen.
Wichtig ist als erstes ein manifest.json einzubinden und eure Seite muss via SSL ausgeliefert werden. Dazu kann man auch die gesamte check liste von google durchgehen:
https://developers.google.com/web/progressive-web-apps/checklist
Hier ein Beispielhaftes manifest.json:
<div class=“gist”>https://gist.github.com/KaySchneider/ecdb98d24e6db6c3ca18879aac31cf2f</div>
Wichtig ist das das manifest.json folgende Attribute enthält:
- name Der Name wird im Installations Banner angezeigt
- short_name Dieser Name wird auf dem Home screen angezeigt und sollte kürzer sein
Die Icons sollten in den unterschiedlichen größen hinterlegt werden, dies erleichtert das auffinden eurer progressive Web App auf dem Handy enorm.
Das Attribute start_url enthält die zu startende Seite wenn der Nutzer die Anwendung startet. Hier kann man auch ein tracking Parameter hinzufügen start_url:“?utm_source=homescreen”. Somit könnt ihr tracken wieviel Nutzer eure app wirklich auch vom Homescreen heraus starten.
Mit dem Attribut display kann man die Anwendung im Browser öffnen lassen oder standalone. Der standalone Modus fühlt sich mehr wie eine Anwendung an.
Mögliche Werte für das Attribut display:
- browser Öffnet die Anwendung im Browser
- standalone Öffnet die Anwendung im Standalone Modus(ähnlich wie eine App)
Weiterführende Informationen zum Thema Web manifest finden sich hier:
https://developer.mozilla.org/en-US/docs/Web/Manifest
Der wichtigste Teil in diesem Beitrag ist der Service Worker.
http://blog.yakisch.com/post/159010205729/progressive-web-apps-teil-2-service-worker