Progressive Web Apps

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