PWA: Portable Webanwendungen statt nativer Apps · 9 © Orientation in Objects GmbH PWA: Portable Webanwendungen statt nativer Apps 17 1.Ladezeiten von 11,91 auf 4,69 Sekunden 2.90

1

Orientation in Objects GmbH

Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]:

PWA: Portable

Webanwendungen statt

nativer Apps

1.0

PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH

Abstract

Mobile First war gestern, Offline First heißt die neue Devise.

Mit diesem Credo kommen Progressive Web Apps (PWA)

nicht nur sehr nahe an native Smartphone-Applikationen

heran, sie erhöhen vor allem die User Experience bei

fehlender oder sehr schlechter Internetverbindung und

müssen nicht mehr über App Stores ausgeliefert werden.

Anhand einer Beispielapplikation werden wir die

Grundkonzepte wie Service Worker, Application Shell,

Caching und Push Notifications diskutieren und einen

Ausblick auf die mobilen Anwendungen der Zukunft werfen.

2

2


http://www.braintime.de

OIO Braintime

Ihr Atlassian Platinum Solution Partner

Methoden, Werkzeuge und Lösungen

http://www.oio.de

Ihr Expertenhaus für Softwareentwicklung

mit Java und JavaScript

Schulung, Beratung und Programmierung

Zwei OIO Marken

3


Ihre Sprecher

4

Trainer, Berater, Entwickler

Falk Sippach (@sippsack)

Architektur

Agile Softwareentwicklung

CodequalitätCo-Organisator

Commiter DukeCon

3


Zusammenschluss Trivadis und OIO

• Im Mai diesen Jahres haben sich Trivadis und Orientation in Objects (OIO)

zusammengeschlossen. Gemeinsam stärken und erweitern wir unser Angebot im Bereich

Java und agiler Softwareentwicklung.

5

Gemeinsam bieten wir ein

zwölfmonatiges Trainee-

Programm an, das Experten

für Java- und

Webtechnologien ausbildet.

Neu finden Sie im Trivadis

Trainingsangebot auch Kurse,

die von der OIO entwickelt und

durchgeführt werden.

PWA: Portable Webanwendungen statt nativer Apps© Orientation in Objects GmbH 6

To APP or to Web?

4


Open AppStoreFind app in AppStore

Click „Install“

Acceptpermissions

Wait for thedownload…

Start theapp

During each step an average of 20% of the

users are lost

1000 800 640 512 409 327

7

Installing a native app is painful!


Native Apps

5


Mobile WebanwendungenTop 500 Mobile Apps vs. Top 500 Mobile Websites

15,7

7

0 2 4 6 8 10 12 14 16 18

Ø Besucher (Millionen/Monat)

App Webseite

11,9

186,9

0 50 100 150 200

Ø Zeit pro Benutzer (Minuten/Monat)

App Webseite

Quelle: comScore Mobile Metrix, U.S, 2017


Mobile Webanwendungen

6


Größe App vs. Web


Hybrid Apps

# Webanwendung im Container verpackt (Cordova)

# Unterstützung für verschiedene Plattformen

# Schnittstellen zum Betriebssystem/Ressourcen

# weitere Alternative: Cross-Plattform-Apps

# Generierung von Apps (unterschiedl. Plattformen)

7


Cordova


Alternative PWA?

#1 Offline-First (keine oder schwache Verbindung)

#2 Progressiv und responsiv

#3 Sicher (https)

#4 Push-Benachrichtigungen

#5 Schnelle Ladezeiten, stets up-to-date

#6 Suchmaschinen-tauglich, verlinkbar

#7 "Installierbar", App-ähnliches Verhalten

8


1. 75 % mehr Tweets geschickt

2. Absprungrate um 20 % runter

3. Push-Nachrichten bei

geschlossener PWA

Quelle: https://pwa.bar/

Success Story: Twitter


1. Einnahmen von User

Generated Ads um 44 % hoch

2. nur 150 KB groß (Android:

9,6 MB, iOS: 56 MB)


Success Story: Pinterest

9


1. Ladezeiten von 11,91 auf

4,69 Sekunden

2. 90 % kleiner als die native

Android App

3. Nutzer verweilen länger

Success Story: Tinder



Hello, PWA!

App-Shell

Service Worker

Caching

UX Patterns

Ausblick

PWA – will ich auch!

10


Hello, PWA!


Progressive

Web

Apps

11


Progressive

21

enhancement

vs.

vs. Graceful Degradation

# Funktionalität Schritt für Schritt hinzufügen


