Bộ nhớ cache của ứng dụng HTML5

Sử dụng bộ nhớ cache của ứng dụng, bằng cách tạo tệp manifest cache, có thể dễ dàng tạo phiên bản ngoại tuyến của ứng dụng web.

Bộ nhớ cache của ứng dụng là gì?

HTML5 đã giới thiệu bộ nhớ cache của ứng dụng (Application Cache), điều này có nghĩa là có thể lưu trữ ứng dụng web và truy cập được khi không có kết nối Internet.

Bộ nhớ cache của ứng dụng mang lại ba lợi thế cho ứng dụng:

  1. Duyệt web ngoại tuyến - Người dùng có thể sử dụng chúng khi ứng dụng ngoại tuyến
  2. Tốc độ - Các tài nguyên đã được lưu trữ tải nhanh hơn
  3. Giảm tải máy chủ - Trình duyệt chỉ tải xuống các tài nguyên đã được cập nhật hoặc thay đổi từ máy chủ

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt hỗ trợ hoàn toàn ứng dụng lưu trữ đầu tiên.

API
Lưu trữ ứng dụng 4.0 10.0 3.5 4.0 11.5

Ví dụ về HTML Cache Manifest

Ví dụ sau đây hiển thị tài liệu HTML có cache manifest (cho việc duyệt web offline):

Ví dụ

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Nội dung tài liệu ......
</body>
</html>

Thử ngay

Cơ bản về Cache Manifest

Để kích hoạt ứng dụng lưu trữ, hãy bao gồm thuộc tính manifest trong thẻ <html> của tài liệu:

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

Mỗi trang được chỉ định manifest sẽ được lưu trữ khi người dùng truy cập. Nếu không chỉ định thuộc tính manifest, trang sẽ không được lưu trữ (trừ khi trang đó được chỉ định trực tiếp trong tệp manifest).

Tên mở rộng tệp được khuyến nghị cho tệp manifest là: ".appcache".

Lưu ý:Tệp manifest cần thiết lập đúng MIME-type, tức là "text/cache-manifest". Phải cấu hình trên máy chủ web.

Tệp Manifest

Tệp manifest là tệp văn bản đơn giản, nó thông báo cho trình duyệt nội dung được lưu trữ (và nội dung không được lưu trữ).

Tệp manifest có ba phần:

  • CACHE MANIFEST - Các tệp được liệt kê dưới tiêu đề này sẽ được lưu trữ sau khi tải lần đầu tiên.
  • NETWORK - Các tệp được liệt kê dưới tiêu đề này cần kết nối với máy chủ và sẽ không được lưu trữ.
  • FALLBACK - Các tệp được liệt kê dưới tiêu đề này quy định trang thay thế khi trang không thể truy cập (ví dụ: trang 404).

CACHE MANIFEST

Dòng đầu tiên, CACHE MANIFEST, là bắt buộc:

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

Tệp manifest trên liệt kê ba tài nguyên: một tệp CSS, một hình ảnh GIF và một tệp JavaScript. Khi tệp manifest được tải, trình duyệt sẽ tải ba tệp này từ thư mục gốc của trang web. Sau đó, bất kể người dùng何时 ngắt kết nối với Internet, các tài nguyên này vẫn có thể sử dụng được.

NETWORK

PhầnNETWORK củaNETWORK quy định tệp "login.php" sẽkhông bao giờ được lưu trữ và không thể sử dụng khi offline:

NETWORK:
login.asp

Bạn có thể sử dụng dấu * để chỉ ra rằng tất cả các tài nguyên/ký tự khác đều cần kết nối internet:

NETWORK:
*
FALLBACK

Phần FALLBACK dưới đây quy định nếu không thể thiết lập kết nối internet, sẽ sử dụng "offline.html" thay thế tất cả các tệp trong thư mục /html/:

FALLBACK:
/html/ /offline.html

Ghi chú：URI đầu tiên là tài nguyên, URI thứ hai là thay thế.

Cập nhật lưu trữ tạm

Một khi ứng dụng được lưu trữ tạm, nó sẽ duy trì lưu trữ tạm cho đến khi xảy ra các tình huống sau:

  • Người dùng xóa bộ nhớ tạm trình duyệt
  • Tệp manifest được thay đổi (xem các lưu ý dưới đây)
  • Cập nhật lưu trữ tạm ứng dụng bởi chương trình

Mô hình - Tệp Cache Manifest 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

Lưu ý：Những dòng bắt đầu bằng "#" là dòng chú thích, nhưng cũng có thể phục vụ các mục đích khác. Lưu trữ tạm của ứng dụng chỉ được cập nhật khi tệp manifest thay đổi. Nếu bạn chỉnh sửa một hình ảnh hoặc thay đổi một hàm JavaScript, các thay đổi đó sẽ không được lưu trữ lại. Cập nhật ngày và số phiên bản trong dòng chú thích là cách để trình duyệt cập nhật lại lưu trữ tạm.

Lưu ý về lưu trữ tạm của ứng dụng

Hãy chú ý đến nội dung lưu trữ tạm.

Một khi tệp được lưu trữ tạm, trình duyệt sẽ tiếp tục hiển thị phiên bản đã lưu trữ tạm, ngay cả khi bạn đã thay đổi tệp trên máy chủ. Để đảm bảo trình duyệt cập nhật lưu trữ tạm, bạn cần cập nhật tệp manifest.

Ghi chú：Lượng dữ liệu lưu trữ tạm của trình duyệt có thể khác nhau (một số trình duyệt giới hạn là mỗi trang web 5MB).