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

Offline first: client-side storages

Igor Alpert
December 19, 2014

Offline first: client-side storages

Igor Alpert

December 19, 2014
Tweet

More Decks by Igor Alpert

Other Decks in Programming

Transcript

  1. EPAM Systems Target platform — desktop 5 K APP SERVER

    NETWORK 8 &GUMVQR 1WTCRRNKECVKQP #NYC[UQPNKPGCTEJKVGEVWTG APPLICATIONS
  2. EPAM Systems Target platform — cross platform 6 K SERVER

    NETWORK 8 &GUMVQR 5 5OCTVRJQPG 6 6CDNGV 7 .CRVQR APPLICATIONS
  3. EPAM Systems Once connection is not available 7 8 7

    6 5 Offline Budget 4QCOKPIŎ 1WVQHTCPIG VTCXGNŎ Down 5GTXGTHCWNV EQPPGEVKQPGTTQTU K SERVER APPLICATIONS
  4. EPAM Systems When application is not ready for offline 8

    8 7 6 5 &GUMVQR /QDKNG #NYC[UQPNKPGCTEJKVGEVWTG OGGVUQHHNKPG APPLICATIONS
  5. EPAM Systems Application is ready for offline mode 9 8

    7 6 5 $ OFFLINE STORAGE K SERVER 1HHNKPGHKTUVCTEJKVGEVWTG APPLICATIONS
  6. EPAM Systems What to store locally 10 8 7 6

    5 $ OFFLINE STORAGE K SERVER Assets Data Sync APPLICATIONS
  7. EPAM Systems Platform dependent storages 11 8 7 6 5

    $ WEBSQL K SERVER d g e f $ INDEXED DB $ WEBSTORAGE $ APPCACHE APPLICATIONS
  8. EPAM Systems DB access abstraction 12 APPLICATIONS 8 7 6

    5 $ WEBSQL K SERVER d g e $ INDEXED DB $ WEBSTORAGE $ APPCACHE DB ABSTRACTION h
  9. EPAM Systems What we are going to talk about 13

    AGENDA d g e h % $ & ' MOZILLA FIREFOX MICROSOFT IE GOOGLE CHROME APPLE SAFARI INDEXED DB APPLICATION CACHE WEBSQL WEB STORAGE
  10. EPAM Systems Offline application use cases 14 OFFLINE FIRST APP

    TYPES 1 2 3 Social networks, news, article applications. Fetch updates to read them offline. Use cases: transport, out of network coverage CONTENT DRIVEN Applications that are designed with battery life and performance in mind. Reduced network usage MOBILE Applications designed to keep your content safe without relaying on network connection CONTENT CRAFTING 1 2 3 &GVGEVHGCVWTGU PQVDTQYUGTU
  11. EPAM Systems Supported platforms 16 APPLICATION CACHE d g e

    h 3+ 10+ 4+ 4+ SUPPORTED PLATFORMS http://caniuse.com/#search=offline
  12. EPAM Systems Application cache use cases 17 USE CASES 1

    2 3 Images, Fonts, Pages, JS/CSS source files STATIC ASSETS Once cached no network requests will be done until cache is valid ZERO NETWORK REQUESTS Application cache is valid only if all declared resources are available. In other case everything will be fetched from server again NO PARTIAL CACHING 1 2 3 APPLICATION CACHE &GENCTCVKQPU 0Q#2+VQWUG
  13. EPAM Systems APPLICATION CACHE How to use 18 <html manifest="offline.appcache">

    #FFVJKUVQ[QWT*6/.RCIG 5WIIGUVGF HKNGGZVGPUKQP
  14. CACHE MANIFEST # This is a comment # Version 4.1

    — 20 Nov 2014 CACHE: /css/screen.css /css/offline.css /js/screen.js /img/logo.png http://example.com/css/styles.css FALLBACK: / /offline.html NETWORK: * Example 20 EPAM Systems APPLICATION CACHE &[PCOKEUVTKPIVQHQTEGECEJGWRFCVG QPEGXGTUKQPKUTGCF[
  15. Section headers 23 EPAM Systems APPLICATION CACHE FALLBACK: XCNWGUUGRCTCVGFD[URCEG TGUQWTEG=URCEG?TGRNCEGT

    +PECUGTGUQWTEGKUPQVCXCKNCDNG KVYKNNDGTGRNCEGFYKVJňHCNNDCEMʼn ňʼnYKNNECVEJ CP[ 74.
  16. Event flow 25 EPAM Systems APPLICATION CACHE ,51DLGEVVQJQUVGXGPVU window.applicationCache -

    CHECKING - DOWNLOADING - PROGRESS - CACHED - NOUPDATE - DOWNLOADING - PROGRESS - UPDATEREADY (KTUVXKUKV 4GEWTTGPEGXKUKVKPI EVENTS
  17. Status 26 EPAM Systems APPLICATION CACHE window.applicationCache.status: UNCACHED = 0

    IDLE = 1 CHECKING = 2 DOWNLOADING = 3 UPDATEREADY = 4 OBSOLETE = 5
  18. EPAM Systems Supported platforms 28 WEB STORAGE d g e

    h 3.5+ 8+ 4+ 4+ SUPPORTED PLATFORMS http://caniuse.com/#search=namevalue-storage
  19. EPAM Systems Local/Session storage use cases 29 USE CASES 1

    2 3 Can handle only strings as keys or values. Objects must be serialized before saving TEXTUAL DATA Easy to use key/value storage. Fast access in case you know exact match for your record KEY VALUE Relatively small amount of data: articles, documents, Base64 encoded images WHEN 5Mb IS ENOUGH 1 2 3 9JGPPQVJKPIGNUG KUCXCKNCDNG WEB STORAGE
  20. EPAM Systems Local/Session storage use cases 30 BETTER THEN COOKIES

    1 2 3 NO HEADERS DIRECT ACCESS BY KEY AND EASY DEBUG ~5MB OF SPACE 1 2 3 MDEQQMKGU WEB STORAGE
  21. EPAM Systems WEB STORAGE Compare 32 LOCAL STORAGE PERSISTANT DOMAIN

    ORIGIN SESSION STORAGE SESSION CURRENT TAB
  22. EPAM Systems API methods 33 API WEB STORAGE - setItem

    (key, value) - getItem (key) - removeItem (key) - clear() - key (index) - length 0QKPFGZGU 9GUJQWNFVCMGECTGQWTUGNH
  23. EPAM Systems WEB STORAGE API methods 34 EVENT key The

    name or key of the item that was set or removed. newValue Holds the new value of the item, or null if removeItem() was called. oldValue Holds the old value of an existing item that changed or was deleted, or null if a new item was inserted. storageArea This property will equal either the localStorage or the sessionStorage property of the target Window object. url The URL (as a string) of the document whose script made this storage change. 'XGPVPCOGUVQTCIG
  24. EPAM Systems Supported platforms 36 WEBSQL g h 4+ 3+

    SUPPORTED PLATFORMS http://caniuse.com/#search=websql DEPRECATED
  25. EPAM Systems WebSQL storage use cases 37 USE CASES 1

    2 3 Based on SQLite you are able to use traditional SQL queries. SQL Ability to apply multiple queries and rollback in case of error TRANSATIONS ~50Mb of storage space available, with possibility to ask for more — platform dependent WHEN 5Mb IS *NOT* ENOUGH 1 2 3 WEBSQL
  26. EPAM Systems WebSQL storage use cases 38 CONNECT WEBSQL var

    db = openDatabase(‘contacts’, ‘1.0’, ‘my contacts app’, 4GHGTGPEG #2+/GVJQF 0COG 8GTUKQP 'UVKOCVGF UK\G
  27. EPAM Systems WebSQL storage use cases 39 TRANSACTIONS WEBSQL db.transaction(function(tx)

    { }); 4GHGTGPEGVQFD 4GHGTGPEGVQVTCPUCEVKQP tx.executeSql(sqlQuery, args, callback, errCallback tx.executeSql(sqlQuery, args, callback, errCallback tx.executeSql(sqlQuery, args, callback, errCallback FDTGCF6TCPUCEVKQP
  28. EPAM Systems WebSQL storage use cases 40 SQL WEBSQL CREATE

    TABLE id INTEGER PRIMARY KEY ASC, make TEXT, model TEXT ) INSERT INTO SELECT DELETE FROM
  29. EPAM Systems Supported platforms 42 INDEXED DB d g e

    29+ 11+ 24+ SUPPORTED PLATFORMS http://caniuse.com/#feat=indexeddb
  30. EPAM Systems Use cases 43 USE CASES 1 2 3

    Does not use SQL, stores key:value pairs NO SQL Ability to apply multiple queries and rollback in case of error TRANSATIONS Possibility to ask for more — platform dependent WHEN 5Mb IS *NOT* ENOUGH 1 2 3 INDEXED DB
  31. EPAM Systems Setup database 45 INDEXED DB CREATE var request

    = window.indexedDB.open( "MyBooks", 1.0 ); request.onupgradeneeded = function() { var db = request.result; var store = db.createObjectStore("list1", {keyPath: “field”}); var store2 = db.createObjectStore("list2", { autoIncrement: true }); };
  32. EPAM Systems Add records to storage 46 INDEXED DB ADD

    RECORDS store.put({title: “Book title1", author: "Author1", isbn: 123456}); store.put({title: “Book title2", author: "Author1", isbn: 234567}); store.put({title: “Book title3", author: "Author2",
  33. EPAM Systems Principal diagram 47 INDEXED DB INDEXES store.createIndex("by_title", "title",

    {unique: true}); store.createIndex(“by_name”, "name", store.createIndex(“by_email”, "email", {unique:true}); var index = store.index(“by_title”); var request = index.get(name); request.onsuccess = function(e) { var result = e.target.result; … };
  34. EPAM Systems Principal diagram 48 INDEXED DB TRANSACTIONS var tx

    = db.transaction(["MyBooks"], “readonly”) tx.objectStore("list1").openCursor().onsuccess = function(e) { var cursor = e.target.result; if(cursor) { // // cursor.continue() } else { // ready } 1TňTGCFYTKVGʼn
  35. EPAM Systems Events handling 49 INDEXED DB EVENTS - ONABORT

    - ONBLOCKED - ONCOMPLETE - ONERROR - ONSUCCESS - ONUPGRADENEEDED %CPEGNNGFVTCPUCEVKQP 9JGPCPQVJGTXGTUKQPKUWUGFQTPQPGZKUVU[GV
  36. EPAM Systems Wrappers to use 51 LIBRARIES - DEXIE.JS -

    LOCALFORGE - Pouch - Lawnchair - …
  37. EPAM Systems 52 USE CASES 1 2 3 Detect possible

    drivers from supported and use them FEATURE DETECTION Use the same, unified APIs for all storages COMMON INTERFACE APIs are generally much simpler then using Core APIs of storages EASIER TO USE 1 2 3 LIBRARIES