Offline Mode - Web Applications Offline

47

Click here to load reader

description

An introduction to the ApplicationCache and LocalStorage HTML5 APIs that allow you to write web applications that seamlessly transition from online to offline and back.

Transcript of Offline Mode - Web Applications Offline

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