Offline-First
The painless way
Who is this guy?
MarcelKalveram
IWorkatHanno
Iamfromgermany
ILiveinValencia/Spain
javaScript’ingsincearound2008
RemoteUXTe...
Do we really need offline-first?
Traveling Commuting
Roaming Internetoutage saturatednetwork
What does offline-first mean?
Tomanagedatainanappinsuchaway
thatwedon'tneedserveraccessinorderto
doanykindofoperation
some...
What is this talk about?
Native
apps
Web
sites
Web apps
Look stuff upDo stuff
When does it make sense?
content-heavysites(Nativeapps)
singlepagewebapps
staticsites
real-timeapps
self-containedapps
not...
What are the benefits?
Nodata-lossfortheuser
Offline-firstappsarefaster…
appsareusableallthetime
HOW
to do offline-first…?
Offline challenges
cachingdynamicassets
Cachingstaticassets
PrepareUIforofflinestate
xhr, remote api calls
.json, .xml, .csv
xhr, remote api calls
Caching mechanisms
staticdata dynamicdata
page assets
.html,...
browsercache
serviceworkers
appcache
Caching mechanisms
can’t trust him-
lack of browser support-
staticdata
page assets
....
indexedDB
webSql
webstorage
Caching mechanisms
localforage
pouchDB
}lack of browser support -
api is overly complex -
dyna...
Challenge #1
Caching static assets
App cache
appcache
intercepts http request
manifestfile
<html manifest="my.appcache">
cache,networkandfallback user
browse...
server
App cache
cache,networkandfallback
resources can be
used offline.
online whitelist substitute non-
cached resources...
app.js
image.png
font.ttf
Manifestr
js
*
cache
network
fallback
-
App cache gotchas
1.filesalwayscomefromthecache
server side generated websites
single page applications
2.onlyupdatesifman...
Browser support for…appcache
10+ 4+ 3.5+4+ 2.1+ 3.2+
Browser support for…service workers
n/a n/a n/a40+ n/a n/a
Challenge #2
caching dynamic assets
Caching mechanisms
dynamicdata
xhr, remote api calls
.json, .xml, .csv
xhr, remote api calls
indexedDB
webSql
webstorage
l...
Using web storage
no online
connection required
sessionstorage or localstorage
key/value store
appcachestorage
user
browser
Using web storage APIs
currentHighscore
lastMove
levelsCompleted
1890
D4E5
12
keys values
Using web storage APIs
localStorage.setItem("lastMove", "D4E5");
localStorage.getItem("levelsCompleted");
currentHighscore...
Browser support for…localstorage
8+ 3.5+ 4+4+ 2.1+ 3.2+
asynchronous
Why don’t we just use…indexedDB?
webstorage indexedDB
synchronous
limited to strings supports large data sets...
Browser support for…indexedDB?
*Subfeatures not supported
**buggy behavior in iOS8
10+ 10+ 7.1+23+ 4.4+ 8+* **
Browser support for… webSQL?
*is no longer being maintained
*
n/a n/a 3.1+4+ 2.1+ 3.2+
browser APIs…
localStorage
webSql
indexedDB
limited storage options
lack of browser support
overly complex api
localForage…
…limitationsoflocalStorage
helps us overcome
…browserdifferences
supports all js objects
asynchronous
indexed...
json
currentHighscore
lastMove
levelsCompleted
1890
12
localForage
localForage.setItem("lastMove", incrediblyComplexJsonOb...
https://github.com/mozilla/localForage
What about syncing?
localstorage
indexedDB
localforage
our responsibility
What about syncing?
localstorage
indexedDB
localforage
pouchDB
our responsibility
object
pouchDB API
pdb.put(o, cb) pdb.get(id, cb)
currentHighscore
lastMove
levelsCompleted
1890
12
_id: "lastMove",
lastP...
pouchDB sync
pdb.sync(remoteDB);
new PouchDB("http://localhost:5984/myremotedb")
https://github.com/pouchdb/pouchdb
Challenge #3
preparing our ui
yes
no
no
yes
ami
online…
doihave
updates…
syncwith
server
offline
app
store
locally
How to detect online status
1
navigator
events
2
appcache
events
3
xhr
events
Navigator events
window.addEventListener("online", function(e) {alert("online");})
online/offline
navigator.onLine
true/fa...
Navigator events
is always onlineworks only
in offline-modeshows online even if
connection is unreliable
Appcache events
applicationCache.addEventListener("error", function(e) { … });
checking progress
cached
error
XHR events
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e) {
}
if (xhr.status != 200) {
}
thereisprob...
https://github.com/HubSpot/offline
static and dynamic data
with remote server
what to take offline
if offline-first makes sense
useevents
prepareui for flawl...
with your users
some good in the world
empathize
Do
Thanks!
hanno.co
Offline first, the painless way
Nächste SlideShare
Wird geladen in …5
×

Offline first, the painless way

3.016 Aufrufe

Veröffentlicht am

This is a talk I gave about Offline First development at jsDay Verona on May 14th, 2015 and TopConf Tallinn on November 18th, 2015 .

It covers why and when we should prepare our web apps for the offline state, which browser capabilities help us to accomplish the job and how we can detect the offline state for a better UI.

Veröffentlicht in: Internet

