woensdag 16 oktober 13 HTML5 wizardry met appcache, localstorage en geolocation

Transcriptie

1 HTML5 wizardry met appcache, localstorage en geolocation

2

3

4

5 localstorage

6

7 4KB 1994 IE2 (ja, 2) client of server

8 1994 4KB elke http request IE2 (ja, 2) => vertragend client of server unencrypted

9

10

11 wij willen:

12 wij willen: veel opslag online en offline geen extra server-stuff opslag van lange duur flexibiliteit (via javascript?!)

13 wij willen: veel opslag online en offline geen extra server-stuff opslag van lange duur flexibiliteit (via javascript?!)

14 de oplossing:

15 de oplossing:

16 de oplossing:???

17 localstorage sessionstorage Web SQL indexeddb HTML5 STORAGE

18 Web SQL indexeddb

19 Web SQL indexeddb

20 Web SQL

21 Web SQL

22 Syntax

23 Syntax var mijndatabase = window.opendatabase("mijndatabase", "1.0", "Dit is mijn database", 1024*1024); mijndatabase.transaction(function(tx) { tx.executesql("hier plaats je een standaard sql statement met variabelen? en?", [ x, y ]); });

24 Syntax var mijndatabase = window.opendatabase("mijndatabase", "1.0", "Dit is mijn database", 1024*1024); mijndatabase.transaction(function(tx) { tx.executesql("hier plaats je een standaard sql statement met variabelen? en?", [ x, y ]); });

25 IndexedDB var request = indexeddb.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. var db = request.result; var store = db.createobjectstore("books", {keypath: "isbn"}); var titleindex = store.createindex("by_title", "title", {unique: true}); var authorindex = store.createindex("by_author", "author"); // Populate with initial data. store.put({title: "Quarry Memories", author: "Fred", isbn: }); store.put({title: "Water Buffaloes", author: "Fred", isbn: }); store.put({title: "Bedrock Nights", author: "Barney", isbn: }); }; request.onsuccess = function() { db = request.result; };

26 IndexedDB var request = indexeddb.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. var db = request.result; var store = db.createobjectstore("books", {keypath: "isbn"}); var titleindex = store.createindex("by_title", "title", {unique: true}); var authorindex = store.createindex("by_author", "author"); // Populate with initial data. store.put({title: "Quarry Memories", author: "Fred", isbn: }); store.put({title: "Water Buffaloes", author: "Fred", isbn: }); store.put({title: "Bedrock Nights", author: "Barney", isbn: }); }; request.onsuccess = function() { db = request.result; };

27 IndexedDB VS websql

28 IndexedDB VS websql

29 sessionstorage & localstorage

30 sessionstorage & localstorage

31 sessionstorage & localstorage simpele key-value syntax == paren wel bepaalde limieten enkel strings 2.5MB (chrome), 5MB (firefox),... per origin (geservede pagina)

32 Syntax localstorage.setitem( key, value ); var mijnwaarde = localstorage.getitem( key ); of localstorage[ key ] = value ; var mijnwaarde = localstorage[ key ];

33 maar wat met objecten? var mijnobject = {name: Mante, level: Ninja } localstorage.setitem( objectje, JSON.stringify(mijnObject)); var resultaat = localstorage.getitem( objectje ); resultaat = JSON.parse(resultaat);

34

35 geolocation

36

37

38

39

40

41 We willen in onze apps zorgen voor een betere UX

42 We willen in onze apps zorgen voor een betere UX sensoren van de devices gebruiken

43 We willen in onze apps zorgen voor een betere UX sensoren van de devices gebruiken tijd beweging bluetooth,... LOCATIE! Joepie!

44 Syntax? navigator.geolocation.getcurrentposition(function(p){ console.log(p); });

45 Hoe zit het in elkaar?

46 Hoe zit het in elkaar? locatie op basis van IP, MAC, wifi-location, gps, gsm-masten,...

47 Security Werkt enkel nadat de USER expliciet toestemming heeft gegeven, elke keer opnieuw, per page. (w3c specs)

48

49

50 application cache

51 application cache

52 application cache

53 application cache

54 application cache

55 application cache + offline browsing + snelheid + minder server load

56 syntax CACHE MANIFEST./icn/144x144.png./css/style.css./css/normalize css./data-fallback/groenzone.json./js/app/router/applicationRouter.js./js/app/view/templates/home.tmpl./js/app/view/templates/noResult.tmpl./js/app/view/templates/compiled/detail.js./js/app/application.js./js/main.js./js/lib/backbone/backbone min.js./js/lib/handlebars/handlebars-runtime js./js/lib/require/require min.js./img/history.svg./img/logo_d01.svg./img/tpark_logo.svg./index.html #8e5d7a869f835fd11b2c97148d18a16c NETWORK: *

57 syntax cache.manifest-bestand: CACHE MANIFEST index.html css/style.css img/logo.png

58 syntax CACHE MANIFEST index.html css/style.css img/logo.png # hierboven lijst je al je te cachen files op # Comments worden voorafgegaan door een hekje! NETWORK api.twitter.com/* # je kan gebruik maken van wildcards # in het network stuk vermeld je alle files/urls die niet mogen # gecached worden / die de app niet in de cache mag gaan zoeken. FALLBACK index.php offlinewarning.html #version: 1.2 (24/04/2013)

59 syntax <html manifest="manifest.appcache">

60 syntax <html manifest="manifest.appcache"> extensie mag je zelf kiezen maar... mime-type: text/cache-manifest

61 syntax applicationcache.status applicationcache.update() applicationcache.swapcache()

62

63

64

65

66

67

68

69

70 AMD Asynchronous Module Definitions => structuur

71 AMD Asynchronous Module Definitions => structuur

72

73 <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script>

74

75 één js-file, included in the index.html :)

76 één js-file, included in the index.html :) => configuration of all js-files

77 district01.be/tpark/start.zip

78 Live walkthrough Require.js + coding in backbone :) district01.be/tpark/start.zip

79 Live walkthrough Require.js + coding in backbone :) Download start.zip op district01.be/tpark/start.zip

80 district01.be/tpark/backboneistof.zip

81 Q&A

82 Resources web-guru s: Paul Jonathan John Thomas Wilson David bruce Jeremy Dave

83 Extra extra, read all about it! GRUNT