Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
-
Upload
jan-jongboom -
Category
Technology
-
view
857 -
download
4
description
Transcript of 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