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

1. Turbocharge
your mobile web apps
Jan Jongboom
@janjongboom

2. Speed is 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
• 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

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

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

63. Part IV: Lessons learned

64. Lessons learned

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

66. Thank you!
slideshare.net/janjongboom