Transcript
Page 1: Offline Mode - Web Applications Offline

Offline Mode

WebApplicationsforOfflineUse

@pleckey|http://pleckey.me

Page 2: Offline Mode - Web Applications Offline

Who is this guy?

PatrickLeckeyDirectorofEngineering

In-TouchInsightSystemsInc.

http://www.intouchinsight.com

Page 3: Offline Mode - Web Applications Offline
Page 4: Offline Mode - Web Applications Offline
Page 5: Offline Mode - Web Applications Offline
Page 6: Offline Mode - Web Applications Offline

Online is easy

Page 7: Offline Mode - Web Applications Offline

Offline is ... easy?

Page 8: Offline Mode - Web Applications Offline

But what if ...

Page 9: Offline Mode - Web Applications Offline
Page 10: Offline Mode - Web Applications Offline
Page 11: Offline Mode - Web Applications Offline
Page 12: Offline Mode - Web Applications Offline
Page 13: Offline Mode - Web Applications Offline

... you're not guaranteed tohave connectivity the whole

way ...

Page 14: Offline Mode - Web Applications Offline

What we have now ...

LocalStoragewindow.localStorage

ApplicationCachewindow.applicationCache

Chrome:4+,Firefox:3.5+,Safari:4+

MobileSafari:3.2+,AndroidBrowser:2.1+

IE:10+

Page 15: Offline Mode - Web Applications Offline

LocalStoragesimple

straightforwardratherlimited

ApplicationCachecomplexconfusingpowerful

Page 16: Offline Mode - Web Applications Offline

LocalStorage...it'sbasicallyashelf...

Putstuffontheshelf

Takestuffofftheshelf

Canonlyholdsomuchstuff

Page 17: Offline Mode - Web Applications Offline

LocalStorage

SimilartoCookies...butnottransmittedoneachrequest

Sendwhatyouwant,whenyouwant!

Page 18: Offline Mode - Web Applications Offline

LocalStorage

Key/ValuepairsLimitedstoragesize

SameOriginPolicy!http://pleckey.me!=https://www.pleckey.me

Page 19: Offline Mode - Web Applications Offline

LocalStorage

5MBlimitAsJavaScriptstrings...

1.23456784bytefloat?9bytesofcharacters?

Nope!18-byteUTF-16string

Page 20: Offline Mode - Web Applications Offline

LocalStorage

window.localStorage.getItem('foo');//null

window.localStorage.setItem('foo','bar');

window.localStorage.getItem('foo');//"bar"

window.localStorage.length;//1

JSON.stringify(window.localStorage);//{"foo":"bar"}

window.localStorage.removeItem('foo');//doesnothingifkeydoesn'texist

window.localStorage.clear();//removeALLitems

Page 21: Offline Mode - Web Applications Offline

LocalStorage

What happens when the shelf is full?

