progressive web apps
Post on 23-Feb-2017
225 Views
Preview:
TRANSCRIPT
Progressive Web Apps
Jonas Moosmann 15. Juni 2016
2
Jonas Moosmann
Softwareentwickler (M.Sc.)
@JonasMoosmann
MobileWeb .NET
● 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
● 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
‘Progressive Web Apps take advantage of new technologies to bring the best of mobile sites and
native apps to users.’
Quelle: Google Developers
6
● Service Workers● Wieso nicht App Cache?● Web App Manifest● Push API
Überblick
● 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
Service Workers - Beispiel
9
“Application Cache is a Douchebag.”
Quelle: Jake Archibald - A List Apart
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?
● 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
Web App Manifest - Beispiel
● 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
Push API - Beispiel
15
Kompatibilität
Web App Manifest
Service Workers
Push API
16
Demo
● App zum Empfang von Push-Nachrichten● Technologien
○ Service Worker○ Push-API○ Web App Manifest
● Ausgeführt unter Android/Chrome
17
Hinzufügen zum Startbildschirm
- Adressleiste sichtbar- Shortname aus Manifest- “Installieren” der Web App
- Teilweise nicht aus Spezifikation
18
Öffnen der Web App
- Kein Splashscreen im Manifest- Generierter Splashscreen- Titel aus Manifest
- Teilweise nicht aus Spezifikation
19
Darstellung der Web App
- Ansicht “Standalone”- Adressleiste nicht sichtbar
- Ähnlichkeit zu nativer App
20
Empfang einer Push-Nachricht
- Ansicht Lockscreen- Gewöhnliche Push-Nachricht
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
● Chrome & Firefox○ Bereits einsetzbar
● Edge○ In Arbeit
● Safari○ positive Signale ➝ 5-year plan
● Weitere Technologien○ Web Background Sync
Ausblick
Vielen Dank
Jonas Moosmann
Softwareentwickler
inovex GmbH
Ludwig-Erhard-Allee 6
76131 Karlsruhe
jonas.moosmann@inovex.de
top related