Web

12


Apps


Erste Schritte zur PWA

#1 bestehende Webseite/-anwendung (HTML/CSS/JS)

#2 HTTPS verwenden

#3 Manifest-JSON hinzufügen

#4 Service Worker hinzufügen

#5 Daten cachen und aus Cache ausliefern

#6 Push-Benachrichtigungen einrichten

13


Offlinefähig


App-Shell

14


Application Shell

Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

App Shell Inhalt


Application Shell

# HTML/CSS Grundgerüst

# weitere statische Ressourcen

# wenig Daten, schnell laden

# seitenspezifischen Inhalt asynchron nachladen

# statisch und optional dynamischen Inhalt cachen

15


Web App Manifest

# JSON (siehe https://w3c.github.io/manifest/)

# Name, Kurzname, Beschreibung der App

# Hintergrund- und Themefarbe

# verschiedengroße Icons (Home-/Splashscreen)

# Sprache, Ausrichtung, Display, Start-URL, …

<link rel="manifest" href="manifest.json">


Web App Manifest{

"short_name": "Hallo",

"name": "Hallo, PWA!",

"icons": [{

"src": "images/icon_128.png",

"sizes": "128x128",

"type": "image/png" }, {

...

}],

"start_url": "./index.html",

"display": "standalone",

"background_color": "#2196f3",

"theme_color": "#2196f3"

}

16


Service Worker


Service Worker

# eine Art Interceptor/Proxy

# Steuerung des Netzwerk-Zugriffs

# Skript, das im Hintergrund läuft (Webworker)

# kein Zugriff auf den DOM

# Kommunikation mit Seite über postMessage

17


Initialer Seitenaufruf (1/7)

33

Webseite Webserver

Cache

Daten anfordern



34

Webseite Webserver

Cache

Service Workerzurückgeben

18



35

Webseite Webserver

Cache

Service Worker

Service Worker Installation vorbereiten



36

Service WorkerWebseite Webserver

Cache

Daten anfordern

19



37


Cache

Datenzurückgeben



38


Cache

Datencachen

20



39


Cache

Datenzurückgeben


Registrierung

// Service Worker aus JavaScript-Datei registrieren

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/serviceWorker.js');

}

21


Registrierung

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js', {scope: './'})

.then((registration) => {

console.log('Registrierung erfolgreich.')

})

.catch((error) => {

console.log('Registrierung fehlgeschlagen:' + error);

});

});

}


Online Status

// Änderungen im Netzwerkstatus abonieren

window.addEventListener('online', (event) => { ... });

window.addEventListener('offline', (event) => { ... });

// adhoc-Abfrage ob online

if (navigator.onLine) { ... }

22


Lebenszyklus

Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures


Service Worker Events

self.addEventListener('install', (event) => { ... }); // InstallEvent

self.addEventListener('activate', (event) => { ... }); // ExtendableEvent

self.addEventListener('message', (event) => { ... }); // MessageEvent

self.addEventListener('fetch', (event) => { ... }); // FetchEvent

self.addEventListener('sync', (event) => { ... }); // SyncEvent

self.addEventListener('push', (event) => { ... }); // PushEvent

23


Nicht unterbrechen!

addEventListener('install', event => {

event.waitUntil(async function() {

// Cache befülllen

const cache = ...

}());

});


Benachrichtigungen

# Notifications API (Benutzer erteilt Erlaubnis)

# App kann dem User modale Hinweise anzeigen

# Push Notifications über Drittanbieter (Google)

# User stimmt Registrierung auf Drittserver zu

# Backend schickt Nachricht an Drittserver

# Drittserver leitet Nachricht an Service Worker

24


Caching


Offline Seitenaufruf (1/4)

48


Cache

Daten anfordern

25



49


Cache

Prüfen, ob Datenbereits im Cache sind



50


Cache

Datenzurückgeben

26



51


Cache

Datenzurückgeben


Daten in den Cache

addEventListener('install', event => {

event.waitUntil(async function() {

const cache = await caches.open('static-v1');

await cache.addAll([

'/', '/about/', '/static/styles.css'

]);

}());

});

27


Daten aus dem Cache

addEventListener('fetch', event => {

event.respondWith(

self.caches.match(event.request)

.then((response) => {

if (response) {

return response; // cached response

}

const fetchRequest = event.request.clone();

return fetch(fetchRequest); // network reponse

})

);

});


