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.

1. Working connected to create offline
Chris Heilmann, Trondheim Developer Conference, ← there, 24/11/2014

2. We live in exciting times.

3. Going online is not a thing anymore…

4. Natural service integration

5. Single location service aggregation

6. Automatic updates and notifications

7. Seamless data retention and syncing

8. A steady stream of amazing data

9. With us as consumers and creators

13. http://selfiebrush.com/

14. Voice recognition and wearables

15. oh…

16. We live in exciting times.

17. The future won’t have flying cars and
limitless connectivity.

18. Physics is still again st us…
https://www.flickr.com/photos/52686644@N04/6304054115/ MokshaDolphin

19. Geography is against us

20. World Wide Web(ish)…

21. IDC: Worldwide Smartphone Forecast by Region

22. Homegrown conce rns…

23. Can we trust wha t we don’t know?

24. What is the cloud?

25. Someone else’s computer.

26. We are constantly being monitored.

27. There’s a need for an offline web, but
we conditioned people not to believe
in it.

28. https://www.youtube.com/watch?v=gnbLLQwZxeA

29. http://removephotodata.com

30. The current tools are OK(ish)…

31. Offline apps - caching resources
http://caniuse.com/#search=appcache

32. Offline apps - storing resources
http://caniuse.com/#search=webstorage

33. Offline apps - storing larger resources

34. We need to use them well, so that
people start trusting the web to be
offline capable and theirs to own.

35. I am not alone in this…
ALEX FEYERKE — OFFLINE FIRST
https://www.youtube.com/watch?v=dPz_5-MEvcg

36. We’re working on the solution…

37. A great solution attempt: ServiceWorker
https://www.youtube.com/watch?v=4uQMl7mFB6g

38. More in depth (with demos and all)
https://www.youtube.com/watch?v=SmZ9XcTpMS4

39. In the meantime, prepare for the next
challenge…

40. Think offline
first!

41. 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)

42. LocalForage vs. XHR experiment
http://www.peterbe.com/plog/localforage-vs.-xhr

43. Be frugal with
your resources.

44. 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?

45. Find extra fat and remove it!
https://www.youtube.com/watch?v=Qrzf1lsBMMw

46. Find extra fat and remove it!

47. Let’s mWaek leiv eth ein weexbc itwinogr ldti-mweidse. again

48. Chris Heilmann
christianheilmann.com
@codepo8
chris.heilmann@gmail.com
Thank you!