Progressive Web Apps (PWA) sind aktuell in vieler Munde, denn sie sind besonders attraktiv durch ihre schnelle Ladezeit und die Offlinefähigkeit. Hinter diesem Buzzword steht so einiges, wie man hier bei t3n nochmal nachlesen kann. Man kann sie wie eine App auf dem Startbildschirm ablegen, muss sich allerdings nichts dafür herunterladen. Hier findet ihr einen guten Überblick auf der Google Developer Site.
PWAs waren auch das Thema des inovex Meetup vom 28.09.2016 was in deren Hamburger Büro stattfand. Danke nochmal an die Organisatoren für ein spannendes Meetup in einem schönen Büro und für die leckere Pizza!
Progressive Web Apps – ein Überblick
Jonas Mossmann
Was sind PWAs? Im Prinzip bringen sie dem Nutzer das Beste von mobilen Seiten und nativen Apps. Sie laufen mit Service Workern, die ein Hintergrundprozess im Browser sind. Sie stehen zwischen dem business und dem Internet und eine Aktivität ist immer möglich. Sie laufen nur mit HTTPS, was sie sicherer macht. Verwenden kann man sie zum Caching und für die Offlinefähigkeit.
Beim App Cache ist das Problem, dass er nicht so flexibel ist. Es gibt ein Manifest, allerdings wird auch nur bei dessen Änderung der App Cache geupdated. Außerdem bedient er sich, wenn ein Mal etwas gecacht wurde, immer aus dem Cache, was keine Aktualität ermöglicht.
Das Web App Manifest ist ein zentraler Ort für die Metadaten wie Name, Kurzname, Icons, etc.. Es wird im JSON-Format verfasst und sorgt für die „Installierbarkeit“. Wenn man auf seinem Handy angibt, dass man eine PWA auf seinem Startbildschirm hinzufügen möchte, dann ist der Kurzname in dem folgenden Fenster bereits eingetragen und auch das Icon ist bereits vorhanden.
Durch die Push API kann man auch Push Nachrichten verschicken, nachdem der Nutzer die Berechtigung dafür erteilt hat. Dies ist nur durch den Service Worker möglich.
Aktuell kann man PWAs leider nur auf Android Geräten nutzen und noch nicht auf iOS. Sie sind mit Chrome und Firefox kompatibel, Edge ist gerade dabei, sie möglich zu machen und in Safari funktionieren sie leider noch nicht, aber vielleicht ändert sich das noch in den kommenden Jahren.
Hier noch meine Sketchnotes des Vortrags:
PWAs am Beispiel von kontaktlinsen-preisvergleich.de
Marco Pöhler
Marco berichtete darüber, dass er eine PWA für kontaktlinsen-preisvergleich.de schreiben wollte. Dadurch hat er sich eine hohe Geschwindigkeit erhofft und auf die Offlinefähigkeit gesetzt. Er hat sich überlegt, dass ein Nutzer, der gerne eine regelmäßige Erinnerung erhalten möchte, seine Kontaktlinsen zu wechseln, dafür nicht extra eine App installieren wollen würde, sondern eher auf Push Nachrichten anspringen würden. Die Seite, die es schon eine Weile gibt, sollte also „modernisiert“ werden. Seine Ziele waren also die Änderung der Datenstruktur, ein Update der Technologie und eine dauerhafte Kundenbeziehung.
Im Frontend arbeitet er mit:
- material-design-lite CSS // Less
- ES6 // Babel
- sw-precache
Im Backend nutzt er:
- Java
- App Engine Standard Environment
- Google Data Store
- SendGrid
- Google Cloud Endpoints
- Google Cloud Messaging (bald: Firebase Cloud Messaging)
Das Buildtool ist Gradle. Man kann in sw-precache seine gewünschte Cache-Logik hinterlegen und daraus wird dann ein Service Worker generiert. Dafür kann man folgende Strategien nutzen: fastest, networkFirst, cacheFirst, networkOnly, cahceOnly. Da es aber die Problematik gibt Online – Lie-Fi – Offline, bei der ein Telefon im Lie-Fi denkt, es sei online, es aber gar nicht ist, sollte der Ansatz cacheFirst (auch OfflineFirst genannt) gewählt werden. Eine Komponente, die auch die Performance der PWA beeinflusst, ist die App Shell.
Grundsätzlich kann er zum Testen der manifest.json das Chrome Plugin „Lighthouse“ empfehlen, da der ServiceWorkerLifecycle wohl etwas zickig sein soll. Auch die Chrome DevTools seien sehr nützlich, denn unter dem Punkt „Application“ kann man Einstellungen für den Service Worker vornehmen und auch das „Clear Storage“ nutzen.
Weitere Vorteile:
- Mit Hilfe der App Shell wird vieles vorgeladen und dient daher der Schnelligkeit.
- Die build-in Strategien des SW sind auch durch eigene Strategien erweiterbar.
- Per Klick sind die PWAs vom Startbildschirm zu erreichen.
- Die PWA wird im Fullscreen geöffnet und sieht nicht aus wie ein Browser.
- Nichts muss installiert werden, um die PWA auf seinem Telefon zu nutzen (Gegensatz zu App).
Auch hierfür habe ich Sketchnotes erstellt:
Ich denke PWAs sind im Kommen und man wird in Zukunft noch vieles darüber lesen/hören können. Das Meetup fand ich sehr informativ und freue mich schon auf das nächste Mal!