บันทึก Google DevFest Chiang Mai 2011 ตอนที่ 2

Published on

DevFest 2011 unofficial logo

HTML5 Offline Applications

ตอนแรกคิดว่า Session นี้คงไม่ต่างอะไรกับเมื่อตอนเช้ามาก (Bleeding Edge HTML5) แต่พอฟังๆ ไป ผมกลับรู้สึกชอบมากกว่า เพราะมันทำให้มองเห็นภาพการใช้งานจริงดี ประโยชน์ของ Offline Application อย่างแรกเลยคือเรื่องสถานที่ เราไม่สามารถพาอินเตอร์เน็ตติดตัวไปด้วยตลอดเวลา (ถึงแม้จะอยากก็ตามที) แต่ Offline Application ก็ยังสามารถที่จะใช้งานได้ เช่น บนเครื่องบิน ระหว่างขับรถ (ฉันหมดแรง) หรือแม้กระทั่งกลางทะเลทราย (!) นอกจากนี้ เรื่องประสิทธิภาพในการใช้งาน แน่นอนว่า Offline Application ทำงานได้เร็วกว่า Online อยู่แล้ว

Local Storage

เก็บข้อมูลในลักษณะ key-value ธรรมดาๆ วิธีใช้งานก็แสนง่าย โดยจับค่าที่ต้องการ ยัดลงใน object localStorage ได้เลย เช่น หากต้องการเก็บข้อมูลที่มี key เป็น browser ส่วน value เป็น chrome ก็

window.localStorage.browser= 'chrome';

หรือเรียกใช้ผ่าน API เหล่านี้ก็ได้นะ

localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();

ข้อควรระวังคือ เรียกใช้ clear() จะลบค่าใน localStorage ออกหมดเลย

Session Storage

เหมือนกัน Local Storage แทบทุกประการ ยกเว้นมันจะถูกลบค่าทิ้งทุกครั้งที่เราปิด browser

ในการใช้งาน Web Storage นั้น รองรับเฉพาะการเก็บข้อมูลที่เป็น String ดังนั้น หากเราต้องการเก็บ Object ทั้งก้อนลงใน Local Storage หรือ Session Storage ก็ต้องทำการแปลงข้อมูลจาก Object ให้เป็น String เสียก่อน

var userStr = JSON.stringify(object);

เมื่อนำออกมาใช้ ก็ต้องแปลงกลับจาก String ให้เป็น Object เช่นกัน

var user = JSON.parse(userStr);

IndexedDB

(จดไม่ค่อยทันแล้ว) เหมือนเราจำลอง database server มาไว้ใน browser เก็บข้อมูลเป็น structure มากกว่าเป็นแค่ key-value แบบ Local Storage .. (นั่นแหละ database ก็คือ database จะพยายามอธิบายให้ยากอีกทำไม -*-) หลักการทำงานคร่าวๆ คือ query เอา index ขึ้นมา เก็บเอา cursor ของ index ในแต่ละ record แล้วก็วนลูป (iterate) ทำงานแต่ละ cursor จนครบ .. มึนไหมครับ ถ้ามึนลองอ่าน บทความนี้ที่ hack.mozilla.com ดู เปรียบเทียบ IndexedDB กับ WebDatabase (ซึ่งปัจจุบันเหมือนจะเลิกพัฒนาไปแล้ว (อ้างอิง)) .. ลองดูตัวอย่างการใช้งานง่ายๆ ได้ครับ

AppCache

“cache แม่งทั้ง app เลย” คงดูเป็นคำที่ไม่เกินจริงเท่าไหร่ โดยเราจะต้องสร้าง cache manifest file บนเซิฟเวอร์เราเพื่อบอกรายละเอียดเกี่ยวกับการ cache application ไว้ใช้ยาม offline .. ไอ้เจ้า manifest file เนี่ยจริงๆ แล้วเป็นไฟล์ text ธรรมดาเนี่ยแหละครับ แต่ html5doctor แนะนำว่าให้ตั้งนามสกุลเป็น .appcache เพื่อความเป็นสากลทัดเทียมกับนานาอารยประเทศ

