Embed Size (px)
Citation preview
Say Hello To Offline First
How to build applications for
the real world
we <3 GOTOBerlin
Ola Gasidlo- Developer for +10 years
- Core Member of Hoodie
- Co-Organizer of OTSConf && RejectJS
twitter: @misprintedtype
Agenda1. What & why?
2. Problems
3. New approach
4. Implementation@misprintedtype
What & why?
@misprintedtype
The internet turned 25 last year!@misprintedtype
We grew up.@misprintedtype
@misprintedtype
amount of mobile-only web users is out of reach @misprintedtype
Tell me...@misprintedtype
@misprintedtype
Problems
@misprintedtype
@misprintedtype
@misprintedtype
offline > error handling
@misprintedtype
inform user
@misprintedtype
@misprintedtype
build trust
@misprintedtype
http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
organise data
@misprintedtype
@misprintedtype
decide
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
?
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
?
@misprintedtype
?
@misprintedtype
?
@misprintedtype
@misprintedtype
?
@misprintedtype
New Approaches
@misprintedtype
Rethink! (but how?)
@misprintedtype
Implementation
@misprintedtype
files
data
files
data
Manifest
@misprintedtype
App Cache is a douchebag!
http://alistapart.com/article/application-cache-is-a-douchebag
App Manifest
1. Files always come from the cache
(also if you are online!)
@misprintedtype
App Manifest
2. App Cache only updates if manifest changed
@misprintedtype
App Manifest
3. App Cache is an additional cache
@misprintedtype
App Manifest
4. Non-cached resources will not load
@misprintedtype
App Cache nanny
https://www.npmjs.org/package/appcache-nanny
@misprintedtype
Work it!
@misprintedtype
Web what?!
@misprintedtype
web worker - HTML5 feature
- runs JS in browser
@misprintedtype
@misprintedtype
DOM
large API data
UI Events
@misprintedtype
@misprintedtype
async !== concurrency
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
@misprintedtype
Encoding && decoding large strings
Complex mathematical calculations
Prefetching && caching data
@misprintedtype
Network requests
Manipulation on localStorage
Image manipulation
@misprintedtype
real-time text analysis
processing video or audio data
Polling web services
@misprintedtype
@misprintedtype
// windowwindow.alert(`Work it!`);
// documentdocument.getElementById(`danceParty`);
// parentwindow.globalFunction();
// worker.js - no access
no libs depending on these objects,
for example
@misprintedtype
@misprintedtype / @lewiscowper
@misprintedtype
// navigatornavigator.onLine;
// locationlocation.href;
// xhrxmlhttp.send();
// worker.js
@misprintedtype
// appCacheapplicationCache.status;
// importimport `worker-script`;
// worker.js
@misprintedtype / @lewiscowper
Web workers - amazing litte helpers
@misprintedtype
2 types of workers - dedicated workers
- shared workers
@misprintedtype
dedicated worker
@misprintedtype
shared worker
@misprintedtype
@misprintedtype
function areWorkersAvailable() {
return !!window.Worker;
}
// available?
@misprintedtype
// app.jsvar worker = new Worker(`task.js`);
// run worker run!
@misprintedtype
?
@misprintedtype
demo // map.jshttp://slides.html5rocks.com/#web-workers
@misprintedtype
more demos // examples.jshttp://greenido.github.io/Web-Workers-Examples-/
@misprintedtype
@misprintedtype / @lewiscowper
@misprintedtype / @lewiscowper
@misprintedtype / @lewiscowper
SPWA MPS
Service Worker
@misprintedtype
Service Worker
Why?
@misprintedtype
Service Worker
shut down at end of events
@misprintedtype
Service Worker
scriptable caches
@misprintedtype
Service Worker
promises
@misprintedtype
SW lifecycle
@misprintedtype
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
https://jakearchibald.github.io/isserviceworkerready/
@misprintedtype
Service Worker https://github.com/slightlyoff/ServiceWorker
https://jakearchibald.github.io/isserviceworkerready/
https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J
@misprintedtype
offline cookbook http://jakearchibald.com/2014/offline-cookbook/
@misprintedtype
files
data
files
data
Do not harm humans!(first law of robotics)
@misprintedtype
Do not lose data!(first law of offline first)
@misprintedtype
PouchDB + CouchDB = <3
@misprintedtype
CouchDB
@misprintedtype
@misprintedtype
Stephans data(share with Hannes)
Hannes data
Stephans partial data (replicated)
@misprintedtype
PouchDB
@misprintedtype
?
PouchDB browser storage limitation confirm
Firefox IndexedDB unlimited y
Chrome / Opera / Android 4.4+
IndexedDB % of storage y
IE 10+ SQLite 250MB n
Mobile Safari WebSQL 50MB n
Safari WebSQL 5MB -> 500MB y
Android 4.3 and lower
IndexedDB 200MB n
hoodie <3 you@misprintedtype / @hoodiehq
