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, minify...
New tricks!
Didn’t even exist when “High Performance Websites” came out
@janjongboom
37%
Part 0: Core concepts
1. The shell
2. 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
...
http://comoyo.github.io/ffos-list-detail
Performance metrics

1500 ms
Empty cache
Performance metrics

820 ms
Subsequent reload
Performance metrics

320 ms
Reload with appcache
250% speed bump
Not 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
ServiceWorkers
First request

Grabbing jan.com/index.html
ServiceWorkers
First request

Grabbing jan.com/index.html

For foo/* please consult me!
ServiceWorkers
2nd request

I need foo/blah
ServiceWorkers
2nd request

I need foo/blah
ServiceWorkers
2nd 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 around
https://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 da...
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 conten...
Thank you!

slideshare.net/janjongboom
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Upcoming SlideShare
Loading in …5
×

Develop:BBC 2013 - Turbocharge your mobile web apps by using offline

1,085 views
985 views

Published on

Offline is awesome. Overview of packaged apps, appcache, service workers, caching AJAX requests, etc.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,085
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Develop:BBC 2013 - Turbocharge your mobile web apps by using offline

  1. 1. Turbocharge your mobile web apps Jan Jongboom @janjongboom
  2. 2. Speed is awesome!
  3. 3. blah, blah, blah, caching, blah, expiration headers, blah, blah, image maps, blah, blah, combining css, blah, blah, minifying, blah, blah, blah
  4. 4. New tricks! Didn’t even exist when “High Performance Websites” came out
  5. 5. @janjongboom
  6. 6. 37%
  7. 7. Part 0: Core concepts
  8. 8. 1. The shell 2. App content
  9. 9. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly
  10. 10. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly
  11. 11. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap
  12. 12. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap
  13. 13. Part I: The shell
  14. 14. Packaging
  15. 15. Packaging
  16. 16. Publishing on the web = awesome
  17. 17. AppCache: a more web’y approach
  18. 18. example.appcache Serve as text/cache-manifest
  19. 19. example.appcache Serve as text/cache-manifest
  20. 20. example.appcache Serve as text/cache-manifest
  21. 21. How AppCache works
  22. 22. 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)
  23. 23. http://comoyo.github.io/ffos-list-detail
  24. 24. Performance metrics 1500 ms Empty cache
  25. 25. Performance metrics 820 ms Subsequent reload
  26. 26. Performance metrics 320 ms Reload with appcache
  27. 27. 250% speed bump Not just for of!ine
  28. 28. Sounds perfect, right?
  29. 29. 1. It breaks the web
  30. 30. 2. You’re not in control about caching
  31. 31. 3. You’re not in control about of!ine behavior
  32. 32. 4. Responsive design is hard
  33. 33. Give developers "ne-grained control about caching, without breaking the web
  34. 34. ServiceWorkers First request Grabbing jan.com/index.html
  35. 35. ServiceWorkers First request Grabbing jan.com/index.html For foo/* please consult me!
  36. 36. ServiceWorkers 2nd request I need foo/blah
  37. 37. ServiceWorkers 2nd request I need foo/blah
  38. 38. ServiceWorkers 2nd request I need foo/blah 200 OK!
  39. 39. Example: registering
  40. 40. Example: registering
  41. 41. Example: registering
  42. 42. Example: use cache
  43. 43. Example: use cache
  44. 44. Example: use cache
  45. 45. Ongoing work in Gecko / Blink
  46. 46. Spec & playing around https://github.com/slightlyoff/ServiceWorker
  47. 47. Part II: App content
  48. 48. A simple AJAX request
  49. 49. A simple AJAX request
  50. 50. A simple AJAX request
  51. 51. Naive caching with localStorage
  52. 52. Naive caching with localStorage
  53. 53. Naive caching with localStorage
  54. 54. Making it less naive • Use indexedDB: http://nparashuram.com/IndexedDBShim/ • Wrap around current AJAX lib • Expiration dates • Of"ine -> ignore expiration date
  55. 55. Example: AngularJS/indexedDB https://github.com/comoyo/ffos-list-detail/ blob/master/www/js/services/http-cache.js
  56. 56. Part IV: Lessons learned
  57. 57. Lessons learned
  58. 58. 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
  59. 59. Thank you! slideshare.net/janjongboom

×