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

Like this? Share it with your network

Share

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

on

  • 968 views

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

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

Statistics

Views

Total Views
968
Views on SlideShare
942
Embed Views
26

Actions

Likes
2
Downloads
5
Comments
0

2 Embeds 26

https://twitter.com 24
http://janjongboom.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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