1 / 16

RIA

Offline. RIA. Internet Connection. connection is not guaranteed no connection means web applications will not work what can be done? can users still add data? retrieve data? make changes? what does developer have to do? (plan ahead). Connection Problem Solutions. appCache

jjoel
Download Presentation

RIA

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Offline RIA

  2. Internet Connection • connection is not guaranteed • no connection means webapplications will not work • what can be done? • can users • still add data? • retrieve data? • make changes? • what does developer have to do? (plan ahead)

  3. Connection Problem Solutions • appCache • localStorage • indexedDB html js css jpg data

  4. AppCache • developer can determine which files can be cached and which cannot • must carefully plan the policy for caching • manifest file is the controller cache index.html, style.css, funct.js pict1.jpg, pict2.jpg pict3.jpg,...

  5. Sequence • user goes to web site • are files in cache? • yes: has the manifest changed? • yes: retrieve them from server and update cache • no: retrieve files from cache • no: retrieve them from server and store in cache

  6. Manifest File • identify in attribute of html tag<html manifest="anyName.mf"> • 3 sections • CACHE: #files to be cached • NETWORK: #files not to be cached • FALLBACK: #substitute files

  7. Manifest Example CACHE MANIFEST # 2015-05-28:v1 # Explicitly cached 'master entries'. CACHE: index.html style.css # Resources that require the user to be online. NETWORK: * # offline.html will be served in place of all other .html files FALLBACK: / /offline.html

  8. Javascript API for appCache var appCache = window.applicationCache; appCache.update(); // Attempt to update the user's cache. if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // swap in the new cache.

  9. Web Storage • data is stored only on the client side • about 5M is available • use key-value pairs • data is separated by origin (url) • two storage objects • localStorage → for long term storage • sessionStorage → for just the current session

  10. Using localStorage Object • built into javascript • set data with localStorage.setItem("key","data") • if key does not exist, it creates it • if key does exist, it resets the value • retrieve with localStorage.getItem("key")

  11. localStorage - other • use deleteItem to remove an key-value from storage • use clear() to remove all data • length returns number of data values

  12. Web Database • indexedDB object works more like a database than localStorage • used to be relational but now it is like a NoSQL database • key-value based • value can be anything (number, string, object, array, blob, etc.

  13. Database Structure • each origin can have one or more databases • each database has one or more data stores • each store has key-value records • key can be number, string, date or array • value can be anything (number, string, object, array, blob, etc. • transactions for multiple operations • cursors are used to iterator or multiple records

  14. Operations • Asynchronous • each operation returns a request object • success handler for normal operation • fail or upgrade handlers for unusual situations

  15. Transactions • create transaction • var trans = db.transaction(["students"],"readwrite"); • select object store • var objStore = trans.objectStore("students"); • start operation • var request = objStore.add(data); • handle events • request.onsuccess = function(event){ …

  16. indexedDB Summary • much more complicated than localStorage • designed for a lot of data and fast retrieval • for more details see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

More Related