The document is a presentation about turbocharging mobile web apps. It discusses caching assets like CSS and images to make pages load faster. It introduces ServiceWorkers as a new way to control caching without breaking the web. It also discusses using IndexedDB and libraries like PouchDB to cache app content and sync data offline. The key lessons are to cache the shell assets, cache app content separately using tools like IndexedDB, and use an existing library for data syncing across devices.

1. Turbocharge
your mobile web apps
Jan Jongboom
VelocityConf EU 2013

2. Fast websites are awesome!

3. blah, blah, blah, caching,
blah, expiration headers, blah, blah,
image maps, blah, blah, combining css,
blah, blah, minifying, blah, blah,
blah

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

5. @janjongboom

7. 37%

9. Part 0: Core concepts

10. 1. The shell
2. App content

11. The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly

12. The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly

13. App content
• Everything your app serves up
• Pushed down from server
• Highly volatile
• Changes are cheap

14. App content
• Everything your app serves up
• Pushed down from server
• Highly volatile
• Changes are cheap

15. Part I: The shell

16. Packaging

17. Packaging

18. Publishing on the web = awesome

19. AppCache: a more web’y approach

24. example.appcache
Serve as text/cache-manifest

25. example.appcache
Serve as text/cache-manifest

26. example.appcache
Serve as text/cache-manifest

27. How AppCache works

29. Shit you will do wrong
• Setting wrong MIME type
• Have one !le 404
• Not realizing user will always see old
version !rst
• Expiration headers on appcache
• Develop with appcache enabled
(tip: set wrong MIME type in dev)

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

31. Performance metrics
1500 ms
Empty cache

32. Performance metrics
820 ms
Subsequent reload

33. Performance metrics
320 ms
Reload with appcache

34. 250% speed bump
Not just for of!ine

35. Sounds perfect, right?

36. 1. It breaks the web

37. 2. You’re not in control about caching

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

39. 4. Responsive design is hard

40. Give developers "ne-grained
control about caching, without
breaking the web

41. ServiceWorkers
First request
Grabbing jan.com/index.html

42. ServiceWorkers
First request
Grabbing jan.com/index.html
For foo/* please consult me!

43. ServiceWorkers
2nd request
I need foo/blah

44. ServiceWorkers
2nd request
I need foo/blah

45. ServiceWorkers
2nd request
I need foo/blah
200 OK!

46. Example: registering

47. Example: registering

48. Example: registering

49. Example: use cache

50. Example: use cache

51. Example: use cache

52. Ongoing work in Gecko / Blink

53. Spec & playing around
https://github.com/slightlyoff/ServiceWorker

54. Part II: App content

55. A simple AJAX request

56. A simple AJAX request

57. A simple AJAX request

58. Naive caching with localStorage

59. Naive caching with localStorage

60. Naive caching with localStorage

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

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

65. Part III: Keeping in sync

66. Two way syncing is hard!

67. It all depends
• Operational transform library. F.e. ShareJS
• Objects? F.e. https://github.com/codeparty/racer
• Real deal? PouchDB

68. Why I like PouchDB
1. It stores data locally, syncs when there is connection
2. Can do syncing client->server, server->client, or both ways
3. Con"ict resolution can be easily programmed out.

69. Why I like PouchDB
1. It stores data locally, syncs when there is connection
2. Can do syncing client->server, server->client, or both ways
3. Con"ict resolution can be easily programmed out.
4. Dale Harvey is gonna buy me beer
when I show him this slide

70. Part III: Lessons learned

71. Lessons learned

72. 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

73. Thank you!
slideshare.net/janjongboom

74. slideshare.net/janjongboom
Questions?
Wanna chat about Firefox OS; Of!ine; Mobile
landscape; What beer you should buy Dutch
speakers; etc.?
Of"ce hours with me at 14:45 (Table 3)