Offline first: client-side storages

Slide 1

Slide 1 text

JS STORAGE API OFFLINE FIRST. CLIENT-SIDE DATA !

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

APPLICATION CACHE &

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

EPAM Systems APPLICATION CACHE How to use 18 #FFVJKUVQ[QWT*6/.RCIG 5WIIGUVGF HKNGGZVGPUKQP

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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[

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

WEB STORAGE '

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

WEBSQL $

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

INDEXED DB %

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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ŉ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

LIBRARIES % $ & '

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

EPAM Systems 54 QUESTIONS THANK YOU