PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First...

34
1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim www.oio.de [email protected] Version: 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

Transcript of PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First...

Page 1: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[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-Applikationenheran, sie erhöhen vor allem die User Experience beifehlender oder sehr schlechter Internetverbindung undmüssen nicht mehr über App Stores ausgeliefert werden.Anhand einer Beispielapplikation werden wir dieGrundkonzepte wie Service Worker, Application Shell,Caching und Push Notifications diskutieren und einenAusblick auf die mobilen Anwendungen der Zukunft werfen.

2

Page 2: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

2

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

Ihre Sprecher

Trainer, Berater, Entwickler

3

Falk Sippach (@sippsack)

ArchitekturAgile Softwareentwicklung

CodequalitätCo-Organisator

Commiter DukeCon

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

To APP or to Web?

Page 3: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

3

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

Native Apps

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

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

Page 4: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

4

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

Mobile Webanwendungen

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

Größe App vs. Web

Page 5: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

5

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

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)

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

Cordova

Page 6: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

6

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

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

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

1. 75 % mehr Tweets geschickt

2. Absprungrate um 20 % runter

3. Push-Nachrichten bei

geschlossener PWA

Quelle: https://pwa.bar/

Success Story: Twitter

Page 7: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

7

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

1. Einnahmen von User

Generated Ads um 44 % hoch

2. nur 150 KB groß (Android:

9,6 MB, iOS: 56 MB)

Quelle: https://pwa.bar/

Success Story: Pinterest

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

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

Quelle: https://pwa.bar/

Page 8: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

8

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

Hello, PWA!

App-Shell

Service Worker

Caching

UX Patterns

Ausblick

PWA – will ich auch!

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

Hello, PWA!

Page 9: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

9

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

Progressive

Web

Apps

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

Progressive

18

enhancement

vs.

vs. Graceful Degradation

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

Page 10: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

10

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

Web

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

Apps

Page 11: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

11

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

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

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

Offlinefähig

Page 12: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

12

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

App-Shell

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

Application Shell

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

App Shell Inhalt

Page 13: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

13

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

Application Shell

# HTML/CSS Grundgerüst

# weitere statische Ressourcen

# wenig Daten, schnell laden

# seitenspezifischen Inhalt asynchron nachladen

# statisch. und optional dynamischen Inhalt cachen

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

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

Page 14: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

14

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

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"

}

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

Service Worker

Page 15: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

15

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

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

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

Initialer Seitenaufruf (1/7)

30

Webseite Webserver

Cache

Daten anfordern

Page 16: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

16

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

Initialer Seitenaufruf (2/7)

31

Webseite Webserver

Cache

Service Worker

zurückgeben

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

Initialer Seitenaufruf (3/7)

32

Webseite Webserver

Cache

Service Worker

Service Worker Installation vorbereiten

Page 17: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

17

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

Initialer Seitenaufruf (4/7)

33

Service WorkerWebseite Webserver

Cache

Daten anfordern

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

Initialer Seitenaufruf (5/7)

34

Service WorkerWebseite Webserver

Cache

Daten

zurückgeben

Page 18: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

18

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

Initialer Seitenaufruf (6/7)

35

Service WorkerWebseite Webserver

Cache

Daten

cachen

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

Initialer Seitenaufruf (7/7)

36

Service WorkerWebseite Webserver

Cache

Daten

zurückgeben

Page 19: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

19

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

Registrierung

// Service Worker aus JavaScript-Datei registrieren

if ('serviceWorker' in navigator) {

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

}

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

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 );

});

});

}

Page 20: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

20

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

Online Status

// Änderungen im Netzwerkstatus abonieren

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

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

// adhoc-Abfrage ob online

if (navigator. onLine ) { ... }

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

Lebenszyklus

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

Page 21: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

21

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

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

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

Nicht unterbrechen!

addEventListener('install', event => {

event.waitUntil (async function() {

// Cache befülllen

const cache = ...

}());

});

Page 22: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

22

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

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

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

Caching

Page 23: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

23

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

Offline Seitenaufruf (1/4)

45

Service WorkerWebseite Webserver

Cache

Daten anfordern

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

Offline Seitenaufruf (2/4)

46

Service WorkerWebseite Webserver

Cache

Prüfen, ob Daten

bereits im Cache sind

Page 24: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

24

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

Offline Seitenaufruf (3/4)

47

Service WorkerWebseite Webserver

Cache

Daten

zurückgeben

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

Offline Seitenaufruf (4/4)

48

Service WorkerWebseite Webserver

Cache

Daten

zurückgeben

Page 25: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

25

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

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']);

}());});

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

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

}));

});

Page 26: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

26

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

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, responseToCachereturn response; // network reponse

});})

);});

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

Caching Strategien

#1 Network or Cache

#2 Cache only

#3 Cache and update

#4 Cache, update and refresh

#5 Embedded fallback

Page 27: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

27

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

UX-Patterns

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

Paradigmenwechsel

PWA-Verhalten != Benutzer-Erwartung

#1 PWAs können mehr, als erwartet

auch offline lauffähig

automatische Updates und Benachrichtigungen

Webseiten verhalten sich wie native Apps

#2 PWAs scheinen schlechter zu sein

Daten zeitweise veraltet

Page 28: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

28

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

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

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

UX-Notifications

#1 Zustand des Service Workers kommunizieren

Offline-Status anzeigen

#2 Allgemeine Meldungen:

Caching komplett

Seite gecached

Aktion fehlgeschlagen, wird später fortgesetzt

Benachrichtigungen wurden eingeschaltet

Page 29: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

29

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

User-Design

#1 Content springt nicht beim Nachladen

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

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

Fazit

Page 30: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

30

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

Die Zukunft von PWAs

„By 2020, Progressive Web

Apps will have replaced 50%

of general-purpose consumer

facing apps.“

– Gartner Research

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

Alle im Boot?

# Initiator und Vorreiter: Chrome (Google)

# Early Adopter: Firefox

# Lange gewehrt: Apple Safari

# Hinkt etwas hinterher: Microsoft Edge (aber ist dabei)

Page 31: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

31

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

Is Service Worker ready?

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

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

Frameworks und Tools

Workbox

sw-precache

sw-toolbox

Page 32: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

32

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

Entwicklung und Debuggen

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

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

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

Page 33: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

33

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

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

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

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/

66

Page 34: PWA: Portable Webanwendungen statt nativer Apps€¦ · Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur

34

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]

??

? ?

????

Fragen ?

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]

Vielen Dank für Ihre Aufmerksamkeit !