Using HTML5 Offline Storage. Brady Eidson Safari and WebKit Engineer

Size: px

Start display at page:

Download "Using HTML5 Offline Storage. Brady Eidson Safari and WebKit Engineer"

Wesley Stevens
6 years ago
Views:

1 Using HTML5 Offline Storage Brady Eidson Safari and WebKit Engineer 2

2 3

3 4

4 5

5 6

6 7

7 8

8 9

9 10

10 11

11 12

12 13

13 14

14 15

15 16

16 17

17 18

18 19

19 20

20 21

21 So what can I do without the cloud? 22

22 What You ll Learn Make apps accessible offline Persist simple data Data center in the browser 23

23 What You ll Learn Make apps accessible offline Persist simple data Data center in the browser 24

24 HTML5 Application Cache 25

25 HTML5 Application Cache Overview Store entire application offline Automated atomic updates You specify a resource manifest A little nonmandatory API 26

26 HTML5 Application Cache Advantages Your app works offline Your app works online but faster! 27

27 HTML5 Application Cache How applications are loaded 1. With a manifest, local copies of each resource are used 28

28 HTML5 Application Cache How applications are loaded 2. Safari revalidates the manifest file in the background? 29

29 HTML5 Application Cache How applications are loaded 2. Safari revalidates the manifest file in the background 30

30 HTML5 Application Cache How applications are loaded 3. If the manifest changed, each individual resource is revalidated 31

31 HTML5 Application Cache How applications are loaded 4. The new version of your application is ready to go 32

32 Application Cache Demo 33

33 HTML5 Application Cache 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 Now that my app works offline how about all the data it creates? 35

35 What You ll Learn Make apps accessible offline Persist simple data Data center in the browser 36

36 HTML5 Web Storage 37

37 HTML5 Web Storage Overview Standard interface for storing items of data Items are key/value pairs Origin-based security Various implementations of the interface 38

38 HTML5 Web Storage What implementations? SessionStorage for per-window data LocalStorage for global, persistent data Settings and SecureSettings in Safari extensions 39

39 HTML5 Web Storage How do I use it? function savesessionandquit() 40

40 HTML5 Web Storage How do I use it? function savesessionandquit() { window.localstorage.windowlocation = 32,117 ; } 41

41 HTML5 Web Storage How do I use it? function savesessionandquit() { window.localstorage.windowlocation = 32,117 ; } localstorage[ SavingSession ] = true; 42

42 HTML5 Web Storage How do I use it? function savesessionandquit() { window.localstorage.windowlocation = 32,117 ; localstorage[ SavingSession ] = true; } for (n in window.sessionstorage) { } 43

43 HTML5 Web Storage 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

44 HTML5 Web Storage 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

45 HTML5 Web Storage 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

46 Web Storage Demo Featuring Andy Estes Safari and WebKit Engineer 47

47 HTML5 Web Storage T-Spin demo Use window.localstorage for global, persistent data Different ways to store and retrieve the same items 48

48 Now that I can store the simple stuff how about a little more oomph? 49

49 What You ll Learn Make apps accessible offline Persist simple data Data center in the browser 50

50 HTML5 SQL Databases 51

51 HTML5 SQL Databases Overview Real-world SQL Asynchronous and callback-based Origin-based security 52

52 HTML5 SQL Databases Advantages of keeping it local Works offline Better performance Faster fetching Lower latency Better battery life 53

53 HTML5 SQL Databases Overview Real-world SQL Asynchronous and callback-based Origin-based security 54

54 Real-world SQL 55

55 Tables 56

56 Rows of Data 57

57 Indexes 58

58 Triggers 59

59 Transactions are built in to the API 60

60 HTML5 SQL Databases Executing a query 1. Get a database object to work with Window 61

61 HTML5 SQL Databases Executing a query 1. Get a database object to work with Window.openDatabase( MyDatabase, null, null, null) 62

62 HTML5 SQL Databases Executing a query 1. Get a database object to work with Window.openDatabase( MyDatabase, null, null, null) Database 63

63 HTML5 SQL Databases Executing a query 1. Get a database object to work with Window.openDatabase( MyDatabase, null, null, null) Database 64

64 HTML5 SQL Databases Executing a query 2. Start a SQLTransaction Database 65

65 HTML5 SQL Databases Executing a query 2. Start a SQLTransaction Database.transaction(callbackFunction) 66

66 HTML5 SQL Databases Executing a query 2. Start a SQLTransaction Database.transaction(callbackFunction) function TransactionCallback(SQLTransaction tx) {... } 67

67 HTML5 SQL Databases Executing a query 2. Start a SQLTransaction Database.transaction(callbackFunction) function TransactionCallback(SQLTransaction tx) {... } 68

68 HTML5 SQL Databases Executing a query 2. Start a SQLTransaction function TransactionCallback(SQLTransaction tx) {... } SQLTransaction 69

69 HTML5 SQL Databases Executing a query 2. Start a SQLTransaction function TransactionCallback(SQLTransaction tx) {... } SQLTransaction 70

70 HTML5 SQL Databases Executing a query 3. Execute some SQL! SQLTransaction 71

71 HTML5 SQL Databases Executing a query 3. Execute some SQL! SQLTransaction.executeSql( CREATE TABLE testtable (id testvalue) ) 72

72 SQL Database Demo 73

73 HTML5 SQL Databases Demo SQL queries available directly from JavaScript Handle complex, relational data in the browser Performance superior to the cloud 74

74 75

75 76

76 77

77 More Information Vicki Murley Safari Technologies Evangelist HTML5 Application Cache Specification HTML5 Web Storage Specification HTML5 Web SQL Database Specification WebKit Open Source Project #webkit on irc.freenode.net Apple Developer Forums 78

78 Labs Safari Extensions Lab HTML5 Offline Storage Lab Safari Open Lab Internet and Web Lab A Thursday 2:00PM Internet and Web Lab B Thursday 4:30PM Internet and Web Lab A Friday 9:00AM 79

79 Q&A 80

80 81

81 82

Creating Extensions for Safari

Creating Extensions for Safari Part One Timothy Hatcher Safari and WebKit Engineer 2 3 HTML5 CSS3 JavaScript Native Code 4 Cross Platform Secure Crashes 5 What You ll Learn When to make a Safari Extension