Progressive Web Apps

Jonas Moosmann

15. Juni 2016

Jonas Moosmann Softwareentwickler (M.Sc.) @JonasMoosmann

Web

Mobile

.NET 2

Mobiles Umfeld: heute ● 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

Lösungen im Web: heute ● Bestehende Technologien ○

App Cache und Co. sind problembehaftet

● Frameworks ○

limitiert durch Browser

● Proprietäre Ansätze ○

hoher Aufwand und plattformabhängig

4

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

Quelle: Google Developers 5

Überblick ● ● ● ●

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

6

Service Workers ● 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 - Beispiel

8

“Application Cache is a Douchebag.”

Quelle: Jake Archibald - A List Apart 9

Wieso nicht einfach App Cache? ● 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

10

Web App Manifest ● ● ● ●

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 - Beispiel

12

Push API ● 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 - Beispiel

14

Kompatibilität

Web App Manifest Service Workers Push API 15

Demo ● ●

App zum Empfang von Push-Nachrichten Technologien ○ ○ ○

●

Service Worker Push-API Web App Manifest

Ausgeführt unter Android/Chrome

16

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

17

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

18

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

19

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

20

Fazit ● 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 21

Ausblick ● Chrome & Firefox ○

Bereits einsetzbar

● Edge ○

In Arbeit

● Safari ○

positive Signale ➝ 5-year plan

● Weitere Technologien ○

Web Background Sync 22

Vielen Dank Jonas Moosmann Softwareentwickler inovex GmbH Ludwig-Erhard-Allee 6 76131 Karlsruhe [email protected]