1

Building Offline Web Apps

FOR THE NEXT BILLION USERS
 2

Next
Billion
Users
 3

Next
Billion
Users
Including the baby
 4

YOU

No, Not
The
Regular
Nerd
 5

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

@codebeast

CHRISTIAN NWAMBA
SCOTCH.IO ANGULAR NIGERIA

INSTRUCTOR / WRITER ORGANIZER

JS PREACHER CLOUDINARY FORLOOP LAGOS

DEV ADVOCATE / MARKETING ORGANIZER

 7

Offline Web Apps

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

What is
that one
saying?
 9

It’s like saying

“Heaven on Earth”
 10

Offline web apps

are NOT entirely
offline
 11

...but they create an

illusion

...like when you say

“Heaven on Earth”
 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
 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
 14

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

We could have just ...and served you

PREFETCHED content when you’re
KraksTV videos OFFLINE or have POOR
when you had a connection
stable internet
 16

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

Progressive Web Apps

Another Intimidating Big
Thing to Learn!!
 18

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

HOW?
 20

Source: UDACITY
 21

WHAT’S A CACHE?
 22

MEET THE SERVICE

WORKER!
https://www.youtube.com/watch?v=QiXLais
Cq10
 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.
 24

THE PROCESS
NETWORK

CACHE

REQUEST
 25

Source: Google Dev

 26

MANIFEST FILE

ADD TO HOME SCREEN VERY FAST

SPLASH SCREEN STANDALONE APP

 27

Who Even Uses this Thing?

Let’s See Some Successful
Use Cases!
 28

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

Source: Auth0
 29

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

Source: Auth0
 30

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

Source: Auth0
 31

Considerations
Mobile != Web
 32

- Image optimization (use - Prefetching

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

I bet you’re dealing

with mixed feelings
right now
 34

EXCITEMENT!!!
 35

...But How Do I START?

 36

DEMO
Let’s See an Example
 37

LIVE
https://goo.gl/GdDLUd
 38

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

Thanks!
Twitter: @codebeast