Progressive Web Apps

Transcription

1 Progressive Web Apps The web isready, but what about the users? Version: 1.8 Orientation in Objects GmbH Weinheimer Str Mannheim Your Speaker Loris Bachert Trainer, Consultant, 2 1

2 This talk is now available on every device just kidding, that s just what our users expect 3 Installing a native app is painful! Open AppStore Find appin AppStore Click Install Accept permissions Waitforthe download Start the app Duringeachstepan average of 20% ofthe users are lost

3 Visitors per month (top 500 websites vstop 500 apps) 15,7 vs 6 million million Web Apps Source: comscore Mobile Metrix, U.S, Time spent per month (top 500 websites vstop 500 apps) 11 vs 187 minutes minutes Web Apps Source: comscore Mobile Metrix, U.S,

4 Functionality Reach& Accessibility 7 Talking about userexpectations 8 4

5 Users expect your app to work while being online Users expect your app to work while commuting 5

6 Users expect your app to work while traveling Users expect your app to work at any time 6

7 Users expect your app to inform about news Users expect your app to show new things 7

8 Users expect your app to look familiar Users expect your app to be in the app drawer 8

9 Lots ofexpectations fora native app!

10 The usersneedtobetaught about PWAs Progressive Web Apps area moderntype ofweb applications arecombiningthe advantagesofnative and web are websites which fullfill user expectations of native apps 20 10

11 Progressive Web Apps arejust websites that took all the right vitamins. Alex Russel

12 About Progress 23 Installability 24 12

13 App Install Banner Proactive information that the app can be installed Replacement for: 25 Service Manifest? HTTPS Interest Worker??? 26 13

14 Web App Manifest JSON file Contains metadata about the app Defines design and behaviour of the installed app 27 theme_color icon name background_color 28 14

15 Offline Availibility 29 Service Worker Background thread Can beusedasa proxyfornetworkrequests Can use browser cache and database 30 15

16 Website Webserver Request data Cache 31 Website Webserver return service worker Cache 32 16

17 Website Service Worker Webserver prepare service worker installation Cache 33 Website Service Worker Webserver request data Cache 34 17

18 Website Service Worker Webserver return data Cache 35 Website Service Worker Webserver cache data Cache 36 18

19 Website Service Worker Webserver return data Cache 37 Website Service Worker Webserver request data Cache 38 19

20 Website Service Worker Webserver fetch data from cache Cache 39 Website Service Worker Webserver return data Cache 40 20

21 Website Service Worker Webserver return data Cache 41 Browser Tabs Service Worker Webserver 42 21

22 Tell users about the network state Tell users about the offline availibility 22

23 45 Background Sync 46 23

24 Background Sync Queue tasks while offline Execute tasks when online again New API, only supported in Chrome yet 47 User is offline User sendsa message User sends another message User deletes first message Task Task Task User is online Queue 48 24

25 Tell users about the synchronization state Tell users about conflicts 25

26 Push Notifications 51 Push Server Website register at push server Service Worker Web Server 52 26

27 Push Server Website create subscription and send ittoserver Service Worker Web Server 53 Push Server Website use subscription and send message to push server Service Worker Web Server 54 27

28 Push Server send message to service worker Website Service Worker Web Server 55 Tell users about Hey What s up? Hey What s up? Want Want togotothecinema? I m bringing another freind. I m bringing *friend another freind. *friend push events 28

29 Ifyouwon ttellthem you might get caught User Interface 58 29

30 a PWAismorelike a native appthan Designing a responsive website 59 You should use existing guidelines 30

31 61 You should use default fonts 31

32 63 You should Native App Web App PWA keep your app smart 32

33 56 MB 9,6 MB 150 KB Android ios PWA 65 You should use an app shell 33

34 You should make your app fast You should avoid bouncing content 34

35 You should use existing APIs 70 35

36 You should use Google Lighthouse Google Lighthouse Provides KPIs for different metrics Hasa completechecklisthowtobea PWA Helpsyoukeepyourappsmart, clean and usable 72 36

37 Tosumitup 73 Be a teacher Teach users about(maybe) unexpected features Tell users why you need permissions 74 37

38 Be available even while being offline Queue tasks done while being offline... and execute them when you are online again 75 Be transparent Show connection state changes Inform about caching state Inform about data synchronisation 76 38

39 Be trustworthy Don t abuse push notifications Notify the user about incoming push notifications Don t spam! 77 Be familiar Use default components Use default fonts Use an appshell 78 39

40 Be usable Avoid bouncing content Keep the app small Start fast 79 Success Story: Twitter 75% moretweets Bounce rate reducedby 20% Only3% asbigasthe native Android app

41 Success Story: AliExpress Increased conversion rate by104% Users visittwiceasmuch pages as before 81 Success Story: Tinder Startup time from11,91 to 4,69 seconds reduced 90% smallerthanthe native Android App Users stay longer

42 Success Story: Uber Startup time in lessthan 3 secondson a 2G network Only50 kb 83 Let s talk about the future 42

43 By 2020, Progressive Web Apps will have replaced 50% of generalpurposeconsumerfacingapps. Gartner Research 85 Users will be even more tired of apps 43

44 Users will You User A good PWA learn to love it Everyone is on board 44

45 ?????? Orientation Objects GmbH Weinheimer Str Mannheim Thank you for your attenttion! Orientation in Objects GmbH Weinheimer Str Mannheim 45

46 Further reading Image Sources #60 Left: Middle: Right: #62 Left: Middle: Right: #67: #83 -#86: #87: All otherpicturesinsidethispresentation originatefromhttps://pixabay.com and areundercc0 Creative Commons license or were created by myself