HTML5 Application Cache
Trong hướng dẫn này, bạn sẽ học cách tạo các ứng dụng ngoại tuyến với tính năng bộ nhớ đệm HTML5.
Bộ đệm ứng dụng (Application Cache) là gì?
Thông thường, hầu hết các ứng dụng dựa trên web sẽ chỉ hoạt động nếu bạn đang trực tuyến. Nhưng HTML5 giới thiệu cơ chế bộ đệm ứng dụng cho phép trình duyệt tự động lưu tệp HTML và tất cả các tài nguyên khác cần hiển thị đúng trên máy cục bộ, để trình duyệt vẫn có thể truy cập trang web và các tài nguyên của nó mà không cần kết nối internet. .
Dưới đây là một số lợi thế của việc sử dụng tính năng bộ đệm ứng dụng HTML5:
- Duyệt ngoại tuyến - Người dùng có thể sử dụng ứng dụng ngay cả khi họ ngoại tuyến hoặc có sự gián đoạn bất ngờ trong kết nối mạng.
- Cải thiện hiệu suất - Tài nguyên được lưu trong bộ nhớ cache tải trực tiếp từ máy của người dùng thay vì máy chủ từ xa, do đó các trang web tải nhanh hơn và hoạt động tốt hơn.
- Giảm yêu cầu HTTP và tải máy chủ - Trình duyệt sẽ chỉ phải tải xuống các tài nguyên đã cập nhật / thay đổi từ máy chủ từ xa để giảm thiểu các yêu cầu HTTP và tiết kiệm băng thông quý giá cũng như giảm tải trên máy chủ web.
Mẹo: Tính năng bộ đệm ứng dụng của HTML5 được hỗ trợ trong tất cả các trình duyệt web hiện đại chính như Firefox, Chrome, Opera, Safari và Internet Explorer 10 trở lên.
Lưu vào bộ nhớ đệm các tệp với một tệp kê khai
Để lưu tệp vào bộ nhớ cache để sử dụng ngoại tuyến, bạn cần hoàn thành các bước sau:
Bước 1: Tạo tệp kê khai bộ nhớ cache
Tệp kê khai là một tệp văn bản đặc biệt cho trình duyệt biết tệp nào cần lưu trữ, tệp nào không nên lưu trữ và tệp nào cần thay thế bằng tệp khác. Tệp kê khai luôn bắt đầu bằng các từ CACHE MANIFEST(viết hoa). Dưới đây là một ví dụ về một tệp kê khai đơn giản:
Thí dụ
CACHE MANIFEST
# v1.0 : 10-08-2014
CACHE:
# pages
index.html
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
# images
/favicon.ico
images/logo.png
NETWORK:
login.php
FALLBACK:
/ /offline.htmlGiải thích mã
Bạn có thể hiểu ý nghĩa mà trên không?. OK, chúng ta hãy đi thẳng vào nó. Tệp kê khai có thể có ba phần riêng biệt: CACHE, NETWORK và FALLBACK.
- Các tệp được liệt kê dưới
CACHE:tiêu đề phần (hoặc ngay sauCACHE MANIFESTdòng) được lưu vào bộ nhớ cache rõ ràng sau khi chúng được tải xuống lần đầu tiên. - Các tệp được liệt kê dưới
NETWORK:tiêu đề phần là tài nguyên được liệt kê trong danh sách trắng không bao giờ được lưu vào bộ nhớ cache và không khả dụng khi ngoại tuyến. Nó có nghĩa là người dùng chỉ có thể truy cậplogin.phptrang khi họ trực tuyến. - Phần
FALLBACK:này chỉ định các trang dự phòng mà trình duyệt sẽ sử dụng trong trường hợp không thể thiết lập kết nối với máy chủ. Mỗi mục trong phần này liệt kê hai URI - đầu tiên là tài nguyên chính, thứ hai là dự phòng. Ví dụ: trong trường hợp của chúng tôioffline.htmltrang sẽ được hiển thị nếu người dùng ngoại tuyến. Ngoài ra, cả hai URI phải có cùng nguồn gốc với tệp kê khai. - Các dòng bắt đầu bằng ký hiệu băm (
#) là các dòng chú thích.
Lưu ý: Nếu tồn tại bộ đệm ứng dụng, trình duyệt sẽ tải tài liệu và các tài nguyên liên quan trực tiếp từ bộ đệm mà không cần truy cập mạng. Sau khi trình duyệt đó kiểm tra xem tệp kê khai đã được cập nhật trên máy chủ chưa và nếu tệp đã được cập nhật, trình duyệt sẽ tải xuống phiên bản mới của tệp kê khai và các tài nguyên được liệt kê trong đó.
Cảnh báo: Không chỉ định tệp kê khai trong tệp kê khai bộ nhớ cache, nếu không, gần như không thể thông báo cho trình duyệt biết có tệp kê khai mới.
Bước 2: Sử dụng tệp kê khai bộ nhớ cache của bạn
Sau khi tạo, hãy tải lên tệp kê khai bộ nhớ cache của bạn trên máy chủ web - đảm bảo máy chủ web được định cấu hình để phân phát tệp kê khai với kiểu MIME text/cache-manifest.
Bây giờ để làm cho tệp kê khai bộ nhớ cache của bạn có hiệu lực, bạn cần kích hoạt nó trong các trang web của mình, bằng cách thêm thuộc tính tệp kê khai vào phần tử gốc <html>, như được hiển thị bên dưới:
Thí dụ
Hãy thử mã này »<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
<title>Using the Application Cache</title>
</head>
<body>
<!--The document content will be inserted here-->
</body>
</html>Lưu ý: Trên máy chủ web Apache, kiểu MIME cho tệp kê khai ( .appcache) có thể được đặt bằng cách thêm AddType text/cache-manifest .appcache vào tệp .htaccess trong thư mục gốc của ứng dụng hoặc cùng thư mục với ứng dụng.