Working connected to create offline - Trondheim Developer Conference 2014
-
Upload
christian-heilmann -
Category
Education
-
view
1.625 -
download
5
description
Transcript of Working connected to create offline - Trondheim Developer Conference 2014
![Page 1: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/1.jpg)
Working connected to create offline
Chris Heilmann, Trondheim Developer Conference, ← there, 24/11/2014
![Page 2: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/2.jpg)
We live in exciting times.
![Page 3: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/3.jpg)
Going online is not a thing anymore…
![Page 4: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/4.jpg)
Natural service integration
![Page 5: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/5.jpg)
Single location service aggregation
![Page 6: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/6.jpg)
Automatic updates and notifications
![Page 7: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/7.jpg)
Seamless data retention and syncing
![Page 8: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/8.jpg)
A steady stream of amazing data
![Page 9: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/9.jpg)
With us as consumers and creators
![Page 10: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/10.jpg)
![Page 11: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/11.jpg)
![Page 12: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/12.jpg)
![Page 14: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/14.jpg)
Voice recognition and wearables
![Page 15: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/15.jpg)
oh…
![Page 16: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/16.jpg)
We live in exciting times.
![Page 17: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/17.jpg)
The future won’t have flying cars and limitless connectivity.
![Page 18: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/18.jpg)
Physics is still against us…
https://www.flickr.com/photos/52686644@N04/6304054115/ MokshaDolphin
![Page 19: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/19.jpg)
Geography is against us
![Page 20: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/20.jpg)
World Wide Web(ish)…
![Page 21: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/21.jpg)
IDC: Worldwide Smartphone Forecast by Region
![Page 22: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/22.jpg)
Homegrown concerns…
![Page 23: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/23.jpg)
Can we trust what we don’t know?
![Page 24: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/24.jpg)
What is the cloud?
![Page 25: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/25.jpg)
Someone else’s computer.
![Page 26: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/26.jpg)
We are constantly being monitored.
![Page 27: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/27.jpg)
There’s a need for an offline web, but we conditioned people not to believe in it.
![Page 28: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/28.jpg)
https://www.youtube.com/watch?v=gnbLLQwZxeA
![Page 30: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/30.jpg)
The current tools are OK(ish)…
![Page 31: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/31.jpg)
Offline apps - caching resources
http://caniuse.com/#search=appcache
![Page 32: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/32.jpg)
Offline apps - storing resources
http://caniuse.com/#search=webstorage
![Page 33: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/33.jpg)
Offline apps - storing larger resources
![Page 34: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/34.jpg)
We need to use them well, so that people start trusting the web to be offline capable and theirs to own.
![Page 35: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/35.jpg)
I am not alone in this…
https://www.youtube.com/watch?v=dPz_5-MEvcg
ALEX FEYERKE — OFFLINE FIRST
![Page 36: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/36.jpg)
We’re working on the solution…
![Page 37: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/37.jpg)
A great solution attempt: ServiceWorker
https://www.youtube.com/watch?v=4uQMl7mFB6g
![Page 38: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/38.jpg)
More in depth (with demos and all)
https://www.youtube.com/watch?v=SmZ9XcTpMS4
![Page 39: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/39.jpg)
In the meantime, prepare for the next challenge…
![Page 40: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/40.jpg)
Think offline first!
![Page 41: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/41.jpg)
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)
![Page 42: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/42.jpg)
http://www.peterbe.com/plog/localforage-vs.-xhr
LocalForage vs. XHR experiment
![Page 43: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/43.jpg)
Be frugal with your resources.
![Page 44: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/44.jpg)
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?
![Page 45: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/45.jpg)
Find extra fat and remove it!
https://www.youtube.com/watch?v=Qrzf1lsBMMw
![Page 46: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/46.jpg)
Find extra fat and remove it!
![Page 47: Working connected to create offline - Trondheim Developer Conference 2014](https://reader034.fdocuments.net/reader034/viewer/2022042813/5484ca83b4af9f640d8b4c1c/html5/thumbnails/47.jpg)
We live in exciting times.Let’s make the web world-wide again