วิธีใช้งาน AppCache คือ เพิ่ม attribute manifest ในแท็ก html ของเรา

<html manifest="example.appcache">

โดยที่ไฟล์ manifest มีส่วนประกอบหลักๆ คือ

CACHE MANIFEST
# vesion number

บรรทัดแรก ต้องเป็นคำว่า CACHE MANIFEST เพื่อเป็นการบอก browser ว่า นี่เป็นไฟล์ manifest ของฉันนะ ส่วน version number เอาไว้เช็คอัพเดทจากเซิฟเวอร์ ตัวอย่างเช่น เมื่อเซิฟเวอร์มีการอัพเดทไฟล์ CSS หรือ JS เราก็ต้องเปลี่ยน version number ในไฟล์ manifest (ซึ่งอยู่บนเซิฟเวอร์) เพื่อให้ offline application ทราบว่ามีการเปลี่ยนแปลง และจะได้อัพเดทไฟล์ cache เป็นเวอร์ชั่นใหม่ ตรงตามเซิฟเวอร์

CACHE: // cache what
FALLBACK: // use when offline
NETWORK: // require to be online

เนื้อหาหลักของไฟล์ manifest คือเจ้า 3 ส่วนนี้ครับ

  1. CACHE: เอาไว้บอกว่า เราต้องการให้เครื่อง local ทำการ cache ไฟล์อะไรบ้าง
  2. FALLBACK: เป็นการบอกว่า ถ้าอยู่ใน offline mode ให้เรียกไฟล์ไหน แทนไฟล์ไหน (ดูตัวอย่างการเขียน FALLBACK)
  3. NETWORK: เจาะจงว่าไฟล์พวกนี้จะใช้ได้ก็ต่อเมื่อ online อยู่เท่านั้น

AppCache มีข้อน่าสังเกตหลายข้อด้วยกันครับ

ข้อมูลเพิ่มเติมเกี่ยวกับ AppCache ดูได้ที่ appcachefacts.info ครับ

Files API

เป็นการใช้ JavaScript เข้าถึงไฟล์บนเครื่องเราโดยตรง โดยให้มาครบๆ ครับทั้งอ่าน เขียน ย้าย หรือลบไฟล์ ทำให้เราสามารถทำอะไร (ต่อมิอะไร) กับไฟล์เหล่านั้นได้ก่อนถึงมือเซิฟเวอร์ เช่น เราสามารถเช็คขนาดไฟล์, ชนิดไฟล์ที่ user เลือกได้โดยที่ยังไม่ต้องอัพโหลดไปยังเซิฟเวอร์ ช่วยทำให้ประหยัดเวลาไปได้เยอะเลย

อ่านต่อเพิ่มเติมเกี่ยวกับ Files API http://www.html5rocks.com/en/tutorials/file/dndfiles/

Data Synchronization

เพิ่ม Application Performance

Creating a Modern Web Application

window.history.pushState(slideNo, 'Slide ' + slideNo, hash);
document.body.onpaste = function(e) {
  var items = e.clipboardData.items;
}
// file drag out - download file by dragging out of the window
// HTML
<input type=file data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE" />
// JavaScript
window.addEventListener('dragstart',function(e) {
    e.dataTransfer; // start transfering file to user's machine
});
// keep users informed - create notifications
window.notifications; // notification object
var note = notifications.createNotification(picture, title, text);
note.show();

หมดละครับ เย่! (เหนื่อยจังฮู้ว)

สรุปงาน Google DevFest Chiang Mai 2011

แถม CSS ที่ใช้ทำ Logo รูปข้างบนครับ

h1 {
  font: bold 150px/100% 'RadleyRegular', serif;
  color: #A42536;
  text-align: center;
  text-shadow:
    -1px 0 0 rgba(255,255,255,0.2),
    0 1px 0 rgba(0,0,0,0.2),
    1px 1px 0 #242424,
    2px 2px 0 #282828,
    3px 3px 0 #2a2a2a,
    4px 4px 0 #2d2d2d,
    5px 5px 0 #313131,
    6px 6px 0 #343434,
    6px 6px 10px black;
}

Share

(Edit on GitHub)