offline webapps

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.

www.mikenitchie.com

github.com/mnitchie

@mnitchie

mikenitchie@gmail.com

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.

???