progressive web apps - oio · 1 orientation in objects gmbh weinheimer str. 68 68309 mannheim...
TRANSCRIPT
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
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!
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
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…
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
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
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
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
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
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…
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
12
PWAs – What about the users?© Orientation in Objects GmbH 23
About Progress
PWAs – What about the users?© Orientation in Objects GmbH 24
Installability
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
? ? ? ?
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
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
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
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
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
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
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
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
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
23
PWAs – What about the users?© Orientation in Objects GmbH 45
PWAs – What about the users?© Orientation in Objects GmbH 46
Background Sync
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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/
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/
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
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
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
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!
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