HTML5: Bộ đệm ứng dụng (App Cache)
Giải phóng thời gian, khai phóng năng lực
Tổng quan
Giả sử bạn đang đi du lịch ở một nơi nằm ngoài vùng phủ sóng của Nhà cung cấp Dịch vụ Internet (Internet Service Prodiver - ISP). Trong trường hợp này, bạn sẽ không thể truy cập vào các ứng dụng Web do không có kết nối mạng.
HTML5 hỗ trợ các ứng dụng Web ngoại tuyến (offline) cho phép bạn làm việc với chúng mà không cần bạn phải trực tuyến (online). Ứng dụng Web ngoại tuyến làm việc bằng cách lưu lại tất cả các trang Web cục bộ trên hệ thống của người dùng. Tính năng này được gọi là Bộ đệm Ứng dụng (Application Cache).
Bản chất của vấn đề ở đây chính là Bộ đệm Ứng dụng cho phép tất cả nguồn tài nguyên, chẳng hạn như HTML, JavaScript, hình ảnh, và các trang CSS của một ứng dụng Web được lưu trữ cục bộ trên hệ thống.
Việc lưu trữ này sẽ giúp người dùng lướt web mà không cần internet, tốc độ lướt web nhanh hơn do việc tải các tài nguyên trở nên nhẹ nhàng hơn (ít hơn), và việc lưu trữ này cũng có tác dụng giảm tải cho máy chủ (server).
Trình duyệt hỗ trợ
Internet Explorer 10, Firefox, Chrome, Safari và Opera đều hỗ trợ bộ đệm ứng dụng.
Ví dụ áp dụng
Ví dụ dưới đây sẽ cho bạn thấy bạn có thể lướt web mà máy tính của bạn không cần phải kết nối internet.
<html manifest="demo_manifest.appcache">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Lấy giờ chuẩn quốc tế (GMT)</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>Hãy click để mở <a href="html5_manifest.html" target="_blank">trang này</a> rồi ngắt kết nối internet, sau đó refresh lại trang, bạn sẽ thấy trang web vẫn làm việc bình thường.</p>
</body>
</html>
Căn bản về Bộ đệm Ứng dụng
Để sử dụng bộ đệm ứng dụng bạn cần dùng thuộc tính manifest trong phần tử <html>. Ví dụ:
<html manifest="demo_manifest.appcache">
...
</html>
Thuộc tính manifest sẽ cho phép lưu trữ trang web mỗi khi người dùng viếng thăm trang web đó. manifest sẽ thiết lập liên kết tới file manifest có phần mở rộng là .appcache.
Lưu ý rằng file manifest phải thể hiện đúng kiểu MIME theo dạng "text/cache-manifest". Vì vậy cần phải cấu hình MIME cho đúng trên dịch vụ web (web server).
File manifest bản chất là một tập tin văn bản (file text) đơn giản, file này có nhiệm vụ yêu cầu trình duyệt lưu trữ hoặc không lưu trữ những gì bạn muốn.
Một file manifest có ba phần:
- CACHE MANIFEST: Các tập tin được liệt kê ở phần này sẽ được lưu trữ sau khi được tải về lần đầu tiên.
- NETWORK: Các tập tin được liệt kê ở phần này yêu cầu một kết nối đến máy chủ, và sẽ không được lưu trữ.
- FALLBACK: Các tập tin được liệt kê ở phần này sẽ xác định các trang dự phòng để đề phòng trường hợp một trang web nào đó không truy cập được.
CACHE MANIFEST
Phần CACHE MANIFEST thường được viết như sau:
/theme.css
/logo.gif
/main.js
Giải thích:
Phần CACHE MANIFEST trên đây đưa ra ba loại tài nguyên cần lưu trữ lại trên máy tính cục bộ là tập tin CSS (theme.css), ảnh GIF (logo.gif) và tập tin JavaScript (main.js). Khi tập tin manifest được tải thì trình duyệt sẽ tải về máy ba file trên từ thư mục gốc của website. Sau khi đã tải về được ba file trên thì nếu như người dùng không kết nối internet thì nguồn tài nguyên liên quan đến ba file trên của web site vẫn có thể dùng được.
NETWORK
Phần NETWORK dưới đây yêu cầu không lưu trữ file "login.php" trên máy khách:
Bạn có thể sử dụng dấu hoa thị như dưới đây để yêu cầu rằng tất cả các tài nguyên cũng như tập tin khác với tài nguyên được nêu ở phần cache manifest đều không được lưu trữ:
FALLBACK
Phần FALLBACK dưới đây yêu cầu rằng file "offline.html" sẽ thay thế các file trong mục /html/ nếu như không kết nối được internet:
/html/ /offline.html
Như vậy một bộ đệm file manifest (file .appcache) hoàn chỉnh sẽ có dạng như sau:
# 2013-12-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
Chú ý: những dòng bắt đầu bằng dấu '#' là những dòng chú thích hoặc cũng có thể phục vụ cho một mục đích khác. Mỗi bộ đệm ứng dụng chỉ được cập nhật khi file manifest có sự thay đổi. Theo đó ở phần CACHE MANIFEST nếu như bạn có một thay đổi bất kỳ về ảnh, file CSS, file JS hoặc ngay cả khi bạn cập nhật về ngày tháng năm cũng như phiên bản ở phần chú thích thì bộ đệm ứng dụng sẽ được cập nhật lại.
Cập nhật Bộ đệm Ứng dụng
Bộ đệm sẽ vẫn còn lưu trữ các tập tin ứng dụng cho tới khi một trong những tình huống sau xảy ra:
- Người dùng xóa bộ đệm trình duyệt
- File manifest có sự thay đổi
- Bộ đệm ứng dụng được cập nhật theo chương trình.
Những lưu ý đối với bộ đệm ứng dụng
Thứ nhất, bạn cần phải thận trong với những gì bạn lưu trữ. Mỗi khi lưu trữ một file thì trình duyệt sẽ đưa ra phiên bản lưu trữ, và để đảm bảo rằng trình duyệt chắc chắn sẽ cập nhật bộ đệm thì bạn nên thay đổi file manifest.
Thứ hai, bạn cần lưu ý là các trình duyệt khác nhau có thể có bộ đệm với dung lượng khác nhau để lưu trữ dữ liệu (một số trình duyệt cho phép lưu trữ dữ liệu có thể lên tới 5 MB cho mỗi web site).
Giải phóng thời gian, khai phóng năng lực