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.
18. App cache gotchas
1.filesalwayscomefromthecache
server side generated websites
single page applications
2.onlyupdatesifmanifestfilechange
3.needtoswapthecachemanually
serverappcache
user
browser
applicationCache.swapCache();
22. 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 -
23. Using web storage
no online
connection required
sessionstorage or localstorage
key/value store
appcachestorage
user
browser
24. Using web storage APIs
currentHighscore
lastMove
levelsCompleted
1890
D4E5
12
keys values
25. Using web storage APIs
localStorage.setItem("lastMove", "D4E5");
localStorage.getItem("levelsCompleted");
currentHighscore
lastMove
levelsCompleted
1890
D4E5
12
27. 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
47. 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