Offline first, the painless way

  1. 1. Offline-First The painless way
  2. 2. Who is this guy? MarcelKalveram IWorkatHanno Iamfromgermany ILiveinValencia/Spain javaScript’ingsincearound2008 RemoteUXTeam weworkwithstartups socialbusiness hanno.co @wearehanno @marcelkalveram
  3. 3. Do we really need offline-first? Traveling Commuting Roaming Internetoutage saturatednetwork
  4. 4. What does offline-first mean? Tomanagedatainanappinsuchaway thatwedon'tneedserveraccessinorderto doanykindofoperation some well-considered s
  5. 5. What is this talk about? Native apps Web sites Web apps Look stuff upDo stuff
  6. 6. When does it make sense? content-heavysites(Nativeapps) singlepagewebapps staticsites real-timeapps self-containedapps not our business
  7. 7. What are the benefits? Nodata-lossfortheuser Offline-firstappsarefaster… appsareusableallthetime
  8. 8. HOW to do offline-first…?
  9. 9. Offline challenges cachingdynamicassets Cachingstaticassets PrepareUIforofflinestate
  10. 10. xhr, remote api calls .json, .xml, .csv xhr, remote api calls Caching mechanisms staticdata dynamicdata page assets .html, .css, .jpg, .js, .ttf page assets browsercache serviceworkers appcache vs. indexedDB webSql webstorage
  11. 11. browsercache serviceworkers appcache Caching mechanisms can’t trust him- lack of browser support- staticdata page assets .html, .css, .jpg, .js, .ttf page assets
  12. 12. indexedDB webSql webstorage Caching mechanisms localforage pouchDB }lack of browser support - api is overly complex - dynamicdata xhr, remote api calls .json, .xml, .csv xhr, remote api calls
  13. 13. Challenge #1 Caching static assets
  14. 14. App cache appcache intercepts http request manifestfile <html manifest="my.appcache"> cache,networkandfallback user browser returns cached data server
  15. 15. server App cache cache,networkandfallback resources can be used offline. online whitelist substitute non- cached resources appcache user browser
  16. 16. app.js image.png font.ttf Manifestr js * cache network fallback -
  17. 17. App cache gotchas 1.filesalwayscomefromthecache server side generated websites single page applications 2.onlyupdatesifmanifestfilechange 3.needtoswapthecachemanually serverappcache user browser applicationCache.swapCache();
  18. 18. Browser support for…appcache 10+ 4+ 3.5+4+ 2.1+ 3.2+
  19. 19. Browser support for…service workers n/a n/a n/a40+ n/a n/a
  20. 20. Challenge #2 caching dynamic assets
  21. 21. Caching mechanisms dynamicdata xhr, remote api calls .json, .xml, .csv xhr, remote api calls indexedDB webSql webstorage localforage pouchDB }lack of browser support - api is overly complex -
  22. 22. Using web storage no online connection required sessionstorage or localstorage key/value store appcachestorage user browser
  23. 23. Using web storage APIs currentHighscore lastMove levelsCompleted 1890 D4E5 12 keys values
  24. 24. Using web storage APIs localStorage.setItem("lastMove", "D4E5"); localStorage.getItem("levelsCompleted"); currentHighscore lastMove levelsCompleted 1890 D4E5 12
  25. 25. Browser support for…localstorage 8+ 3.5+ 4+4+ 2.1+ 3.2+
  26. 26. asynchronous Why don’t we just use…indexedDB? webstorage indexedDB synchronous limited to strings supports large data sets no indexes indexes 10mb storage 50mb storage
  27. 27. Browser support for…indexedDB? *Subfeatures not supported **buggy behavior in iOS8 10+ 10+ 7.1+23+ 4.4+ 8+* **
  28. 28. Browser support for… webSQL? *is no longer being maintained * n/a n/a 3.1+4+ 2.1+ 3.2+
  29. 29. browser APIs… localStorage webSql indexedDB limited storage options lack of browser support overly complex api
  30. 30. localForage… …limitationsoflocalStorage helps us overcome …browserdifferences supports all js objects asynchronous indexedDB, webSQL and localstorage loads best driver for us
  31. 31. json currentHighscore lastMove levelsCompleted 1890 12 localForage localForage.setItem("lastMove", incrediblyComplexJsonObject) localForage.getItem("levelsCompleted", function(err, val) {…}); takes care of (de-)serialization .then(…) supports promises
  32. 32. https://github.com/mozilla/localForage
  33. 33. What about syncing? localstorage indexedDB localforage our responsibility
  34. 34. What about syncing? localstorage indexedDB localforage pouchDB our responsibility
  35. 35. object pouchDB API pdb.put(o, cb) pdb.get(id, cb) currentHighscore lastMove levelsCompleted 1890 12 _id: "lastMove", lastPos: "D4" newPos: "E5" "lastMove"
  36. 36. pouchDB sync pdb.sync(remoteDB); new PouchDB("http://localhost:5984/myremotedb")
  37. 37. https://github.com/pouchdb/pouchdb
  38. 38. Challenge #3 preparing our ui
  39. 39. yes no no yes ami online… doihave updates… syncwith server offline app store locally
  40. 40. How to detect online status 1 navigator events 2 appcache events 3 xhr events
  41. 41. Navigator events window.addEventListener("online", function(e) {alert("online");}) online/offline navigator.onLine true/false
  42. 42. Navigator events is always onlineworks only in offline-modeshows online even if connection is unreliable
  43. 43. Appcache events applicationCache.addEventListener("error", function(e) { … }); checking progress cached error
  44. 44. XHR events var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(e) { } if (xhr.status != 200) { } thereisprobablyaconnectionissue
  45. 45. https://github.com/HubSpot/offline
  46. 46. static and dynamic data with remote server what to take offline if offline-first makes sense useevents prepareui for flawless user experience consider decide to detect offline state cache sync
  47. 47. with your users some good in the world empathize Do
  48. 48. Thanks! hanno.co

×