Download - Session 512 - Using HTML5 Offline Storage
-
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