Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
2 likes1,249 views
The document discusses strategies to enhance the speed and performance of mobile web apps, focusing on leveraging caching techniques and modern tools like Service Workers and AppCache. It outlines the importance of managing app content and shell, providing insights into proper packaging and potential pitfalls in caching. Lessons learned emphasize the complexities of offline capabilities and the need for tailored caching logic to achieve optimal performance.
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
- 1. Turbocharge your mobile web apps Jan Jongboom @janjongboom
- 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
- 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)
- 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
- 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
- 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!
- 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
- 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