Progressive Web Apps
-
Upload
inovex-gmbh -
Category
Software
-
view
226 -
download
0
Transcript of Progressive Web Apps
![Page 1: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/1.jpg)
Progressive Web Apps
Jonas Moosmann 15. Juni 2016
![Page 2: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/2.jpg)
2
Jonas Moosmann
Softwareentwickler (M.Sc.)
@JonasMoosmann
MobileWeb .NET
![Page 3: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/3.jpg)
● 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
![Page 4: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/4.jpg)
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
![Page 5: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/5.jpg)
5
‘Progressive Web Apps take advantage of new technologies to bring the best of mobile sites and
native apps to users.’
Quelle: Google Developers
![Page 6: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/6.jpg)
6
● Service Workers● Wieso nicht App Cache?● Web App Manifest● Push API
Überblick
![Page 7: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/7.jpg)
● 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
![Page 8: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/8.jpg)
8
Service Workers - Beispiel
![Page 9: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/9.jpg)
9
“Application Cache is a Douchebag.”
Quelle: Jake Archibald - A List Apart
![Page 10: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/10.jpg)
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?
![Page 11: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/11.jpg)
● 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
![Page 12: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/12.jpg)
12
Web App Manifest - Beispiel
![Page 13: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/13.jpg)
● 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
![Page 14: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/14.jpg)
14
Push API - Beispiel
![Page 15: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/15.jpg)
15
Kompatibilität
Web App Manifest
Service Workers
Push API
![Page 16: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/16.jpg)
16
Demo
● App zum Empfang von Push-Nachrichten● Technologien
○ Service Worker○ Push-API○ Web App Manifest
● Ausgeführt unter Android/Chrome
![Page 17: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/17.jpg)
17
Hinzufügen zum Startbildschirm
- Adressleiste sichtbar- Shortname aus Manifest- “Installieren” der Web App
- Teilweise nicht aus Spezifikation
![Page 18: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/18.jpg)
18
Öffnen der Web App
- Kein Splashscreen im Manifest- Generierter Splashscreen- Titel aus Manifest
- Teilweise nicht aus Spezifikation
![Page 19: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/19.jpg)
19
Darstellung der Web App
- Ansicht “Standalone”- Adressleiste nicht sichtbar
- Ähnlichkeit zu nativer App
![Page 20: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/20.jpg)
20
Empfang einer Push-Nachricht
- Ansicht Lockscreen- Gewöhnliche Push-Nachricht
![Page 21: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/21.jpg)
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
![Page 22: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/22.jpg)
22
● Chrome & Firefox○ Bereits einsetzbar
● Edge○ In Arbeit
● Safari○ positive Signale ➝ 5-year plan
● Weitere Technologien○ Web Background Sync
Ausblick
![Page 23: Progressive Web Apps](https://reader031.fdocument.pub/reader031/viewer/2022021813/58ae8b771a28abdf068b50dd/html5/thumbnails/23.jpg)
Vielen Dank
Jonas Moosmann
Softwareentwickler
inovex GmbH
Ludwig-Erhard-Allee 6
76131 Karlsruhe