Fehlendes nachtragenaddEventListener('fetch', event => {

event.respondWith(

self.caches.match(event.request)

.then((response) => {

if (response) {

return response; // cached response

}

const fetchRequest = event.request.clone();

return fetch(fetchRequest).then((response) => {

if(!response || response.status !== 200 || response.type !== 'basic') {

return response; // network reponse which should not be cached

}

const responseToCache = response.clone();

self.caches.open(name)

.then((cache) => cache.put(event.request, responseToCache

return response; // network reponse

});

})

);

});

28


Caching Strategien

#1 Network or Cache

#2 Cache only

#3 Cache and update

#4 Cache, update and refresh

#5 Embedded fallback


UX-Patterns

29


Paradigmenwechsel

PWA-Verhalten != Benutzer-Erwartung

#1 PWAs können mehr, als erwartet

auch offline lauffähigautomatische Updates und BenachrichtigungenWebseiten verhalten sich wie native Apps

#2 PWAs scheinen schlechter zu sein

Daten zeitweise veraltet


UX-Guidelines

#1 User führen und anleiten

#2 Zustände und Unwägbarkeiten sichtbar machen

#3 Background-Ereignisse kommunizieren

#4 Benutzer-Interaktion gewähren lassen

30


UX-Notifications

#1 Zustand des Service Workers kommunizieren

Offline-Status anzeigen

#2 Allgemeine Meldungen:

Caching komplettSeite gecachedAktion fehlgeschlagen, wird später fortgesetztBenachrichtigungen wurden eingeschaltet


User-Design

#1 Content springt nicht beim Nachladen

#2 Hilfstexte einblenden (Hinzufügen als App, …)

31


Fazit


Die Zukunft von PWAs

„By 2020, Progressive Web Apps will have replaced 50% of general-purpose consumerfacing apps.“

– Gartner Research

32


Alle im Boot?

# Initiator und Vorreiter: Chrome (Google)

# Early Adopter: Firefox

# Lange gewehrt: Apple Safari

# Hinkte etwas hinterher: Edge (jetzt aber auch egal)


Is Service Worker ready?

https://jakearchibald.github.io/isserviceworkerready/

33


Frameworks und Tools

Workboxsw-precachesw-toolbox


Entwicklung und Debuggen

https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/

34


PWA-Checkliste

#1 PWA Baseline Checklist#2 Indexability & Social#3 User Experience#4 Performance#5 Caching#6 Push Benachrichtigungen#7 Andere Features

https://developers.google.com/web/progressive-web-apps/checklist


PWAs als Windows-Apps

# First-Class-App-Citizens unter Windows 10

# PWAs im Windows App Store hochladbar

# Suchmaschine trägt PWAs in App Store ein

35


PWAs bei Apple

# lange dagegen gewehrt

# Unterstützung seit iOS 11.3 (Safari 11.1)

# hält sich aber nicht immer an die Spec

# u. a. noch keine Push Notifications


Links

• https://developers.google.com/web/ilt/pwa/

• https://serviceworke.rs

• https://jakearchibald.com/2016/caching-best-practices/

• https://developers.google.com/web/showcase/

• https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

• https://developers.google.com/web/tools/lighthouse/

• https://developers.google.com/web/tools/workbox/

• https://github.com/NekR/offline-plugin

• https://www.pwabuilder.com

• https://github.com/pinterest/service-workers

• https://github.com/GoogleChromeLabs

• https://github.com/facebook/create-react-app

• https://www.polymer-project.org/2.0/toolbox/

• https://github.com/vuejs-templates/pwa

• https://cli.angular.io/

70

https://developers.google.com/web/ilt/pwa/

https://serviceworke.rs/

https://jakearchibald.com/2016/caching-best-practices/

https://developers.google.com/web/showcase/

https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

https://developers.google.com/web/tools/lighthouse/

https://developers.google.com/web/tools/workbox/

https://github.com/NekR/offline-plugin

https://www.pwabuilder.com/

https://github.com/pinterest/service-workers

https://github.com/GoogleChromeLabs

https://github.com/facebook/create-react-app

https://www.polymer-project.org/2.0/toolbox/

https://github.com/vuejs-templates/pwa

https://cli.angular.io/

36


Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]

??

? ?

????

Fragen ?


Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]

Vielen Dank für Ihre

Aufmerksamkeit !

37


Vielen Dank für Euer Feedback!

Documents

PWA: Portable Webanwendungen statt nativer Apps · 9 © Orientation in Objects GmbH PWA: Portable Webanwendungen statt nativer Apps 17 1.Ladezeiten von 11,91 auf 4,69 Sekunden 2.90