HTML5 & CSS3 – Application Cache

HTML5 & CSS3 – Application Cache

LINK DEMO

Application Cache là gì?

Với HTML5, bạn dễ dàng tạo ra một ứng dụng web offline mà không cần đến kết nối internet.

Application cache có 3 lợi thế sau:

1. Duyệt web Offline – người dùng vẫn sử dụng được ứng dụng web ngayy cả khi không có kết nối mạng internet
2. Tốc độ – cache có tốc độ nhanh
3. Giảm tải cho server – Trình duyệt chỉ cần tải những cập nhật từ server.

Các trình duyệt hỗ trợ

Application cache nhận được sự hỗ trợ từ hầu hết các trình duyệt ,ngoại trừ Internet Explorer.
HTML5 Cache Manifest Example
Ví dụ dưới đây trình bày một trang HTML dùng cache manifest (không có kết nối internet):

Ví dụ

<!DOCTYPE HTML> 
<html manifest="demo.appcache"> <body> 
The content of the document…… 
</body> </html>  

Cơ bản về Cache Manifest

Để kích hoạt application cache, chèn thuộc tính manifest vào thẻ <html>:

<!DOCTYPE HTML> 
<html manifest="demo.appcache"> 
... 
</html> 

Một trang có thuộc tính manifest sẽ được lưu lại trong bộ nhớ cache khi người dùng truy cập đến nó. Nếu như trang web không thiết lập thuộc tính manifest thì nó sẽ không được lưu cache trừ khi trong file manifest có dòng lệnh thiết lập thuộc tính cho nó.
Phần đuôi mở rộng của files manifest là: “.appcache”

Lưu ý: Bạn phải cấu hình trên máy chủ “text/cache-manifest” để chạy được file manifest.

File Manifest 

File manifest là một file văn bản đơn giản, nó báo cho trình duyệt web những gì cần lưu cache.

File manifest có 3 phần:

  • CACHE MANIFEST – Danh sách những file sẽ cache sau khi truy cập qua.
  • NETWORK – Danh sách những file bắt buộc phải có kết nối internet và không bao giờ lưu cache
  • FALLBACK – Liệt kê danh sách những trang dự phòng khi trang mong muốn không truy cập được.

CACHE MANIFEST

Dòng đầu tiên bắt buộc khai báo từ khóa CACHE MANIFEST:

CACHE MANIFEST 
/theme.css 
/logo.gif 
/main.js  

Những dòng bên dưới có quy định 3 file là css, hình ảnh, javascript sẽ được tải về máy từ website, sau đó chúng ta không cần kết nối đến internet , chúng sẽ được sử dụng.

NETWORK

Những phần sau dòng NETWORK yêu cầu phải có kết nối internet ví dụ như file login không bao giờ cache, và sẽ không bao giờ được làm việc offline.

NETWORK: 
login.asp  

Dấu sao (*) yêu cầu tất cả các file đều phải có kết nối internet:

NETWORK: 
*  

FALLBACK

Phần FALLBACK dưới đây cho quy định file “offline.html” sẽ chạy trong trường hợp không có kết nối internet:

FALLBACK: 
/html/ /offline.html  

Cập nhật Cache

Nếu một ứng dụng đã được cache thì ứng dụng đó vẫn còn cache cho tới khi gặp 1 trong các việc sau:

• Người dùng xóa cache The user clears the browser’s cache
• File manifest bị chỉnh sửa (xem ghi chú bên dưới)
• Ứng dụng cache là chương trình cập nhật.

Ví dụ - Một file Manifest cache hoàn chỉnh

CACHE MANIFEST 
# 2012-02-21 v1.0.0 
/theme.css 
/logo.gif 
/main.js NETWORK: 
login.asp FALLBACK: 
/html/ /offline.html  

Tip: Dòng có dấu “#” bắt đầu là một dòng ghi chú. Một ứng dụng cache chỉ cập nhật khi file manifest bị thay đổi. Nếu bạn sửa một hình ảnh hoặc một hàm JavaScript, những thay đổi đó không ảnh hưởng đến cache. Cập nhật ngày và ghi chú là một cách để trình duyệt cache lại.

Ghi chú 

Bạn phải cẩn thận với những gì bạn cache.
Một file bị cache thì trình duyệt sẽ tiếp tục hiển thị phiên bản cache trước đó , cho dù bạn thay đổi file trên server thì máy trạm vẫn hiện bản cache cũ. Do đó, muốn cache được cập nhật thì bạn phải thay đổi file manifest.

Lưu ý: Trình duyệt có thể có những giới hạn dung lượng cache khác nhau ( một vài trình duyệt giới hạn dung lượng cache là 5MB cho một website).

Theo khoapham.vn

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Microsoft "rút chân" khỏi cuộc chơi lớn CES

Microsoft "rút chân" khỏi cuộc chơi lớn CES

Tháng 12 vừa qua, Microsoft đã công bố rằng CES 2012 sẽ là lần tham gia cuối cùng của mình.

Cài đặt máy chủ DNS và Domain Controller trong Windows Server 2003

Cài đặt máy chủ DNS và Domain Controller trong Windows Server 2003

Windows Server 2003 gồm có tất cả các chức năng mà khách hàng mong đợi từ một hệ điều hành Windows Server, chẳng hạn như khả năng bảo mật, độ tin cậy, khả năng có sẵn và nâng cấp.

New iPad lại trục trặc với kết nối Wi-Fi

New iPad lại trục trặc với kết nối Wi-Fi

Một số khách hàng đã phàn nàn rằng iPad mới kết nối Wi-Fi kém hơn nhiều so với những mẫu iPad trước đây của Apple.

Công ty diệt chuột T&C

 

Diet con trung