Offline first: client-side storages

JS STORAGE API OFFLINE FIRST. CLIENT-SIDE DATA !

EPAM Systems 2 ! " # [email protected] HTTP://UA.LINKEDIN.COM/IN/IALPERT IGOR ALPERT

EPAM Systems Client-server architecture 3 %NKGPV CLIENT SERVER 5GTXGT APPLICATIONS

EPAM Systems Client-server architecture 4 K CLIENT SERVER %NKGPV 5GTXGT
&CVCVTCPUHGT APPLICATIONS

EPAM Systems Target platform — desktop 5 K APP SERVER
NETWORK 8 &GUMVQR 1WTCRRNKECVKQP #NYC[UQPNKPGCTEJKVGEVWTG APPLICATIONS

EPAM Systems Target platform — cross platform 6 K SERVER
NETWORK 8 &GUMVQR 5 5OCTVRJQPG 6 6CDNGV 7 .CRVQR APPLICATIONS

EPAM Systems Once connection is not available 7 8 7
6 5 Offline Budget 4QCOKPIŎ 1WVQHTCPIG VTCXGNŎ Down 5GTXGTHCWNV EQPPGEVKQPGTTQTU K SERVER APPLICATIONS

EPAM Systems When application is not ready for offline 8
8 7 6 5 &GUMVQR /QDKNG #NYC[UQPNKPGCTEJKVGEVWTG OGGVUQHHNKPG APPLICATIONS

EPAM Systems Application is ready for offline mode 9 8
7 6 5 $ OFFLINE STORAGE K SERVER 1HHNKPGHKTUVCTEJKVGEVWTG APPLICATIONS

EPAM Systems What to store locally 10 8 7 6
5 $ OFFLINE STORAGE K SERVER Assets Data Sync APPLICATIONS

EPAM Systems Platform dependent storages 11 8 7 6 5
$ WEBSQL K SERVER d g e f $ INDEXED DB $ WEBSTORAGE $ APPCACHE APPLICATIONS

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

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

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

APPLICATION CACHE &

EPAM Systems Supported platforms 16 APPLICATION CACHE d g e
h 3+ 10+ 4+ 4+ SUPPORTED PLATFORMS http://caniuse.com/#search=offline

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

EPAM Systems APPLICATION CACHE How to use 18 <html manifest="offline.appcache">
#FFVJKUVQ[QWT*6/.RCIG 5WIIGUVGF HKNGGZVGPUKQP

How to use 19 EPAM Systems text/cache-manifest .appcache /WUVWUGURGEKCN/+/'V[RG #FFVJKUVQ[QWTUGTXGTEQPHKIWTCVKQP
APPLICATION CACHE

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[

21 EPAM Systems APPLICATION CACHE CACHE MANIFEST 2NCKPVGZVHKNG76( (KTUVNKPGQH[QWT ECEJKPIEQPHKIWTCVKQP
Section headers

Section headers 22 EPAM Systems APPLICATION CACHE CACHE: .KUVQHTGUQWTEGUVQECEJGCPFUVQTG 'ZCEV74.UPQ
+HUGEVKQPJGCFGTUCTGPQVFGHKPGF VJCVYKNNDGFGHCWNVQPG

Section headers 23 EPAM Systems APPLICATION CACHE FALLBACK: XCNWGUUGRCTCVGFD[URCEG TGUQWTEG=URCEG?TGRNCEGT
+PECUGTGUQWTEGKUPQVCXCKNCDNG KVYKNNDGTGRNCEGFYKVJňHCNNDCEMŉ ňŉYKNNECVEJ CP[ 74.

Section headers 24 EPAM Systems APPLICATION CACHE NETWORK: ň9JKVGNKUVŉQHCNYC[UQPNKPGTGUQWTEGU9KNNDGPQVECEJGF %QWPVGTUCPCN[VKEUŎ
ň ŉKUECVEJCNNUVCVGOGPV

Event flow 25 EPAM Systems APPLICATION CACHE ,51DLGEVVQJQUVGXGPVU window.applicationCache -
CHECKING - DOWNLOADING - PROGRESS - CACHED - NOUPDATE - DOWNLOADING - PROGRESS - UPDATEREADY (KTUVXKUKV 4GEWTTGPEGXKUKVKPI EVENTS

Status 26 EPAM Systems APPLICATION CACHE window.applicationCache.status: UNCACHED = 0
IDLE = 1 CHECKING = 2 DOWNLOADING = 3 UPDATEREADY = 4 OBSOLETE = 5

WEB STORAGE '

EPAM Systems Supported platforms 28 WEB STORAGE d g e
h 3.5+ 8+ 4+ 4+ SUPPORTED PLATFORMS http://caniuse.com/#search=namevalue-storage

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

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

EPAM Systems 31 WEB STORAGE SessionStorage LocalStorage Storage Interface 5[PEJTQPQWUŃYKNNHTGG\G7+

EPAM Systems WEB STORAGE Compare 32 LOCAL STORAGE PERSISTANT DOMAIN
ORIGIN SESSION STORAGE SESSION CURRENT TAB

EPAM Systems API methods 33 API WEB STORAGE - setItem
(key, value) - getItem (key) - removeItem (key) - clear() - key (index) - length 0QKPFGZGU 9GUJQWNFVCMGECTGQWTUGNH

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

WEBSQL $

EPAM Systems Supported platforms 36 WEBSQL g h 4+ 3+
SUPPORTED PLATFORMS http://caniuse.com/#search=websql DEPRECATED

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

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

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

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

INDEXED DB %

EPAM Systems Supported platforms 42 INDEXED DB d g e
29+ 11+ 24+ SUPPORTED PLATFORMS http://caniuse.com/#feat=indexeddb

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

EPAM Systems Principal diagram 44 INDEXED DB DB Object Storage
Item K Item K Item K

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 }); };

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",

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; … };

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ŉ

EPAM Systems Events handling 49 INDEXED DB EVENTS - ONABORT
- ONBLOCKED - ONCOMPLETE - ONERROR - ONSUCCESS - ONUPGRADENEEDED %CPEGNNGFVTCPUCEVKQP 9JGPCPQVJGTXGTUKQPKUWUGFQTPQPGZKUVU[GV

LIBRARIES % $ & '

EPAM Systems Wrappers to use 51 LIBRARIES - DEXIE.JS -
LOCALFORGE - Pouch - Lawnchair - …

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

EPAM Systems What to read 53 RESOURSES https://github.com/pazguille/offline-first

EPAM Systems 54 QUESTIONS THANK YOU

Offline first: client-side storages

Offline first: client-side storages

More Decks by Igor Alpert

Other Decks in Programming

Featured

Transcript