Download - Progressive Web Apps

Transcript
Page 1: Progressive Web Apps

Progressive Web Apps

Jonas Moosmann 15. Juni 2016

Page 2: Progressive Web Apps

2

Jonas Moosmann

Softwareentwickler (M.Sc.)

@JonasMoosmann

MobileWeb .NET

Page 3: Progressive Web Apps

● 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

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

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

6

● Service Workers● Wieso nicht App Cache?● Web App Manifest● Push API

Überblick

Page 7: Progressive Web Apps

● 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

8

Service Workers - Beispiel

Page 9: Progressive Web Apps

9

“Application Cache is a Douchebag.”

Quelle: Jake Archibald - A List Apart

Page 10: Progressive Web Apps

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

● 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

12

Web App Manifest - Beispiel

Page 13: Progressive Web Apps

● 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

14

Push API - Beispiel

Page 15: Progressive Web Apps

15

Kompatibilität

Web App Manifest

Service Workers

Push API

Page 16: Progressive Web Apps

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

17

Hinzufügen zum Startbildschirm

- Adressleiste sichtbar- Shortname aus Manifest- “Installieren” der Web App

- Teilweise nicht aus Spezifikation

Page 18: Progressive Web Apps

18

Öffnen der Web App

- Kein Splashscreen im Manifest- Generierter Splashscreen- Titel aus Manifest

- Teilweise nicht aus Spezifikation

Page 19: Progressive Web Apps

19

Darstellung der Web App

- Ansicht “Standalone”- Adressleiste nicht sichtbar

- Ähnlichkeit zu nativer App

Page 20: Progressive Web Apps

20

Empfang einer Push-Nachricht

- Ansicht Lockscreen- Gewöhnliche Push-Nachricht

Page 21: Progressive Web Apps

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

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

Vielen Dank

Jonas Moosmann

Softwareentwickler

inovex GmbH

Ludwig-Erhard-Allee 6

76131 Karlsruhe

[email protected]