Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Working connected to create offline 
Chris Heilmann, Trondheim Developer Conference, ← there, 24/11/2014
We live in exciting times.
Going online is not a thing anymore…
Natural service integration
Single location service aggregation
Automatic updates and notifications
Seamless data retention and syncing
A steady stream of amazing data
With us as consumers and creators
http://selfiebrush.com/
Voice recognition and wearables
oh…
We live in exciting times.
The future won’t have flying cars and 
limitless connectivity.
Physics is still again st us… 
https://www.flickr.com/photos/52686644@N04/6304054115/ MokshaDolphin
Geography is against us
World Wide Web(ish)…
IDC: Worldwide Smartphone Forecast by Region
Homegrown conce rns…
Can we trust wha t we don’t know?
What is the cloud?
Someone else’s computer.
We are constantly being monitored.
There’s a need for an offline web, but 
we conditioned people not to believe 
in it.
https://www.youtube.com/watch?v=gnbLLQwZxeA
http://removephotodata.com
The current tools are OK(ish)…
Offline apps - caching resources 
http://caniuse.com/#search=appcache
Offline apps - storing resources 
http://caniuse.com/#search=webstorage
Offline apps - storing larger resources
We need to use them well, so that 
people start trusting the web to be 
offline capable and theirs to own.
I am not alone in this… 
ALEX FEYERKE — OFFLINE FIRST 
https://www.youtube.com/watch?v=dPz_5-MEvcg
We’re working on the solution…
A great solution attempt: ServiceWorker 
https://www.youtube.com/watch?v=4uQMl7mFB6g
More in depth (with demos and all) 
https://www.youtube.com/watch?v=SmZ9XcTpMS4
In the meantime, prepare for the next 
challenge…
Think offline 
first!
Offline ideas… 
• Store static, unchanged content using AppCache 
• Offer interfaces for users (“do you want to store 
thi...
LocalForage vs. XHR experiment 
http://www.peterbe.com/plog/localforage-vs.-xhr
Be frugal with 
your resources.
Put the web on a diet… 
• Slim down your dependencies - do you really 
need bootstrap, jQuery and those huge hero 
images ...
Find extra fat and remove it! 
https://www.youtube.com/watch?v=Qrzf1lsBMMw
Find extra fat and remove it!
Let’s mWaek leiv eth ein weexbc itwinogr ldti-mweidse. again
Chris Heilmann 
christianheilmann.com 
@codepo8 
chris.heilmann@gmail.com 
Thank you!
Working connected to create offline - Trondheim Developer Conference 2014
Working connected to create offline - Trondheim Developer Conference 2014
Working connected to create offline - Trondheim Developer Conference 2014
Upcoming SlideShare
Loading in …5
×

Working connected to create offline - Trondheim Developer Conference 2014

3,519 views

Published on

One of the main problems that the web has is that it doesn’t work when you are offline. That’s one of the reasons why HTML5 is not the revolution that replaces native apps. In this talk Chris Heilmann of Mozilla shows just how much developers can benefit from working online and what you can do to ensure that the users of our products have a great offline experience. “Offline first” is a great principle, and we can use the web to achieve it.

Published in: Education

Working connected to create offline - Trondheim Developer Conference 2014

  1. 1. Working connected to create offline Chris Heilmann, Trondheim Developer Conference, ← there, 24/11/2014
  2. 2. We live in exciting times.
  3. 3. Going online is not a thing anymore…
  4. 4. Natural service integration
  5. 5. Single location service aggregation
  6. 6. Automatic updates and notifications
  7. 7. Seamless data retention and syncing
  8. 8. A steady stream of amazing data
  9. 9. With us as consumers and creators
  10. 10. http://selfiebrush.com/
  11. 11. Voice recognition and wearables
  12. 12. oh…
  13. 13. We live in exciting times.
  14. 14. The future won’t have flying cars and limitless connectivity.
  15. 15. Physics is still again st us… https://www.flickr.com/photos/52686644@N04/6304054115/ MokshaDolphin
  16. 16. Geography is against us
  17. 17. World Wide Web(ish)…
  18. 18. IDC: Worldwide Smartphone Forecast by Region
  19. 19. Homegrown conce rns…
  20. 20. Can we trust wha t we don’t know?
  21. 21. What is the cloud?
  22. 22. Someone else’s computer.
  23. 23. We are constantly being monitored.
  24. 24. There’s a need for an offline web, but we conditioned people not to believe in it.
  25. 25. https://www.youtube.com/watch?v=gnbLLQwZxeA
  26. 26. http://removephotodata.com
  27. 27. The current tools are OK(ish)…
  28. 28. Offline apps - caching resources http://caniuse.com/#search=appcache
  29. 29. Offline apps - storing resources http://caniuse.com/#search=webstorage
  30. 30. Offline apps - storing larger resources
  31. 31. We need to use them well, so that people start trusting the web to be offline capable and theirs to own.
  32. 32. I am not alone in this… ALEX FEYERKE — OFFLINE FIRST https://www.youtube.com/watch?v=dPz_5-MEvcg
  33. 33. We’re working on the solution…
  34. 34. A great solution attempt: ServiceWorker https://www.youtube.com/watch?v=4uQMl7mFB6g
  35. 35. More in depth (with demos and all) https://www.youtube.com/watch?v=SmZ9XcTpMS4
  36. 36. In the meantime, prepare for the next challenge…
  37. 37. Think offline first!
  38. 38. Offline ideas… • Store static, unchanged content using AppCache • Offer interfaces for users (“do you want to store this for later?”) • Check battery status and remind people to store instead of polling and storing. • Start with a very simple, easy to cache version that loads more on demand. • Store resources locally (libraries, fonts, images)
  39. 39. LocalForage vs. XHR experiment http://www.peterbe.com/plog/localforage-vs.-xhr
  40. 40. Be frugal with your resources.
  41. 41. Put the web on a diet… • Slim down your dependencies - do you really need bootstrap, jQuery and those huge hero images when the user is on a mobile? • Think about icon fonts, sprites and other ways to reduce HTTP requests - anything you can collate into a single resource, you can cache. • Are you using whole fonts when you only need a few chars? Do you need all the weights and versions of the font?
  42. 42. Find extra fat and remove it! https://www.youtube.com/watch?v=Qrzf1lsBMMw
  43. 43. Find extra fat and remove it!
  44. 44. Let’s mWaek leiv eth ein weexbc itwinogr ldti-mweidse. again
  45. 45. Chris Heilmann christianheilmann.com @codepo8 chris.heilmann@gmail.com Thank you!

×