HTML5 Application Cache

Feature นึงใน Kindle Reader ที่ทำให้สงสัยมากตอนเล่นครั้งแรกคือทำยังไงถึง Bookmark เป็น App ใน iPad แล้วพอเปิดขึ้นมาแบบ Airplane mode ยังสามารถทำงานได้อยู่โดยไม่ต้องต่อเนท เคยลองทำเว็บเล่นเองพอ Bookmark iPad ก็ไปโหลด resource ใหม่อยู่ดีจนไม่นานมานี้ทำ Project ทดลองจริงจังจึงพบว่า มี Feature นึงใน Browser รุ่นใหม่ๆ เรียกว่า Application Cache

Feature นี้ใช้ได้เฉพาะ Safari, Chrome และ Firefox เท่านั้น IE9 ยังไม่รองรับ (ส่วน Opera ยังไม่ได้ลอง)​ เพราะงั้น Project ทดลองเลยบอกไว้เลยว่าไม่รอบรับ IE (เพราะมันเล่น Offline ไม่ได้นั่นเอง) หน้าตาเว็บที่ใช้ Application cache ก็จะมีหน้าตา HTML ตามด้านล่าง

<!DOCTYPE html>
<html manifest="web.appcache">
  ...
</html>

attribute manifest ของ tag html สำหรับชี้ไปที่ไฟล์บอกว่า resource ไหนจะให้ Browser โหลดมา cache ไว้บ้างหน้าตาของ Manifest file ก็จะเหมือนด้านล่าง

CACHE MANIFEST

images/favicon.ico
images/logo.png

CACHE:
index.html
styles/application.css
scripts/jquery.js

NETWORK:
/service/resource
*

FALLBACK:
images/large/ images/offline.jpg

จากไฟล์ด้านบนจริงๆ Manifest file ประกอบด้วยสามส่วนคือ

  1. CACHE: อะไรก็ตามที่อยู่ใต้บรรทัดนี้หรือไม่อยู่หมวดใดเลย Browser จะดาวโหลดมาเก็บไว้และไม่ดาวโหลดใหม่จนกว่า Manifest file จะมีการเปลี่ยนแปลง เป็นส่วนที่ทำให้เวลาเปิดเว็บขึ้นมาใหม่ แม้จะติดต่อกับ Server ไม่ได้แต่ Browser จะยัง Render หน้าเว็บได้อยู่ สิ่งที่ประกาศใต้นี้ส่วนใหญ่ก็จะเป็นภาพ, css, script หรือ HTML ไฟล์ที่ไม่จำเป็นต้องโหลดจาก server อีก
  2. NETWORK: สิ่งที่อยู่ใต้นี้ Browser จะพยายามโหลดจาก server ทุกครั้งไม่มีดาวโหลดมาเก็บไว้ในเครื่อง สามารถใช้ wildcard ได้
  3. FALLBACK: สำหรับระบุว่า Resource อะไรถ้าไม่สามารถโหลดได้ให้เอาไฟล์ไหนมาแสดงแทน ด้านหน้าไว้บอกว่าไฟล์รูปแบบไหน ที่จะถูกโหลดแทนด้วยไฟล์ด้านหลัง ขณะอยู่ในสถานะ Offline

ใน Project ทดลองใช้แค่สองอย่างคือ Cache และ Network เพราะเป้าหมายตอนทำคือสร้าง Native Application สำหรับ iPad โดยใช้ HTML/JS อย่างเดียว ทำเสร็จลองเล่นบน iPad ก็ทำงานได้ดี และก็แก้ข้อสงสัยเรื่อง Kindle Reader ทำงานยังไงไปอีกอย่าง หลังจากเล่นอันนี้เสร็จ ก็แทบจะเลิกสนใจ Objective-C ไปเลยเพราะเขียน HTML5/JS/CSS ก็ทำงานได้เหมือน Native App แล้วแค่ไม่มี App Store ให้โปรโมทโปรแกรมเท่านั้นเอง และก็คิดต่อไปว่า สงสัยสิ่งที่ Google ทำอย่าง Chrome Book มันจะไม่ใช่ของเล่นสำหรับ Geek ซะแล้ว

อ้างอิง:

  1. A Beginner’s Guide to Using the Application Cache
  2. Let’s take this offline

About llun

Just a programmer

, ,