offline webapps
TRANSCRIPT
Taking Your Web Apps Offline
Mike Nitchie
Why Offline?
The lines between web, desktop, and mobile apps
are being increasingly blurred.[citation needed]
HTML5 Puppy to the Rescue
My Relationship with Application Cache
Pictured from Left to Right: Me, Appcache
All is Not Lost
Let’s talk about how to use it.
Let’s talk about when to use it.
Let’s talk about how to improve it.
Cat slap 1
Setting up a local development environment.
localhost is a loopback…
From Wikipedia
It is implemented entirely within the operating system's networking software and passes no packets to any network interface controller. Any traffic that a computer program sends to a loopback IP address is simply and immediately passed back up the network software stack as if it had been received from another device.
?
Mac: /etc/hosts
Windows: c:\Windows\System32\Drivers\etc\hosts
[localIP] [dummy.domain]
192.168.1.10 offline.me
Demos!
www.mikenitchie.com
github.com/mnitchie/OfflineDemo1/
github.com/mnitchie/OfflineDemo2/
Cats
lap
2
The cache manifest file IS
the app. If a resource isn’t
listed there, it’s not available to
the app.
Catslap 3
… Except for the first time you visit the page. Then, it pulls everything from the server.
Catslap 4
After the first caching, resources
will always be loaded from cache. Never the server.
Until the manifest file itself changes…
Cats
lap
5
Cache-control headers… So much nerd rage.
cache-control:’no-cache, max-age=0’
Expires: Date.now()
Catslap 6
Using a cache manifest is great for performance,
except…
Back to the Demos!
Let’s Crowd-Source Some Facts
http://bit.ly/1DrQegP
> Passive Cache
FALLBACK:
/ /offline.html
NETWORK:
*
> Application Cache API
Methods
void update()
void swapCache()
void abort()
> Application Cache API
Events
checking
error
noupdate
downloading
progress
updateready
cached
obsolete
> Application Cache API
States
uncached (0)
idle (1)
checking (2)
downloading (3)
updateready (4)
obsolete (5)
MOAR DEMOS!
> LocalStorage
void setItem(String key, String data)
String key(int)
String getItem(String key)
void removeItem(String key)
void clear()
Syncing
Send all new, modified, and deleted data to the server.
After that operation completes, load all relevent state from the server and replace the local state with the server state.
Syn
cin
g
• Give the object a unique identifier• Once synced with the server, replace with the server-
assigned ID• Set an isNew flag or specify a pattern in the ID which
implicitly indicates that the object is new
CREATED
• Set an isDirty flag
MODIFIED
• Set an isDeleted flag• If the object isNew when isDeleted is set, immediately
remove it from local storage.• Otherwise, sync it to the server when next online.
DELETED
How Hard Can It Be?
The user could refresh during the sync operation.
An ajax call could fail.
The user could make a change while the sync operation is
occurring.
The user could lose network connectivity while the sync
operation is ocurring.
Conflict Resolution
PREFER NEWEST
GUIDED MERGE
AUTOMATIC MERGE
VERSIONING
navigator
navigator.onLine
false if the user is definitely offline.
true if the user might be online.
PouchDB and CouchDB
PouchDB/CouchDBFrom pouchdb.com
PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.
PouchDB was created to help web developers build applications that work as well offline as they do online.
It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login.
> PouchDB API
var db = new Pouch(‘mydb’),
remoteDB = http://api.example.com/db
db.post()
db.put()
db.get()
db.remove()
db.sync(remoteDB)
When does
offline make
sense?
Straight-forward “look-stuff-up” or “do-stuff” applications.
When it is explicitly requested by a customer.
When it is a better alternative to writing the app for multiple platforms.
When we are absolutely positively sure that our users will know it is there and take advantage of it.
What’s the way forward?
Always show the most up-to-date version when online
Only update changed resources
Give programatic control over how much can be stored in the appcache.
Give programatic control over the contents of the appcache.
Better user awareness
Perhaps less-sandboxed browser designed for delivering applications
Complaints are just feature requests in disguise.
???