Working connected to create offline - Trondheim Developer Conference 2014

Preview:

DESCRIPTION

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.

Citation preview

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 against us…

https://www.flickr.com/photos/52686644@N04/6304054115/ MokshaDolphin

Geography is against us

World Wide Web(ish)…

Homegrown concerns…

Can we trust what 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…

https://www.youtube.com/watch?v=dPz_5-MEvcg

ALEX FEYERKE — OFFLINE FIRST

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

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)

http://www.peterbe.com/plog/localforage-vs.-xhr

LocalForage vs. XHR experiment

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

Find extra fat and remove it!

https://www.youtube.com/watch?v=Qrzf1lsBMMw

Find extra fat and remove it!

We live in exciting times.Let’s make the web world-wide again

Chris Heilmannchristianheilmann.com@codepo8chris.heilmann@gmail.com

Thank you!

Recommended