try{window.localStorage.setItem('foo',really_big_thing);}catch(e/*DOMException*/){if(e.name=='QuotaExceededError')//Chrome,Safari,IEelseif(e.name=='NS_ERROR_DOM_QUOTA_REACHED')//Firefox}

Page 22: Offline Mode - Web Applications Offline

LocalStorage

GoodIdeasapplicationstateuserinformation

BadIdeasbase64-encodedimages

postalcodelookupdatabase

Page 23: Offline Mode - Web Applications Offline

ApplicationCache...isbasicallya...uh...cache...

Pre-cacheresources

Accessresourcesoffline

Fallbacktoalternatesfordynamicresources

Page 24: Offline Mode - Web Applications Offline

ApplicationCache

NostoragelimitEvent-drivenAPI

CacheisbasedonmanifestURL

Page 25: Offline Mode - Web Applications Offline

ApplicationCache

<htmlmanifest="/cache.manifest">

mimetypemustbetext/cache-manifest

Page 26: Offline Mode - Web Applications Offline

cache.manifest

CACHE

NETWORK

FALLBACK

Page 27: Offline Mode - Web Applications Offline

cache.manifestCACHE

CACHEMANIFEST#Version:8cf54be2

CACHE:/favicon.png/logo.png/site/page2.html

explicitlycachedresources

Page 28: Offline Mode - Web Applications Offline

cache.manifestNETWORK

CACHEMANIFEST#Version:8cf54be2

CACHE:/favicon.png...

NETWORK:*

resourcesthatrequiretheusertobeonlineusuallyjust"*"

Page 29: Offline Mode - Web Applications Offline

cache.manifestFALLBACK

CACHEMANIFEST#Version:8cf54be2

CACHE:/favicon.png/static.html

NETWORK:*

FALLBACK:/dynamic.php/static.html

resourcetoloadifrequestedresourcenotavailableoffline

Page 30: Offline Mode - Web Applications Offline

ApplicationCache

cacheditemsarealwaysservedfromtheapplicationcache

theapplicationcachewillnotupdateunlessthecachemanifestfilecontentchanges

Page 31: Offline Mode - Web Applications Offline

ApplicationCache

CACHEMANIFEST#Version:8cf54be2

CACHE:/script.js

NETWORK:*

textcontenthastobechanged

Page 32: Offline Mode - Web Applications Offline

Pretty Simple, right?

...andyouthoughtit'dbethateasy...

Page 33: Offline Mode - Web Applications Offline

Oops #1

Non-cachedresourcesdon'texist.

Evenwhenyou'reonline.

NETWORK:*

Page 34: Offline Mode - Web Applications Offline

Oops #2

Theapplicationcacheworkswiththebrowsercache.

Sortof.

Cache-Control:max-age=9999999999

Page 35: Offline Mode - Web Applications Offline

Oops #3

Cachingthecachemanifest.

It'llneverupdate.

Cache-Control:no-cache,no-store

Page 36: Offline Mode - Web Applications Offline

Clearing the ApplicationCache

HTTP/1.0410Gone

Page 37: Offline Mode - Web Applications Offline

ApplicationCache Events

window.applicationCache.addEventListener(...);/***'checking'-browserischeckingforanupdate(alwaysfirst)**'cached'-firedafterfirstdownloadofanewcachemanifest**'downloading'-new/updatedresourcesfound,browserisfetching**'error'-manifestreturned404oradownloadfailed**'noupdate'-cachemanifesthasnotchanged**'obsolete'-manifestreturned410,cachedeleted**'progress'-XofYmanifestresourcesdownloaded**'updateready'-allupdatesdownloaded*/

Page 38: Offline Mode - Web Applications Offline

ApplicationCache API

window.applicationCache.addEventListener('updateready',function(e){alert('Newversiondownloaded.Applicationwillnowreload.');window.location.reload();});

window.applicationCache.update();

Page 39: Offline Mode - Web Applications Offline

ApplicationCache API

window.applicationCache.addEventListener('updateready',function(e){alert('Newversiondownloaded.Applicationwillnowreload.');window.applicationCache.swapCache();});

window.applicationCache.update();

Page 40: Offline Mode - Web Applications Offline
Page 41: Offline Mode - Web Applications Offline

iframe is your friend

<!--iframe_js.html-->

<html><scripttype="application/javascript">

storelargelookupdatainiframes

Page 42: Offline Mode - Web Applications Offline

iframe is your friend

<!--index.html-->

<htmlmanifest="/cache.manifest"><iframesrc="iframe_js.html"width="0"height="0"border="0"/></html>

CACHEMANIFEST#Version:1

CACHE:/iframe_js.html

NETWORK:*

includelookupdataincachemanifestloadviaiframe(sameorigin)

Page 43: Offline Mode - Web Applications Offline

iframe is your friend

//index.htmlconsole

>window.awesome_data

Object{con:"foo",bar:"baz"}

varappCache=window.applicationCache;if(appCache.status!=appCache.status.CACHED){//notcachedyet,doanAJAXlookup}else{returnwindow.awesome_data.con;//"foo"}

Page 44: Offline Mode - Web Applications Offline

Single Page Applications

pre-cachestaticresources(speed!)

Page 45: Offline Mode - Web Applications Offline

Native(ish) Web App

<metaname="apple-mobile-web-app-capable"content="yes"/>

<metaname="mobile-web-app-capable"content="yes"/>

runsfullscreenbuilt-insoftwareupdates

queuedataforsubmissionlater

Page 46: Offline Mode - Web Applications Offline

What Else Can I Do With This?

Comeworkforus!

SoftwareDeveloperUserExperienceDataScientist

Page 47: Offline Mode - Web Applications Offline

Thank you!Questions?

@pleckey|http://pleckey.com


Recommended