0
Is HTML5   ready forproduction?
Hi, I’m Remy@remremy@leftlogic.comI <3 JavaScriptQuestions: interrupt& ask!
Theres a lot more down here.
HTML5 is a spec
sort of"HTML5" is a ^brand
MOAR!!!"HTML5"          Geolocation          Web Workers          Web Sockets          Web SQL Databases          Web Stor...
H TM L5N OTNOT HTM           L5
CSS != HTMLBut maybe we should have been more careful
caniuse.com
When can Iuse "HTML5"?
Making itwork inthe "other"browser
PolyfillA shim that mimics a futureAPI providing a fallback to       older browsers    http://goo.gl/0Z9eI
ToolsModernizr to detect supportyepnode.js to conditionally load(available as part of Modernizr)
ToolsModernizr.load({  test: Modernizr.geolocation,  nope: geo-polyfill.js,  complete: initMyGeoApp});
Oh, and learnJavaScript
Web Storage
Cookiessuck.
Not the edible ones, duh.Cookiessuck.
The code for cookies is a pain - I always       google it.
"Session" cookiesleak across sessions.
Persistent cookiesrequire special date       format
Deleting a cookie, isnt really deleting, but setting in the past.
Varying degrees oflimitations on size and       number.
Fuck cookies.
Sexy Web Storage FTW
One InterfacelocalStoragesessionStorage http://dev.w3.org/html5/webstorage/
localStorage• Persists• Applied to document origin, i.e.  scheme/host/port tuple• No expiry
sessionStorage• Lasts whilst on the document origin• Doesnt leak• Exactly the same API as localStorage
5mb?Done! o/However: utf-16 ∴ 2½Mb
APIvoid setItem(key, value)any* getItem(key)void removeItem(key)string key(index)void clear()readonly number length
var store = sessionStorage;Play       store.setItem(name,rem);       store.getItem(name);       store.removeItem(name);   ...
APIsetter setItemgetter getItemdeleter removeItem
var store = sessionStorage;Play       store.name = rem;       store.name;       delete store.name;                     Do ...
t ip   Theres no security   protecting the API // Safari debugger broken: ss.setItem(key, 12);
Values are strings      Work around: JSON (and http://www.json.org/json2.js)
Play       var store = sessionStorage,           user = { screen_name : ‘rem’,                    rating : 11 };       sto...
Events toowindow.addEventListener(storage, function (event) {  console.log(event);}, false);                              ...
Storage in all  browsers
window.name
sessionStorage = (function () {  var data = window.name ? JSON.parse(window.name) : {};  return {     clear: function () {...
t ip Firefox cookie security applies to Storage too :(
t ipvar cookiesEnabled = (function () {  // the id is our test value  var id = +new Date();  // generate a cookie to probe...
Web SQL Databases             http://flic.kr/p/drmCJ
IndexedDB            http://flic.kr/p/5KXFwB
Questions?
CanvasCooler than this guy.
Canvas   SVG
http://vimeo.com/6691519
• Its not one is better than the other,  they do different things• Select canvas when it makes sense• Dont assume interact...
http://mrdoob.com
canvas-1.htmlPlay       <!DOCTYPE html>       <html lang="en">       <head>       <meta charset="utf-8" />       <title>Ca...
2D APIctx = canvas.getContext(2d)
Start Simple
fillRect, strokeRect      & colours
ctx.fillRect(10, 10, 100, 100);
ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;
ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);
ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;
ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;
ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5...
ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5...
t ip  Math.PI == 180°
t ip Math.PI *2 == 360°
t ip  d * Math.PI / 180      == radian
t ip   CSS stretches
Gradient fills
1. Create a gradient object2.Add colour stops3.Set the gradient to the fillStyle4.Draw
var w = canvas.width,    h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);
var w = canvas.width,    h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #f...
var w = canvas.width,    h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #f...
var w = canvas.width,    h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #f...
PlaycreateRadialGradient(x0,y0,r0,x1,y1,r1)
Pattern Fills
var img = new Image();img.src = url;var pattern = ctx.createPattern(img,repeat);ctx.fillStyle = pattern;ctx.fillRect(0, 0,...
t ip   invalid_state img.onload = function () {    // now use image for canvas };
Playing with paths
• For drawing irregular shapes• Can be filled• ...or stroked.
lineWidth     rect(x,y,h,w)lineTo(x,y)   arc(x,y,r,s,e,              anticw)moveTo(x,y)              fill()beginPath()    ...
drawImage
<img>    <canvas>   <video>        <canvas>
drawImage(src, dx, dy)drawImage(src, dx, dy, dw, dh)drawImage(src, sx, sy, sw, sh,          dx, dy, dw, dh)
Play       img.onload = function () {          // this == img          canvas.width = this.width;          canvas.height =...
pixelpushing
ctx.getImageData(0,0,w,h)
ctx.getImageData(0, 0, w, h);         0   1   2    3 i = 0   r   g   b    a i = 1   r   g   b    a i...    r   g   b    a
pixels.data[i * 4 + 0];        0   1   2    3i = 0   r   g   b    ai = 1   r   g   b    ai...    r   g   b    a
pixels.data[i * 4 + 1];        0   1   2    3i = 0   r   g   b    ai = 1   r   g   b    ai...    r   g   b    a
pixels.data[i * 4 + 2];        0   1   2    3i = 0   r   g   b    ai = 1   r   g   b    ai...    r   g   b    a
pixels.data[i * 4 + 3];        0   1   2    3i = 0   r   g   b    ai = 1   r   g   b    ai...    r   g   b    a
var pixels = ctx.getImageData(0, 0, w, h),    l = pixels.data.length,    i;for (i = 0; i < l; i += 4) {}
var pixels = ctx.getImageData(0, 0, w, h),    l = pixels.data.length,    i;for (i = 0; i < l; i += 4) {                   ...
var pixels = ctx.getImageData(0, 0, w, h),    l = pixels.data.length,    i;for (i = 0; i < l; i += 4) {  // red:   pixels....
var pixels = ctx.getImageData(0, 0, w, h),    l = pixels.data.length,    i;for (i = 0; i < l; i += 4) {  // red:   pixels....
var pixels = ctx.getImageData(0, 0, w, h),    l = pixels.data.length,    i;for (i = 0;   i < l; i += 4) {  // red:     pix...
var pixels = ctx.getImageData(0, 0, w, h),    l = pixels.data.length,    i;for (i = 0;   i < l; i += 4) {  // red:     pix...
ctx.putImageData(pixels, 0, 0)
ctx.putImageData(pixels, 0, 0)           Needs to be a         CanvasPixelArray              object
t ip      security_err To use getImageData, your document must be served over http (or https) - i.e. it doesnt work offline.
/workshop/authors-large.jpgPlay       greyscale = r*.3 + g*.59 + b*.11;       r = g = b = greyscale;       saturation = (M...
canvas.toDataURL(image/png);
Play       save.onclick = function () {          window.open(             canvas.toDataURL(image/png)          );       };...
Questions?
Offline Applications
Offline Apps• Application cache / manifest• Events: offline, online• navigator.onLine property
http://icanhaz.com/rubiks
Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
The Manifest1. Serve as text/manifest, by   adding to mime.types:text/cache-manifest appcache
t ip    Firefox caching <IfModule mod_expires.c>  ExpiresActive on  ExpiresByType text/cache-manifest  ↪ “access plus 0 se...
The Manifest2. First line must be:    CACHE MANIFEST
The Manifest3. Including page is implicitly   included in the cache.
The Manifest4. Two futher namespaces:   NETWORK & FALLBACK    FALLBACK:    / offline.html
CACHE MANIFEST/index.htmlrange.jsdatastore.jsFALLBACK:# force everything through# the index url/ /# this wont match# anyth...
CACHE MANIFEST                    /                    index.htmlServed from cache   range.js                    datastore...
CACHE MANIFEST                          /                          index.html                          range.jsRequests fo...
CACHE MANIFEST                       /                       index.html                       range.js                    ...
CACHE MANIFEST                       /                       index.html                       range.js                    ...
CACHE MANIFEST                       /                       index.html                       range.js                    ...
The Manifest5. Include some versioning to   cache bust your manifest     # version 16
The process
Browser: I have aBrowser: request   Server: serve all    manifest, cache                                            assets...
Browser: I have a    Problem: serve allBrowser: requestServer:                manifest, cache                             ...
document.body.onOnline =function () {   // fire an update to the cache   applicationCache.update();};
applicationCache.onUpdateReady = function () {   if (confirm("New version ready. Refresh?")) {     // reload     window.lo...
t ip Do offline last
Questions?
Web Sockets
Native or polyfilled
http://github.com/gimite/web-socket-js/
new WebSocket(url)   http://dev.w3.org/html5/websockets/
ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
onopenonmessageoncloseonerror
var data = JSON.parse(event.data);
.send
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,      conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wor...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
Questions?      To contact me after my presentation      – text NHT to INTRO (46876)      Or --      remy@leftlogic.com   ...
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Upcoming SlideShare
Loading in...5
×

Is HTML5 Ready? (workshop)

2,326

Published on

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,326
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
61
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Is HTML5 Ready? (workshop)"

  1. 1. Is HTML5 ready forproduction?
  2. 2. Hi, I’m Remy@remremy@leftlogic.comI <3 JavaScriptQuestions: interrupt& ask!
  3. 3. Theres a lot more down here.
  4. 4. HTML5 is a spec
  5. 5. sort of"HTML5" is a ^brand
  6. 6. MOAR!!!"HTML5" Geolocation Web Workers Web Sockets Web SQL Databases Web Storage Offline applicationsHTML5 Offline events Canvas Video Web Forms
  7. 7. H TM L5N OTNOT HTM L5
  8. 8. CSS != HTMLBut maybe we should have been more careful
  9. 9. caniuse.com
  10. 10. When can Iuse "HTML5"?
  11. 11. Making itwork inthe "other"browser
  12. 12. PolyfillA shim that mimics a futureAPI providing a fallback to older browsers http://goo.gl/0Z9eI
  13. 13. ToolsModernizr to detect supportyepnode.js to conditionally load(available as part of Modernizr)
  14. 14. ToolsModernizr.load({ test: Modernizr.geolocation, nope: geo-polyfill.js, complete: initMyGeoApp});
  15. 15. Oh, and learnJavaScript
  16. 16. Web Storage
  17. 17. Cookiessuck.
  18. 18. Not the edible ones, duh.Cookiessuck.
  19. 19. The code for cookies is a pain - I always google it.
  20. 20. "Session" cookiesleak across sessions.
  21. 21. Persistent cookiesrequire special date format
  22. 22. Deleting a cookie, isnt really deleting, but setting in the past.
  23. 23. Varying degrees oflimitations on size and number.
  24. 24. Fuck cookies.
  25. 25. Sexy Web Storage FTW
  26. 26. One InterfacelocalStoragesessionStorage http://dev.w3.org/html5/webstorage/
  27. 27. localStorage• Persists• Applied to document origin, i.e. scheme/host/port tuple• No expiry
  28. 28. sessionStorage• Lasts whilst on the document origin• Doesnt leak• Exactly the same API as localStorage
  29. 29. 5mb?Done! o/However: utf-16 ∴ 2½Mb
  30. 30. APIvoid setItem(key, value)any* getItem(key)void removeItem(key)string key(index)void clear()readonly number length
  31. 31. var store = sessionStorage;Play store.setItem(name,rem); store.getItem(name); store.removeItem(name); Do it in the console!
  32. 32. APIsetter setItemgetter getItemdeleter removeItem
  33. 33. var store = sessionStorage;Play store.name = rem; store.name; delete store.name; Do it in the console!
  34. 34. t ip Theres no security protecting the API // Safari debugger broken: ss.setItem(key, 12);
  35. 35. Values are strings Work around: JSON (and http://www.json.org/json2.js)
  36. 36. Play var store = sessionStorage, user = { screen_name : ‘rem’, rating : 11 }; store.user = JSON.stringify(user)); var gotUser = JSON.parse(store.user); alert(gotUser.screen_name);
  37. 37. Events toowindow.addEventListener(storage, function (event) { console.log(event);}, false); http://jsbin.com/ahafa3
  38. 38. Storage in all browsers
  39. 39. window.name
  40. 40. sessionStorage = (function () { var data = window.name ? JSON.parse(window.name) : {}; return { clear: function () { data = {}; window.top.name = ; }, getItem: function (key) { return data[key] || null; }, removeItem: function (key) { delete data[key]; window.top.name = JSON.stringify(data); }, setItem: function (key, value) { data[key] = value; window.top.name = JSON.stringify(data); } };})(); http://gist.github.com/350433
  41. 41. t ip Firefox cookie security applies to Storage too :(
  42. 42. t ipvar cookiesEnabled = (function () { // the id is our test value var id = +new Date(); // generate a cookie to probe cookie access document.cookie = __cookieprobe= + id + ;path=/; // if the cookie has been set, then were good return (document.cookie.indexOf(id) !== -1);})();
  43. 43. Web SQL Databases http://flic.kr/p/drmCJ
  44. 44. IndexedDB http://flic.kr/p/5KXFwB
  45. 45. Questions?
  46. 46. CanvasCooler than this guy.
  47. 47. Canvas SVG
  48. 48. http://vimeo.com/6691519
  49. 49. • Its not one is better than the other, they do different things• Select canvas when it makes sense• Dont assume interactive means canvas• Check out raphaeljs.com
  50. 50. http://mrdoob.com
  51. 51. canvas-1.htmlPlay <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html> http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
  52. 52. 2D APIctx = canvas.getContext(2d)
  53. 53. Start Simple
  54. 54. fillRect, strokeRect & colours
  55. 55. ctx.fillRect(10, 10, 100, 100);
  56. 56. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;
  57. 57. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);
  58. 58. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;
  59. 59. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;
  60. 60. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;ctx.arc(100,50,25,0,Math.PI*2,true);
  61. 61. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;ctx.arc(100,50,25,0,Math.PI*2,true);ctx.stroke();
  62. 62. t ip Math.PI == 180°
  63. 63. t ip Math.PI *2 == 360°
  64. 64. t ip d * Math.PI / 180 == radian
  65. 65. t ip CSS stretches
  66. 66. Gradient fills
  67. 67. 1. Create a gradient object2.Add colour stops3.Set the gradient to the fillStyle4.Draw
  68. 68. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);
  69. 69. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #fff);gradient.addColorStop(0.5, #f00);gradient.addColorStop(1, #000);
  70. 70. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #fff);gradient.addColorStop(0.5, #f00);gradient.addColorStop(1, #000);ctx.fillStyle = gradient;
  71. 71. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #fff);gradient.addColorStop(0.5, #f00);gradient.addColorStop(1, #000);ctx.fillStyle = gradient;ctx.fillRect(0, 0, w, h);
  72. 72. PlaycreateRadialGradient(x0,y0,r0,x1,y1,r1)
  73. 73. Pattern Fills
  74. 74. var img = new Image();img.src = url;var pattern = ctx.createPattern(img,repeat);ctx.fillStyle = pattern;ctx.fillRect(0, 0, w, h);
  75. 75. t ip invalid_state img.onload = function () { // now use image for canvas };
  76. 76. Playing with paths
  77. 77. • For drawing irregular shapes• Can be filled• ...or stroked.
  78. 78. lineWidth rect(x,y,h,w)lineTo(x,y) arc(x,y,r,s,e, anticw)moveTo(x,y) fill()beginPath() stroke()closePath()
  79. 79. drawImage
  80. 80. <img> <canvas> <video> <canvas>
  81. 81. drawImage(src, dx, dy)drawImage(src, dx, dy, dw, dh)drawImage(src, sx, sy, sw, sh, dx, dy, dw, dh)
  82. 82. Play img.onload = function () { // this == img canvas.width = this.width; canvas.height = this.height; ctx.drawImage(this, 0, 0); }; canvas-10.html
  83. 83. pixelpushing
  84. 84. ctx.getImageData(0,0,w,h)
  85. 85. ctx.getImageData(0, 0, w, h); 0 1 2 3 i = 0 r g b a i = 1 r g b a i... r g b a
  86. 86. pixels.data[i * 4 + 0]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  87. 87. pixels.data[i * 4 + 1]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  88. 88. pixels.data[i * 4 + 2]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  89. 89. pixels.data[i * 4 + 3]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  90. 90. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) {}
  91. 91. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { This says loop over each pixel}
  92. 92. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0]}
  93. 93. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0] // green: pixels.data[i+1]}
  94. 94. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0] // green: pixels.data[i+1] // blue: pixels.data[i+2]}
  95. 95. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0] // green: pixels.data[i+1] // blue: pixels.data[i+2] // alpha: pixels.data[i+3]}
  96. 96. ctx.putImageData(pixels, 0, 0)
  97. 97. ctx.putImageData(pixels, 0, 0) Needs to be a CanvasPixelArray object
  98. 98. t ip security_err To use getImageData, your document must be served over http (or https) - i.e. it doesnt work offline.
  99. 99. /workshop/authors-large.jpgPlay greyscale = r*.3 + g*.59 + b*.11; r = g = b = greyscale; saturation = (Math.max(r,g,b) + Math.min(r,g,b))/2; r = g = b = saturation; http://jsbin.com/aguho3/2/edit
  100. 100. canvas.toDataURL(image/png);
  101. 101. Play save.onclick = function () { window.open( canvas.toDataURL(image/png) ); }; canvas-13.html
  102. 102. Questions?
  103. 103. Offline Applications
  104. 104. Offline Apps• Application cache / manifest• Events: offline, online• navigator.onLine property
  105. 105. http://icanhaz.com/rubiks
  106. 106. Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
  107. 107. my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
  108. 108. The Manifest1. Serve as text/manifest, by adding to mime.types:text/cache-manifest appcache
  109. 109. t ip Firefox caching <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds” </IfModule>
  110. 110. The Manifest2. First line must be: CACHE MANIFEST
  111. 111. The Manifest3. Including page is implicitly included in the cache.
  112. 112. The Manifest4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  113. 113. CACHE MANIFEST/index.htmlrange.jsdatastore.jsFALLBACK:# force everything through# the index url/ /# this wont match# anything unless its on# another domainNETWORK:*# v4
  114. 114. CACHE MANIFEST / index.htmlServed from cache range.js datastore.js FALLBACK: # force everything through # the index url / / # this wont match # anything unless its on # another domain NETWORK: * # v4
  115. 115. CACHE MANIFEST / index.html range.jsRequests for files not datastore.jsfound in the cache, are FALLBACK: # force everything through directed to / # the index url / / i.e. index.html # this wont match (when offline). # anything unless its on # another domain NETWORK: * # v4
  116. 116. CACHE MANIFEST / index.html range.js datastore.jsAny requests to urls FALLBACK:that dont match / - # force everything through # the index url i.e. on another / / domain, will be # this wont match # anything unless its onserved through the # another domain NETWORK: web. * # v4
  117. 117. CACHE MANIFEST / index.html range.js datastore.js FALLBACK: # force everything through # the index url / / Also ensures # this wont match browser even # anything unless its on # another domainattempts to load the NETWORK: * asset # v4
  118. 118. CACHE MANIFEST / index.html range.js datastore.js FALLBACK: # force everything through # the index url / /The contents of the # this wont match manifest must # anything unless its on # another domainchange to trigger an NETWORK: * update # v4
  119. 119. The Manifest5. Include some versioning to cache bust your manifest # version 16
  120. 120. The process
  121. 121. Browser: I have aBrowser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reloadmanifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  122. 122. Browser: I have a Problem: serve allBrowser: requestServer: manifest, cache assets Change of content requires 2 refreshes reload Server: serve Browser: applicationCache Browser:manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  123. 123. document.body.onOnline =function () { // fire an update to the cache applicationCache.update();};
  124. 124. applicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location.refresh(); }};
  125. 125. t ip Do offline last
  126. 126. Questions?
  127. 127. Web Sockets
  128. 128. Native or polyfilled
  129. 129. http://github.com/gimite/web-socket-js/
  130. 130. new WebSocket(url) http://dev.w3.org/html5/websockets/
  131. 131. ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
  132. 132. onopenonmessageoncloseonerror
  133. 133. var data = JSON.parse(event.data);
  134. 134. .send
  135. 135. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  136. 136. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  137. 137. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  138. 138. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  139. 139. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  140. 140. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  141. 141. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};Play
  142. 142. Questions? To contact me after my presentation – text NHT to INTRO (46876) Or -- remy@leftlogic.com @rem
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×