Upload
shishir-roy
View
242
Download
0
Embed Size (px)
Citation preview
8/4/2019 Session 512 - Using HTML5 Offline Storage
1/81
Brady EidsonSafari and WebKit Engineer
2
8/4/2019 Session 512 - Using HTML5 Offline Storage
2/81
3
8/4/2019 Session 512 - Using HTML5 Offline Storage
3/81
4
8/4/2019 Session 512 - Using HTML5 Offline Storage
4/81
5
8/4/2019 Session 512 - Using HTML5 Offline Storage
5/81
6
8/4/2019 Session 512 - Using HTML5 Offline Storage
6/81
7
8/4/2019 Session 512 - Using HTML5 Offline Storage
7/81
8
8/4/2019 Session 512 - Using HTML5 Offline Storage
8/81
9
8/4/2019 Session 512 - Using HTML5 Offline Storage
9/81
10
8/4/2019 Session 512 - Using HTML5 Offline Storage
10/81
11
8/4/2019 Session 512 - Using HTML5 Offline Storage
11/81
12
8/4/2019 Session 512 - Using HTML5 Offline Storage
12/81
13
8/4/2019 Session 512 - Using HTML5 Offline Storage
13/81
14
8/4/2019 Session 512 - Using HTML5 Offline Storage
14/81
15
8/4/2019 Session 512 - Using HTML5 Offline Storage
15/81
16
8/4/2019 Session 512 - Using HTML5 Offline Storage
16/81
17
8/4/2019 Session 512 - Using HTML5 Offline Storage
17/81
18
8/4/2019 Session 512 - Using HTML5 Offline Storage
18/81
19
8/4/2019 Session 512 - Using HTML5 Offline Storage
19/81
20
8/4/2019 Session 512 - Using HTML5 Offline Storage
20/81
21
8/4/2019 Session 512 - Using HTML5 Offline Storage
21/81
22
8/4/2019 Session 512 - Using HTML5 Offline Storage
22/81
Make apps accessible offline
Persist simple data
Data center in the browser
23
8/4/2019 Session 512 - Using HTML5 Offline Storage
23/81
Make apps accessible offline
Persist simple data
Data center in the browser
24
8/4/2019 Session 512 - Using HTML5 Offline Storage
24/81
25
8/4/2019 Session 512 - Using HTML5 Offline Storage
25/81
Overview
Store entire application offline
Automated atomic updates
You specify a resource manifest
A little nonmandatory API
26
8/4/2019 Session 512 - Using HTML5 Offline Storage
26/81
Your app works offline
Your app works online
Advantages
but faster!
27
8/4/2019 Session 512 - Using HTML5 Offline Storage
27/81
How applications are loaded
1. With a manifest, local copies of each resource are used
28
8/4/2019 Session 512 - Using HTML5 Offline Storage
28/81
How applications are loaded
2. Safari revalidates the manifest file in the background
?
29
8/4/2019 Session 512 - Using HTML5 Offline Storage
29/81
How applications are loaded
2. Safari revalidates the manifest file in the background
30
8/4/2019 Session 512 - Using HTML5 Offline Storage
30/81
How applications are loaded
3. If the manifest changed, each individual resource is revalidated
31
8/4/2019 Session 512 - Using HTML5 Offline Storage
31/81
How applications are loaded
4. The new version of your application is ready to go
32
8/4/2019 Session 512 - Using HTML5 Offline Storage
32/81
33
8/4/2019 Session 512 - Using HTML5 Offline Storage
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
8/4/2019 Session 512 - Using HTML5 Offline Storage
34/81
35
8/4/2019 Session 512 - Using HTML5 Offline Storage
35/81
Make apps accessible offline
Persist simple data
Data center in the browser
36
8/4/2019 Session 512 - Using HTML5 Offline Storage
36/81
37
8/4/2019 Session 512 - Using HTML5 Offline Storage
37/81
Overview
Standard interface for storing items of data
Items are key/value pairs
Origin-based security
Various implementations of the interface
38
8/4/2019 Session 512 - Using HTML5 Offline Storage
38/81
What implementations?
SessionStorage for per-window data
LocalStorage for global, persistent data
Settings and SecureSettings in Safari extensions
39
8/4/2019 Session 512 - Using HTML5 Offline Storage
39/81
How do I use it?
function saveSessionAndQuit()
40
8/4/2019 Session 512 - Using HTML5 Offline Storage
40/81
How do I use it?
function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;
}
41
8/4/2019 Session 512 - Using HTML5 Offline Storage
41/81
How do I use it?
function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;
localStorage[SavingSession] = true;}
42
8/4/2019 Session 512 - Using HTML5 Offline Storage
42/81
How do I use it?
function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;
localStorage[SavingSession] = true;
for (n in window.sessionStorage) { }}
43
8/4/2019 Session 512 - Using HTML5 Offline Storage
43/81
How do I use it?
function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;
localStorage[SavingSession] = true;
for (n in window.sessionStorage) {localStorage.setItem(n, sessionStorage[n]);
}}
44
8/4/2019 Session 512 - Using HTML5 Offline Storage
44/81
How do I use it?
function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;
localStorage[SavingSession] = true;
for (n in window.sessionStorage) {localStorage.setItem(n, sessionStorage[n]);
}
localStorage.removeItem(SavingSession);}
45
8/4/2019 Session 512 - Using HTML5 Offline Storage
45/81
How do I use it?
function saveSessionAndQuit(){window.localStorage.WindowLocation = 32,117;
localStorage[SavingSession] = true;
for (n in window.sessionStorage) {localStorage.setItem(n, sessionStorage[n]);
}
localStorage.removeItem(SavingSession);
sessionStorage.clear();}
46
8/4/2019 Session 512 - Using HTML5 Offline Storage
46/81
Featuring Andy EstesSafari and WebKit Engineer
47
8/4/2019 Session 512 - Using HTML5 Offline Storage
47/81
T-Spin demo
Use window.localStorage for global, persistent data
Different ways to store and retrieve the same items
48
8/4/2019 Session 512 - Using HTML5 Offline Storage
48/81
49
8/4/2019 Session 512 - Using HTML5 Offline Storage
49/81
Make apps accessible offline
Persist simple data
Data center in the browser
50
8/4/2019 Session 512 - Using HTML5 Offline Storage
50/81
51
8/4/2019 Session 512 - Using HTML5 Offline Storage
51/81
Overview
Real-world SQL
Asynchronous and callback-based
Origin-based security
52
8/4/2019 Session 512 - Using HTML5 Offline Storage
52/81
Advantages of keeping it local
Works offline
Better performance
Faster fetching
Lower latency Better battery life
53
8/4/2019 Session 512 - Using HTML5 Offline Storage
53/81
Overview
Real-world SQL
Asynchronous and callback-based
Origin-based security
54
8/4/2019 Session 512 - Using HTML5 Offline Storage
54/81
Real-world SQL
55
8/4/2019 Session 512 - Using HTML5 Offline Storage
55/81
56
8/4/2019 Session 512 - Using HTML5 Offline Storage
56/81
57
8/4/2019 Session 512 - Using HTML5 Offline Storage
57/81
58
8/4/2019 Session 512 - Using HTML5 Offline Storage
58/81
59
8/4/2019 Session 512 - Using HTML5 Offline Storage
59/81
60
8/4/2019 Session 512 - Using HTML5 Offline Storage
60/81
1. Get a database object to work with
Executing a query
61
8/4/2019 Session 512 - Using HTML5 Offline Storage
61/81
1. Get a database object to work with
Executing a query
.openDatabase(MyDatabase, null, null, null)
62
8/4/2019 Session 512 - Using HTML5 Offline Storage
62/81
1. Get a database object to work with
Executing a query
.openDatabase(MyDatabase, null, null, null)
63
8/4/2019 Session 512 - Using HTML5 Offline Storage
63/81
1. Get a database object to work with
Executing a query
.openDatabase(MyDatabase, null, null, null)
64
8/4/2019 Session 512 - Using HTML5 Offline Storage
64/81
2. Start a SQLTransaction
Executing a query
65
8/4/2019 Session 512 - Using HTML5 Offline Storage
65/81
.transaction(callbackFunction)
2. Start a SQLTransaction
Executing a query
66
8/4/2019 Session 512 - Using HTML5 Offline Storage
66/81
.transaction(callbackFunction)
2. Start a SQLTransaction
Executing a query
67
8/4/2019 Session 512 - Using HTML5 Offline Storage
67/81
2. Start a SQLTransaction
Executing a query
.transaction(callbackFunction)
68
8/4/2019 Session 512 - Using HTML5 Offline Storage
68/81
2. Start a SQLTransaction
Executing a query
69
8/4/2019 Session 512 - Using HTML5 Offline Storage
69/81
2. Start a SQLTransaction
Executing a query
70
8/4/2019 Session 512 - Using HTML5 Offline Storage
70/81
3. Execute some SQL!
Executing a query
71
8/4/2019 Session 512 - Using HTML5 Offline Storage
71/81
3. Execute some SQL!
Executing a query
.executeSql(CREATE TABLE testTable (id testValue))
72
8/4/2019 Session 512 - Using HTML5 Offline Storage
72/81
73
8/4/2019 Session 512 - Using HTML5 Offline Storage
73/81
Demo
SQL queries available directly from JavaScript
Handle complex, relational data in the browser
Performance superior to the cloud
74
8/4/2019 Session 512 - Using HTML5 Offline Storage
74/81
75
8/4/2019 Session 512 - Using HTML5 Offline Storage
75/81
76
8/4/2019 Session 512 - Using HTML5 Offline Storage
76/81
77
8/4/2019 Session 512 - Using HTML5 Offline Storage
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
8/4/2019 Session 512 - Using HTML5 Offline Storage
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
8/4/2019 Session 512 - Using HTML5 Offline Storage
79/81
80
8/4/2019 Session 512 - Using HTML5 Offline Storage
80/81
81
8/4/2019 Session 512 - Using HTML5 Offline Storage
81/81
82