Upgrade to Pro — share decks privately, control downloads, hide ads and more …

offline first

Ola Gasidlo
November 14, 2013

offline first

PHP UserGroup Düsseldorf

Ola Gasidlo

November 14, 2013
Tweet

More Decks by Ola Gasidlo

Other Decks in Technology

Transcript

  1. Ola Gasidlo JavaScript / Frontend Developer since 2002 Computer Science

    Student, FH Dortmund Twitter: @misprintedtype Web: http://antilab.net Mitgründer der OpenTechSchool Dortmund
  2. WE CAN’T KEEP BUILDING APPS WITH THE DESKTOP MINDSET OF

    PERMANENT, FAST CONNECTIVITY, WHERE A TEMPORARY DISCONNECTION OR SLOW SERVICE IS REGARDED AS A PROBLEM AND COMMUNICATED AS AN ERROR. Hood.ie - 2013
  3. manifest - allows to specify which files the browser should

    cache - app will load and work correctly, even after the refresh button have been pushed ++ you can use the app offline ++ no trip to the network, so the loading is fast ++ your site is down? no worries! your users will get the full (offline) experience
  4. manifest IE8+ / FF 3.5+ / Chrome 4.0+ / Safari

    4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+ <html manifest="example.appcache"> ... </html> specify the right mime-type: AddType text/cache-manifest .appcache “offline & online” are events you can bind a listener to
  5. detect state - detect state by navigator.onLine (online = true,

    offline = false) - in Firefox the events offline / online are available
  6. localStorage / sessionStorage IE8+ / FF 3.5+ / Chrome 4.0+

    / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+ - replaces cookies - > 4KB - min. 5MB, up to 25 / 50MB - stores key / value pairs (values = Strings) - super simple API
  7. localStorage / sessionStorage localStorage.length; // number of items stored localStorage.key(i);

    // name of key at index localStorage.getItem(“key”); // get itemvalue localStorage.setItem(“key”,”value”); // set itemvalue localStorage.removeItem(“key”); // remove item localStorage.clear(); // drop storage
  8. INDEXEDDB - NoSQL Database like MongoDB / CouchDB - self

    defined JavaScript ObjectStores - stores key / value pairs - can store any type you want - every ObjectStore has a collection of indexes - thanks to the cursor, we can iterate also just a part of the data
  9. Web File API - supports to write and read sequential

    data on the local file system - your domain is provided with a complete sand-boxed hierarchical file system to use as it chooses ++ large text and binary files can be created and stored ++ performance should be good -- a very early specification which is subject to revision -- an obvious security risk unless file writing is restricted -- little support in current browsers and polyfills may be impractical -- unstructured data with no transactions, indexing or searching facilties