Page 1
Say Hello To Offline First
How to build applications for
the real world
we <3 GOTOBerlin
Page 2
Ola Gasidlo- Developer for +10 years
- Core Member of Hoodie
- Co-Organizer of OTSConf && RejectJS
twitter: @misprintedtype
Page 3
Agenda1. What & why?
2. Problems
3. New approach
4. Implementation@misprintedtype
Page 4
What & why?
@misprintedtype
Page 5
The internet turned 25 last year!@misprintedtype
Page 6
We grew up.@misprintedtype
Page 8
amount of mobile-only web users is out of reach @misprintedtype
Page 9
Tell me...@misprintedtype
Page 13
Problems
@misprintedtype
Page 16
offline > error handling
@misprintedtype
Page 17
inform user
@misprintedtype
Page 19
build trust
@misprintedtype
Page 20
http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
Page 21
http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
Page 22
organise data
@misprintedtype
Page 24
decide
@misprintedtype
Page 31
@misprintedtype
?
Page 37
@misprintedtype
?
Page 38
@misprintedtype
?
Page 39
@misprintedtype
?
Page 41
@misprintedtype
?
Page 45
New Approaches
@misprintedtype
Page 46
Rethink! (but how?)
@misprintedtype
Page 54
Implementation
@misprintedtype
Page 57
Manifest
@misprintedtype
Page 58
App Cache is a douchebag!
http://alistapart.com/article/application-cache-is-a-douchebag
Page 59
App Manifest
1. Files always come from the cache
(also if you are online!)
@misprintedtype
Page 60
App Manifest
2. App Cache only updates if manifest changed
@misprintedtype
Page 61
App Manifest
3. App Cache is an additional cache
@misprintedtype
Page 62
App Manifest
4. Non-cached resources will not load
@misprintedtype
Page 63
App Cache nanny
https://www.npmjs.org/package/appcache-nanny
@misprintedtype
Page 64
Work it!
@misprintedtype
Page 65
Web what?!
@misprintedtype
Page 66
web worker - HTML5 feature
- runs JS in browser
@misprintedtype
Page 68
DOM
large API data
UI Events
@misprintedtype
Page 70
async !== concurrency
@misprintedtype
Page 75
Encoding && decoding large strings
Complex mathematical calculations
Prefetching && caching data
@misprintedtype
Page 77
Network requests
Manipulation on localStorage
Image manipulation
@misprintedtype
Page 79
real-time text analysis
processing video or audio data
Polling web services
@misprintedtype
Page 80
@misprintedtype
// windowwindow.alert(`Work it!`);
// documentdocument.getElementById(`danceParty`);
// parentwindow.globalFunction();
// worker.js - no access
Page 81
no libs depending on these objects,
for example
@misprintedtype
Page 82
@misprintedtype / @lewiscowper
Page 83
@misprintedtype
// navigatornavigator.onLine;
// locationlocation.href;
// xhrxmlhttp.send();
// worker.js
Page 84
@misprintedtype
// appCacheapplicationCache.status;
// importimport `worker-script`;
// worker.js
Page 85
@misprintedtype / @lewiscowper
Page 86
Web workers - amazing litte helpers
@misprintedtype
Page 90
2 types of workers - dedicated workers
- shared workers
@misprintedtype
Page 91
dedicated worker
@misprintedtype
Page 92
shared worker
@misprintedtype
Page 93
@misprintedtype
function areWorkersAvailable() {
return !!window.Worker;
}
// available?
Page 94
@misprintedtype
// app.jsvar worker = new Worker(`task.js`);
// run worker run!
Page 96
?
@misprintedtype
Page 98
demo // map.jshttp://slides.html5rocks.com/#web-workers
@misprintedtype
Page 99
more demos // examples.jshttp://greenido.github.io/Web-Workers-Examples-/
@misprintedtype
Page 100
@misprintedtype / @lewiscowper
Page 101
@misprintedtype / @lewiscowper
Page 104
@misprintedtype / @lewiscowper
SPWA MPS
Page 105
Service Worker
@misprintedtype
Page 107
Service Worker
Why?
@misprintedtype
Page 108
https://jakearchibald.com/2014/offline-cookbook/
Page 109
https://jakearchibald.com/2014/offline-cookbook/
Page 111
Service Worker
shut down at end of events
@misprintedtype
Page 112
Service Worker
scriptable caches
@misprintedtype
Page 113
Service Worker
promises
@misprintedtype
Page 114
SW lifecycle
@misprintedtype
Page 115
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Page 116
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Page 117
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Page 118
https://jakearchibald.github.io/isserviceworkerready/
@misprintedtype
Page 119
Service Worker https://github.com/slightlyoff/ServiceWorker
https://jakearchibald.github.io/isserviceworkerready/
https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J
@misprintedtype
Page 120
offline cookbook http://jakearchibald.com/2014/offline-cookbook/
@misprintedtype
Page 123
Do not harm humans!(first law of robotics)
@misprintedtype
Page 124
Do not lose data!(first law of offline first)
@misprintedtype
Page 125
PouchDB + CouchDB = <3
@misprintedtype
Page 128
CouchDB
@misprintedtype
Page 129
@misprintedtype
Stephans data(share with Hannes)
Hannes data
Stephans partial data (replicated)
Page 131
PouchDB
@misprintedtype
?
Page 132
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
Page 134
hoodie <3 you@misprintedtype / @hoodiehq