Offline Mode - Web Applications Offline

  • Published on
    08-May-2015

  • View
    370

  • Download
    6

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

  • 1.Oine Mode WebApplicationsforOfflineUse @pleckey|http://pleckey.me

2. Who is this guy? PatrickLeckey DirectorofEngineering In-TouchInsightSystemsInc. http://www.intouchinsight.com 3. Online is easy 4. Oine is ... easy? 5. But what if ... 6. ... you're not guaranteed to have connectivity the whole way ... 7. What we have now ... LocalStorage window.localStorage ApplicationCache window.applicationCache Chrome:4+,Firefox:3.5+,Safari:4+ MobileSafari:3.2+,AndroidBrowser:2.1+ IE:10+ 8. LocalStorage simple straightforward ratherlimited ApplicationCache complex confusing powerful 9. LocalStorage ...it'sbasicallyashelf... Putstuffontheshelf Takestuffofftheshelf Canonlyholdsomuchstuff 10. LocalStorage SimilartoCookies ...butnottransmittedoneachrequest Sendwhatyouwant,whenyouwant! 11. LocalStorage Key/Valuepairs Limitedstoragesize SameOriginPolicy! http://pleckey.me!=https://www.pleckey.me 12. LocalStorage 5MBlimit AsJavaScriptstrings... 1.2345678 4bytefloat?9bytesofcharacters? Nope! 18-byteUTF-16string 13. 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 14. 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,IE elseif(e.name=='NS_ERROR_DOM_QUOTA_REACHED') //Firefox } 15. LocalStorage GoodIdeas applicationstate userinformation BadIdeas base64-encodedimages postalcodelookupdatabase 16. ApplicationCache ...isbasicallya...uh...cache... Pre-cacheresources Accessresourcesoffline Fallbacktoalternatesfordynamicresources 17. ApplicationCache Nostoragelimit Event-drivenAPI CacheisbasedonmanifestURL 18. ApplicationCache mimetypemustbetext/cache-manifest 19. cache.manifest CACHE NETWORK FALLBACK 20. cache.manifest CACHE CACHEMANIFEST #Version:8cf54be2 CACHE: /favicon.png /logo.png /site/page2.html explicitlycachedresources 21. cache.manifest NETWORK CACHEMANIFEST #Version:8cf54be2 CACHE: /favicon.png ... NETWORK: * resourcesthatrequiretheusertobeonline usuallyjust"*" 22. cache.manifest FALLBACK CACHEMANIFEST #Version:8cf54be2 CACHE: /favicon.png /static.html NETWORK: * FALLBACK: /dynamic.php/static.html resourcetoloadifrequestedresourcenotavailableoffline 23. ApplicationCache cacheditemsarealwaysservedfromtheapplicationcache theapplicationcachewillnotupdateunlessthecache manifestfilecontentchanges 24. ApplicationCache CACHEMANIFEST #Version:8cf54be2 CACHE: /script.js NETWORK: * textcontenthastobechanged 25. Pretty Simple, right? ...andyouthoughtit'dbethateasy... 26. Oops #1 Non-cachedresourcesdon'texist. Evenwhenyou'reonline. NETWORK: * 27. Oops #2 Theapplicationcacheworkswiththebrowsercache. Sortof. Cache-Control:max-age=9999999999 28. Oops #3 Cachingthecachemanifest. It'llneverupdate. Cache-Control:no-cache,no-store 29. Clearing the ApplicationCache HTTP/1.0410Gone 30. 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 */ 31. ApplicationCache API window.applicationCache.addEventListener('updateready',function(e){ alert('Newversiondownloaded.Applicationwillnowreload.'); window.location.reload(); }); window.applicationCache.update(); 32. ApplicationCache API window.applicationCache.addEventListener('updateready',function(e){ alert('Newversiondownloaded.Applicationwillnowreload.'); window.applicationCache.swapCache(); }); window.applicationCache.update(); 33. iframe is your friend

Recommended

View more >