Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim...
Transcript of Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim...
![Page 1: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/1.jpg)
1
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
Progressive Web Apps
1.8
The web is ready,
but what about the users?
PWAs – What about the users?© Orientation in Objects GmbH
Your Speaker
2
Loris Bachert
Trainer, Consultant, Developer
@LorisBachert
![Page 2: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/2.jpg)
2
PWAs – What about the users?© Orientation in Objects GmbH 3
This talk is now available on every device…
… just kidding, that‘s just what our users expect
PWAs – What about the users?© Orientation in Objects GmbH
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
4
Installing a native app is painful!
![Page 3: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/3.jpg)
3
PWAs – What about the users?© Orientation in Objects GmbH 5
15,7 6vs
Web AppsSource: comScore Mobile Metrix, U.S, 2017
Visitors per month(top 500 websites vs top 500 apps)
million million
PWAs – What about the users?© Orientation in Objects GmbH 6
11 187vs
Source: comScore Mobile Metrix, U.S, 2017
Time spent per month(top 500 websites vs top 500 apps)
minutes minutes
Web Apps
![Page 4: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/4.jpg)
4
PWAs – What about the users?© Orientation in Objects GmbH 7
Fu
nct
ion
ali
ty
Reach & Accessibility
PWAs – What about the users?© Orientation in Objects GmbH 8
Talking about
user expectations…
![Page 5: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/5.jpg)
5
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…work while being online
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…work while commuting
![Page 6: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/6.jpg)
6
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…work while traveling
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…work at any time
![Page 7: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/7.jpg)
7
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…inform about news
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…show new things
![Page 8: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/8.jpg)
8
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…look familiar
PWAs – What about the users?© Orientation in Objects GmbH
Users expect your app to…
…be in the app drawer
![Page 9: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/9.jpg)
9
PWAs – What about the users?© Orientation in Objects GmbH 17
Lots of expectations
for a native app!
PWAs – What about the users?© Orientation in Objects GmbH 18
© Orientation in Objects GmbH
![Page 10: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/10.jpg)
10
PWAs – What about the users?© Orientation in Objects GmbH
The users need to be taught…
…about PWAs
PWAs – What about the users?© Orientation in Objects GmbH
… are a modern type of web applications
… are combining the advantages of native and web
… are websites which fullfill user expectations of native apps
20
Progressive Web Apps…
![Page 11: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/11.jpg)
11
PWAs – What about the users?© Orientation in Objects GmbH 21
„Progressive Web Apps are just
websites that took all the right
vitamins.“
– Alex Russel
PWAs – What about the users?© Orientation in Objects GmbH 22
![Page 12: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/12.jpg)
12
PWAs – What about the users?© Orientation in Objects GmbH 23
About Progress
PWAs – What about the users?© Orientation in Objects GmbH 24
Installability
![Page 13: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/13.jpg)
13
PWAs – What about the users?© Orientation in Objects GmbH
− Proactive information that the app can be installed
− Replacement for:
25
App Install Banner
PWAs – What about the users?© Orientation in Objects GmbH
ManifestService Worker
HTTPS Interest
26
? ? ? ?
![Page 14: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/14.jpg)
14
PWAs – What about the users?© Orientation in Objects GmbH
− JSON file
− Contains metadata about the app
− Defines design and behaviour of the installed app
27
Web App Manifest
PWAs – What about the users?© Orientation in Objects GmbH 28
theme_color
icon
background_color
name
![Page 15: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/15.jpg)
15
PWAs – What about the users?© Orientation in Objects GmbH 29
Offline Availibility
PWAs – What about the users?© Orientation in Objects GmbH
− Background thread
− Can be used as a proxy for network requests
− Can use browser cache and database
30
Service Worker
![Page 16: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/16.jpg)
16
PWAs – What about the users?© Orientation in Objects GmbH 31
Website Webserver
Cache
Request data
PWAs – What about the users?© Orientation in Objects GmbH 32
Webserver
Cache
return
service worker
Website
![Page 17: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/17.jpg)
17
PWAs – What about the users?© Orientation in Objects GmbH 33
Webserver
Cache
Service Worker
prepare service worker installation
Website
PWAs – What about the users?© Orientation in Objects GmbH 34
Service Worker Webserver
Cache
request data
Website
![Page 18: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/18.jpg)
18
PWAs – What about the users?© Orientation in Objects GmbH 35
Service Worker Webserver
Cache
return data
Website
PWAs – What about the users?© Orientation in Objects GmbH 36
Service Worker Webserver
Cache
cache
data
Website
![Page 19: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/19.jpg)
19
PWAs – What about the users?© Orientation in Objects GmbH 37
Service Worker Webserver
Cache
return data
Website
PWAs – What about the users?© Orientation in Objects GmbH 38
Service Worker Webserver
Cache
request data
Website
![Page 20: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/20.jpg)
20
PWAs – What about the users?© Orientation in Objects GmbH 39
Service Worker Webserver
Cache
Website
fetch data
from cache
PWAs – What about the users?© Orientation in Objects GmbH 40
Service Worker Webserver
Cache
Website
return
data
![Page 21: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/21.jpg)
21
PWAs – What about the users?© Orientation in Objects GmbH 41
Service Worker Webserver
Cache
return data
Website
PWAs – What about the users?© Orientation in Objects GmbH 42
Service Worker Webserver
Browser Tabs
![Page 22: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/22.jpg)
22
PWAs – What about the users?© Orientation in Objects GmbH
Tell users about…
…the network state
PWAs – What about the users?© Orientation in Objects GmbH
Tell users about…
…the offline availibility
![Page 23: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/23.jpg)
23
PWAs – What about the users?© Orientation in Objects GmbH 45
PWAs – What about the users?© Orientation in Objects GmbH 46
Background Sync
![Page 24: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/24.jpg)
24
PWAs – What about the users?© Orientation in Objects GmbH
− Queue tasks while offline
− Execute tasks when online again
− New API, only supported in Chrome yet
47
Background Sync
PWAs – What about the users?© Orientation in Objects GmbH 48
Task
Task
Task
Queue
User is offline
User sends a message
User sendsanother message
User deletes firstmessage
User is online
![Page 25: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/25.jpg)
25
PWAs – What about the users?© Orientation in Objects GmbH
Tell users about…
…the synchronization state
PWAs – What about the users?© Orientation in Objects GmbH
Tell users about…
…conflicts
![Page 26: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/26.jpg)
26
PWAs – What about the users?© Orientation in Objects GmbH 51
Push Notifications
PWAs – What about the users?© Orientation in Objects GmbH 52
Push Server
register at
push server
Service Worker
Website
Web Server
![Page 27: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/27.jpg)
27
PWAs – What about the users?© Orientation in Objects GmbH 53
Push Server
create subscription
and send it to server
Service Worker
Website
Web Server
PWAs – What about the users?© Orientation in Objects GmbH 54
Push Server
use subscription and
send message to push server
Service Worker
Website
Web Server
![Page 28: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/28.jpg)
28
PWAs – What about the users?© Orientation in Objects GmbH 55
Push Server
send message
to service worker
Service Worker
Website
Web Server
PWAs – What about the users?© Orientation in Objects GmbH
Tell users about…
…push events
Hey
What‘s up?
Want to go to the cinema?
*friend
I‘m bringing another freind.
Hey
What‘s up?
Want to go to the cinema?
I‘m bringing another freind.
*friend
![Page 29: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/29.jpg)
29
PWAs – What about the users?© Orientation in Objects GmbH
If you won‘t tell them…
…you might get caught
PWAs – What about the users?© Orientation in Objects GmbH 58
User Interface
![Page 30: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/30.jpg)
30
PWAs – What about the users?© Orientation in Objects GmbH 59
a PWA is more like
a native app than
a responsive websiteDesigning
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…use existing guidelines
![Page 31: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/31.jpg)
31
PWAs – What about the users?© Orientation in Objects GmbH 61
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…………useuseuseuse defaultdefaultdefaultdefault fontsfontsfontsfonts
![Page 32: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/32.jpg)
32
PWAs – What about the users?© Orientation in Objects GmbH 63
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…keep your app smart
Native App
Web App
PWA
![Page 33: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/33.jpg)
33
PWAs – What about the users?© Orientation in Objects GmbH 65
Android iOS PWA
9,6 MB
56 MB
150 KB
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…use an app shell
![Page 34: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/34.jpg)
34
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…make your app fast
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…avoid bouncing content
![Page 35: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/35.jpg)
35
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…use existing APIs
PWAs – What about the users?© Orientation in Objects GmbH 70
![Page 36: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/36.jpg)
36
PWAs – What about the users?© Orientation in Objects GmbH
You should…
…use Google Lighthouse
PWAs – What about the users?© Orientation in Objects GmbH
− Provides KPIs for different metrics
− Has a complete checklist how to be a PWA
− Helps you keep your app smart, clean and usable
72
Google Lighthouse
![Page 37: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/37.jpg)
37
PWAs – What about the users?© Orientation in Objects GmbH 73
To sum it up…
PWAs – What about the users?© Orientation in Objects GmbH
− Teach users about (maybe) unexpected features
− Tell users why you need permissions
74
Be a teacher
![Page 38: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/38.jpg)
38
PWAs – What about the users?© Orientation in Objects GmbH
− even while being offline
− Queue tasks done while being offline...
…and execute them when you are online again
75
Be available
PWAs – What about the users?© Orientation in Objects GmbH
− Show connection state changes
− Inform about caching state
− Inform about data synchronisation
76
Be transparent
![Page 39: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/39.jpg)
39
PWAs – What about the users?© Orientation in Objects GmbH
− Don‘t abuse push notifications
− Notify the user about incoming push notifications
− Don‘t spam!
77
Be trustworthy
PWAs – What about the users?© Orientation in Objects GmbH
− Use default components
− Use default fonts
− Use an app shell
78
Be familiar
![Page 40: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/40.jpg)
40
PWAs – What about the users?© Orientation in Objects GmbH
− Avoid bouncing content
− Keep the app small
− Start fast
79
Be usable
PWAs – What about the users?© Orientation in Objects GmbH
Success Story: Twitter
− 75% more tweets
− Bounce rate reduced by
20%
− Only 3% as big as the
native Android app
80
https://pwa.bar/
![Page 41: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/41.jpg)
41
PWAs – What about the users?© Orientation in Objects GmbH
Success Story: AliExpress
− Increased conversion
rate by 104%
− Users visit twice as much
pages as before
81
https://pwa.bar/
PWAs – What about the users?© Orientation in Objects GmbH
Success Story: Tinder
− Startup time from 11,91
to 4,69 seconds reduced
− 90% smaller than the
native Android App
− Users stay longer
82
https://pwa.bar/
![Page 42: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/42.jpg)
42
PWAs – What about the users?© Orientation in Objects GmbH
Success Story: Uber
− Startup time in less than
3 seconds on a 2G
network
− Only 50 kB
83
https://pwa.bar/
PWAs – What about the users?© Orientation in Objects GmbH
Let‘s…
…talk about the future
![Page 43: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/43.jpg)
43
PWAs – What about the users?© Orientation in Objects GmbH 85
„By 2020, Progressive Web Apps will
have replaced 50% of general-
purpose consumer facing apps.“
– Gartner Research
PWAs – What about the users?© Orientation in Objects GmbH
Users will…
…be even more tired of apps
![Page 44: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/44.jpg)
44
PWAs – What about the users?© Orientation in Objects GmbH
Users will…
…learn to love it
You
A good
PWA
User
PWAs – What about the users?© Orientation in Objects GmbH
Everyone…
…is on board
![Page 45: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/45.jpg)
45
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
??
? ?
???
?Questions ?
@LorisBachert
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
Thank you for
your attenttion!
![Page 46: Progressive Web Apps - OIO · 1 Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: info@oio.de Progressive Web Apps 1.8 The web isready, but whatabouttheusers?](https://reader035.fdocuments.in/reader035/viewer/2022062916/5ec5702db6670814ed3d7368/html5/thumbnails/46.jpg)
46
PWAs – What about the users?© Orientation in Objects GmbH
Further reading
• https://techbeacon.com/5-ways-ensure-great-ux-progressive-web-apps
• https://pwa.bar/
• https://caniuse.com/#search=api
• https://jakearchibald.github.io/isserviceworkerready/
• https://developer.microsoft.com/en-us/windows/pwa
• https://material.io/design/
• https://developer.apple.com/design/human-interface-guidelines/
• https://console.cloud.google.com/apis/library
91
PWAs – What about the users?© Orientation in Objects GmbH
Image Sources
• #60– Left: https://www.android.com/
– Middle: https://material.io/
– Right: https://angular.io/
• #62– Left: https://www.heise.de/
– Middle: https://t3n.de/
– Right: https://deanhume.github.io/beer/
• #67: https://developers.google.com/pay/api/android/
• #83 - #86: https://pwa.bar/
• #87: – https://de.wikipedia.org/wiki/Datei:Google_Chrome_icon_(September_2014).svg
– https://blog.mozilla.org/firefox/new-firefox-new-firefox-icon/
– https://de.wikipedia.org/wiki/Datei:Microsoft_Edge_logo.svg
– https://commons.wikimedia.org/wiki/File:Safari_browser_logo.svg
All other pictures inside this presentation originate from https://pixabay.com and are under CC0 Creative Commons license or were created by myself.
92