Moderne Web-Applikationen werden immer mächtiger und können zunehmend nativen Applikationen die Stirn bieten. Insbesondere im mobilen Umfeld spielt dies eine große Rolle, da sich so hohe Entwicklungsaufwände vermeiden lassen. Schließlich sind Web-Applikationen auf den verschiedenen mobilen Plattformen gleichermaßen lauffähig. Dennoch besitzen Web Apps gegenüber nativen Apps Einschränkungen. In diesem Vortrag soll gezeigt werden, wie neue Standards diese Probleme lösen und so Applikationen ermöglichen, die nicht mehr von nativen Apps zu unterscheiden sind. Die daraus resultierende App wird dann häufig als Progressive Web App bezeichnet. Vorkenntnisse: Grundverständnis des Web Lernziele: Der Vortrag soll den Hörern einen allgemeinen Überblick über Technologien verschaffen, die in modernen Web-Applikationen zum Einsatz kommen. Des Weiteren soll ein Verständnis für ihre Notwendigkeit geschaffen werden. Event: enterJS, 16.06.2016, Darmstadt Speaker: Jonas Moosmann, inovex GmbH Weitere Tech-Vorträge: https://www.inovex.de/de/content-pool/vortraege/

1. Progressive Web Apps
Jonas Moosmann 15. Juni 2016

2. 2
Jonas Moosmann
Softwareentwickler (M.Sc.)
@JonasMoosmann
MobileWeb .NET

3. ● Nativ
○ Viele Schritte bis zur Verwendung der App nötig
○ 1,6 Millionen im Play Store [Statista, Juli 2015]
○ 1,5 Millionen im App Store [Statista, Juli 2015]
● Web
○ App direkt nutzbar
○ Funktionsumfang geringer (!?)
○ Bedienbarkeit schlechter
3
Mobiles Umfeld: heute

4. 4
● Bestehende Technologien
○ App Cache und Co. sind problembehaftet
● Frameworks
○ limitiert durch Browser
● Proprietäre Ansätze
○ hoher Aufwand und plattformabhängig
Lösungen im Web: heute

5. 5
‘Progressive Web Apps take advantage of new
technologies to bring the best of mobile sites and
native apps to users.’
Quelle: Google Developers

6. 6
● Service Workers
● Wieso nicht App Cache?
● Web App Manifest
● Push API
Überblick

7. ● Hintergrundprozess im Browser
○ Aktivität immer möglich
○ Fungiert als Interceptor
○ Verschiedene Zustände
● Nur unter HTTPS möglich
● Verwendung
○ Caching
○ Offlinefähigkeit
7
Service Workers

8. 8
Service Workers - Beispiel

9. 9
“Application Cache is a Douchebag.”
Quelle: Jake Archibald - A List Apart

10. 10
● Manifest legt Cache fest
● wenig flexibel
○ keine eigene Logik möglich
● einige “Besonderheiten”
○ bedient immer aus dem Cache
○ Updates nur bei Änderung des Manifests
○ Caching des Manifests möglich (!!!)
○ Untergeordnete Ressourcen müssen referenziert werden
Wieso nicht einfach App Cache?

11. ● Zentraler Ort für Metadaten
● JSON-Format
● Löst proprietäre Ansätze ab
● “Installierbarkeit”
● Metadaten, z.B.
○ Name
○ Kurzname
○ Icons
11
Web App Manifest

12. 12
Web App Manifest - Beispiel

13. ● Push-Nachrichten in Web Apps
● Ermöglicht durch Service Worker
○ HTTPS
○ Handling des Push-Events
● Berechtigung nötig
● Push Service wird benötigt
○ Interaktion nicht spezifiziert
13
Push API

14. 14
Push API - Beispiel

15. 15
Kompatibilität
Web App Manifest
Service Workers
Push API

16. 16
Demo
● App zum Empfang von Push-Nachrichten
● Technologien
○ Service Worker
○ Push-API
○ Web App Manifest
● Ausgeführt unter Android/Chrome

17. 17
Hinzufügen zum Startbildschirm
- Adressleiste sichtbar
- Shortname aus Manifest
- “Installieren” der Web App
- Teilweise nicht aus Spezifikation

18. 18
Öffnen der Web App
- Kein Splashscreen im Manifest
- Generierter Splashscreen
- Titel aus Manifest
- Teilweise nicht aus Spezifikation

19. 19
Darstellung der Web App
- Ansicht “Standalone”
- Adressleiste nicht sichtbar
- Ähnlichkeit zu nativer App

20. 20
Empfang einer Push-Nachricht
- Ansicht Lockscreen
- Gewöhnliche Push-Nachricht

21. 21
● Progressive Web Apps eröffnen neue Möglichkeiten
○ Caching (komplexe Strategien)
○ Push-Nachrichten
○ Metainformationen
● Einsetzbarkeit
○ Android → ja
○ Windows Phone → bald!?
○ iOS → nein
● Weitere Spezifikationen notwendig
Fazit

22. 22
● Chrome & Firefox
○ Bereits einsetzbar
● Edge
○ In Arbeit
● Safari
○ positive Signale ➝ 5-year plan
● Weitere Technologien
○ Web Background Sync
Ausblick

23. Vielen Dank
Jonas Moosmann
Softwareentwickler
inovex GmbH
Ludwig-Erhard-Allee 6
76131 Karlsruhe
jonas.moosmann@inovex.de