Offline Apps for The Next Billion Users

Slide 1

Slide 1 text

1 FOR THE NEXT BILLION USERS Building Offline Web Apps

Slide 2

Slide 2 text

2 Next Billion Users

Slide 3

Slide 3 text

3 Next Billion Users Including the baby

Slide 4

Slide 4 text

4 No, Not The Regular Nerd YOU

Slide 5

Slide 5 text

5 ..but, the Smart Engineer that Cares About Your Society YOU

Slide 6

Slide 6 text

6 JS PREACHER CHRISTIAN NWAMBA INSTRUCTOR / WRITER SCOTCH.IO DEV ADVOCATE / MARKETING CLOUDINARY ORGANIZER ANGULAR NIGERIA ORGANIZER FORLOOP LAGOS @codebeast

Slide 7

Slide 7 text

7 Offline Web Apps Why are “Offline” and “Web” in the same title?

Slide 8

Slide 8 text

8 What is that one saying?

Slide 9

Slide 9 text

9 It’s like saying “Heaven on Earth”

Slide 10

Slide 10 text

10 Offline web apps are NOT entirely offline

Slide 11

Slide 11 text

11 ...but they create an illusion ...like when you say “Heaven on Earth”

Slide 12

Slide 12 text

12 Your Very TRUE Story ● Left your home of fast Wifi/3G connectivity ● Jumped on BRT heading to this GDG event ● Tries to watch KraksTV memes while on transit…. oh snap, BAD NETWORK on the road ● Puts Phone back to bag hoping to get here in the next 15 mins

Slide 13

Slide 13 text

13 15 What? In this Our Lagos? ● Of course, you must get stuck in a traffic (it’s Lagos). ● You try to keep yourself busy with KraksTV again ● ...And of course you can’t still afford a reasonably fast 3G to do so ● Then you start to remember how much you hate your life and how you are never moving forward in life

Slide 14

Slide 14 text

14 If that frustrated you, what about those in rural areas (like the kids)?

Slide 15

Slide 15 text

15 We could have just PREFETCHED KraksTV videos when you had a stable internet ...and served you content when you’re OFFLINE or have POOR connection

Slide 16

Slide 16 text

16 48% of 7.5B We’re NOT doing a great job, YET

Slide 17

Slide 17 text

17 Progressive Web Apps Another Intimidating Big Thing to Learn!!

Slide 18

Slide 18 text

18 Concept invented to solve the described problem. That’s all!

Slide 19

Slide 19 text

19 HOW?

Slide 20

Slide 20 text

20 Source: UDACITY

Slide 21

Slide 21 text

21 WHAT’S A CACHE?

Slide 22

Slide 22 text

22 MEET THE SERVICE WORKER! https://www.youtube.com/watch?v=QiXLais Cq10

Slide 23

Slide 23 text

23 A proxy sitting between the client and server (in the browser), running in the background, and could cache items in the browser for future use.

Slide 24

Slide 24 text

24 CACHE NETWORK REQUEST THE PROCESS

Slide 25

Slide 25 text

25 Source: Google Dev

Slide 26

Slide 26 text

26 MANIFEST FILE ADD TO HOME SCREEN SPLASH SCREEN VERY FAST STANDALONE APP

Slide 27

Slide 27 text

27 Who Even Uses this Thing? Let’s See Some Successful Use Cases!

Slide 28

Slide 28 text

28 Flipkart Source: Auth0 ● 3x less data usage ● 40% higher re-engagement rate ● 70% conversion rate

Slide 29

Slide 29 text

29 Housing.com Source: Auth0 ● 40% lower bounce rate ● 30% faster page load ● 10% longer average session

Slide 30

Slide 30 text

30 AliExpress Source: Auth0 ● 104% increase in conversion rate for new users ● 74% increase in time spent per session ● 2X more pages visited

Slide 31

Slide 31 text

31 Considerations Mobile != Web

Slide 32

Slide 32 text

32 - Image optimization (use Cloudinary) - Progressive image delivery (use Cloudinary) - Use bundle splitting a lot - Deferred fetching with lazy loading - Prefetching - Take advantage of cache and web storage - Pretty much every other thing to make your web app fast and deliver better user experience

Slide 33

Slide 33 text

33 I bet you’re dealing with mixed feelings right now

Slide 34

Slide 34 text

34 EXCITEMENT!!!

Slide 35

Slide 35 text

35 ...But How Do I START?

Slide 36

Slide 36 text

36 DEMO Let’s See an Example

Slide 37

Slide 37 text

37 https://goo.gl/GdDLUd LIVE

Slide 38

Slide 38 text

38 Learn PWA: https://git.io/awesome-pwa Resources Demo Code: https://github.com/christiannwamba/igpwa

Slide 39

Slide 39 text

39 Twitter: @codebeast Thanks!