Session 512 - Using HTML5 Offline Storage

8/4/2019 Session 512 - Using HTML5 Offline Storage

1/81

Brady EidsonSafari and WebKit Engineer

2


2/81

3


3/81

4


4/81

5


5/81

6


6/81

7


7/81

8


8/81

9


9/81

10


10/81

11


11/81

12


12/81

13


13/81

14


14/81

15


15/81

16


16/81

17


17/81

18


18/81

19


19/81

20


20/81

21


21/81

22


22/81

Make apps accessible offline

Persist simple data

Data center in the browser

23


23/81


Persist simple data


24


24/81

25


25/81

Overview

Store entire application offline

Automated atomic updates

You specify a resource manifest

A little nonmandatory API

26


26/81

Your app works offline

Your app works online

Advantages

but faster!

27


27/81

How applications are loaded

1. With a manifest, local copies of each resource are used

28


28/81


2. Safari revalidates the manifest file in the background

?

29


29/81


2. Safari revalidates the manifest file in the background

30


30/81


3. If the manifest changed, each individual resource is revalidated

31


31/81


4. The new version of your application is ready to go

32


32/81

33


33/81

T-Spin demo

Server must know the text/cache-manifest mime type

Specify manifest in HTML

Resources not in the manifest fail to load

Server-side changes to manifest trigger an update

Update process is automatic

34


34/81

35


35/81


Persist simple data


36


36/81

37


37/81

Overview

Standard interface for storing items of data

Items are key/value pairs

Origin-based security

Various implementations of the interface

38


38/81

What implementations?

SessionStorage for per-window data

LocalStorage for global, persistent data

Settings and SecureSettings in Safari extensions

39


39/81

How do I use it?

function saveSessionAndQuit()

40


40/81

How do I use it?

function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;

}

41


41/81

How do I use it?


localStorage[SavingSession] = true;}

42


42/81

How do I use it?


localStorage[SavingSession] = true;

for (n in window.sessionStorage) { }}

43


43/81

How do I use it?



for (n in window.sessionStorage) {localStorage.setItem(n, sessionStorage[n]);

}}

44


44/81

How do I use it?




}

localStorage.removeItem(SavingSession);}

45


45/81

How do I use it?




}

localStorage.removeItem(SavingSession);

sessionStorage.clear();}

46


46/81

Featuring Andy EstesSafari and WebKit Engineer

47


47/81

T-Spin demo

Use window.localStorage for global, persistent data

Different ways to store and retrieve the same items

48


48/81

49


49/81


Persist simple data


50


50/81

51


51/81

Overview

Real-world SQL

Asynchronous and callback-based


52


52/81

Advantages of keeping it local

Works offline

Better performance

Faster fetching

Lower latency Better battery life

53


53/81

Overview

Real-world SQL

Asynchronous and callback-based


54


54/81

Real-world SQL

55


55/81

56


56/81

57


57/81

58


58/81

59


59/81

60


60/81

1. Get a database object to work with

Executing a query

61


61/81


Executing a query

.openDatabase(MyDatabase, null, null, null)

62


62/81


Executing a query


63


63/81


Executing a query


64


64/81

2. Start a SQLTransaction

Executing a query

65


65/81

.transaction(callbackFunction)


Executing a query

66


66/81



Executing a query

67


67/81


Executing a query


68


68/81


Executing a query

69


69/81


Executing a query

70


70/81

3. Execute some SQL!

Executing a query

71


71/81

3. Execute some SQL!

Executing a query

.executeSql(CREATE TABLE testTable (id testValue))

72


72/81

73


73/81

Demo

SQL queries available directly from JavaScript

Handle complex, relational data in the browser

Performance superior to the cloud

74


74/81

75


75/81

76


76/81

77


77/81

Vicki MurleySafari Technologies [email protected]

HTML5 Application Cache Specificationhttp://www.whatwg.org/specs/web-apps/current-work

HTML5 Web Storage Specification

http://dev.w3.org/html5/webstorage

HTML5 Web SQL Database Specificationhttp://dev.w3.org/html5/webdatabase

WebKit Open Source Projecthttp://www.webkit.org/#webkit on irc.freenode.net

Apple Developer Forumshttp://devforums.apple.com

78


78/81

Safari Extensions Lab Internet and Web Lab AThursday 2:00PM

HTML5 Offline Storage Lab Internet and Web Lab BThursday 4:30PM

Safari Open Lab

Internet and Web Lab A

Friday 9:00AM

79


79/81

80


80/81

81


81/81

82

Session 512 - Using HTML5 Offline Storage

Documents

Transcript of Session 512 - Using HTML5 Offline Storage