develop:bbc 2013 - turbocharge your mobile web apps by using offline

Turbocharge your mobile web apps

Jan Jongboom@janjongboom

Speed is awesome!

blah, blah, blah, caching, blah, expiration headers, blah, blah,

image maps, blah, blah, combining css, blah, blah, minifying, blah, blah,

blah

New tricks!Didn’t even exist when “High Performance Websites” came out

@janjongboom

37%

Part 0: Core concepts

1. The shell2. App content

The shell

• All assets• Distribution through:

• App store• Publish on web server

• Changes are costly

The shell

• All assets• Distribution through:

• App store• Publish on web server

• Changes are costly

App content

• Everything your app serves up• Pushed down from server• Highly volatile• Changes are cheap

App content

• Everything your app serves up• Pushed down from server• Highly volatile• Changes are cheap

Part I: The shell

Packaging

Packaging

Publishing on the web = awesome

AppCache: a more web’y approach

example.appcache

Serve as text/cache-manifest

example.appcache

Serve as text/cache-manifest

example.appcache

Serve as text/cache-manifest

How AppCache works

Shit you will do wrong

• Setting wrong MIME type• Have one !le 404• Not realizing user will always see old

version !rst• Develop with appcache enabled

(tip: set wrong MIME type in dev)

http://comoyo.github.io/ffos-list-detail

Performance metrics

1500 msEmpty cache

Performance metrics

820 msSubsequent reload

Performance metrics

320 msReload with appcache

250% speed bumpNot just for of!ine

Sounds perfect, right?

1. It breaks the web

2. You’re not in control about caching

3. You’re not in control about of!ine behavior

4. Responsive design is hard

Give developers "ne-grained control about caching, without

breaking the web

ServiceWorkersFirst request

Grabbing jan.com/index.html

ServiceWorkersFirst request

Grabbing jan.com/index.html

For foo/* please consult me!

ServiceWorkers2nd request

I need foo/blah

ServiceWorkers2nd request

I need foo/blah

ServiceWorkers2nd request

I need foo/blah

200 OK!

Example: registering

Example: registering

Example: registering

Example: use cache

Example: use cache

Example: use cache

Ongoing work in Gecko / Blink

Spec & playing aroundhttps://github.com/slightlyoff/ServiceWorker

Part II: App content

A simple AJAX request

A simple AJAX request

A simple AJAX request

Naive caching with localStorage

Naive caching with localStorage

Naive caching with localStorage

Making it less naive

• Use indexedDB: http://nparashuram.com/IndexedDBShim/• Wrap around current AJAX lib• Expiration dates• Of"ine -> ignore expiration date

Example: AngularJS/indexedDB

https://github.com/comoyo/ffos-list-detail/blob/master/www/js/services/http-cache.js

Part IV: Lessons learned

Lessons learned

Lessons learned

• Of"ine is awesome, speed is awesome!• Cache shell: packaging, appcache or ServiceWorkers• Cache content: localStorage, indexedDB, write cache logic that

suits you• Data syncing: hard, take something off the shelf

Thank you!

slideshare.net/janjongboom