Application Cache trong HTML5
HTML5 cho ra đời một phương thức mới cho phép một website hay một ứng dụng web có khả năng hoạt động mà không cần kết nối mạng. Trong bài này, chúng ta sẽ tìm hiểu cách Application Cache hoạt động, lưu trữ tài nguyên, giúp người dùng vẫn có thể truy cập vào website của bạn mà không cần có kết ...
HTML5 cho ra đời một phương thức mới cho phép một website hay một ứng dụng web có khả năng hoạt động mà không cần kết nối mạng. Trong bài này, chúng ta sẽ tìm hiểu cách Application Cache hoạt động, lưu trữ tài nguyên, giúp người dùng vẫn có thể truy cập vào website của bạn mà không cần có kết nối internet.
Application Cache là gì?
Application Cache là tính năng mới trong HTML5, cho phép website có khả năng lưu trữ tài nguyên tạm thời trên trình duyệt và truy cập vào những tài nguyên đó mà không cần tới kết nối internet.
Application cache giúp cho website của bạn có 3 lợi thế:
- Duyệt web offline – người dùng vẫn có thể truy cập website của bạn dù không kết nối internet
- Tốc độ – những tài nguyên được lưu trữ tạm thời trên trình duyệt giúp web tải nhanh hơn
- Giảm tải cho máy chủ – trình duyệt sẽ chỉ tải những tài nguyên mới từ máy chủ
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Application Cache | 4.0 | 3.5 | 10.0 | 4.0 | 11.5 |
Ví dụ về cache
Ví dụ dưới đây sẽ cho bạn thấy cách hoạt động của application cache:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html manifest="/resources/demo_html.appcache"> <body> <script src="/resources/demo_time.js"></script> <p id="timePara"><button onclick="getDateTime()">Nhấn vào đây để lấy thời gian</button></p> <p><img src="/wp-content/uploads/2014/10/wvnlogo.png" awidth="200" height="72"></p> <p>Mở <a href="https://webvn.com/run-example/?pid=2168" target="_blank">trang này</a>, sau đó ngắt kết nối internet hoặc chọn chế độ duyệt web offline và tải lại trang. Đoạn mã javascript dùng để lấy thời gian và logo WebVN vẫn hiển thị bình thường.</p> </body> </html> |
Demo
Căn bản về application cache
Để kích hoạt application cache, bạn sử dụng thuộc tính manifest trong thẻ <html>:
|
1 2 3 4 |
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> |
Các trang có sử dụng thuộc tính manifest sẽ được trình duyệt lưu trữ để người dùng truy cập lần sau. Nếu thuộc tính manifest không được thiết lập, trang sẽ không được lưu trữ.
Khuyến khích sử dụng tập tin manifest có phần mở rộng là: “.appcache”
Tập tin Manifest
Application Cache được kiểm soát bởi một tệp tin gọi là manifest, tệp tin này chứa danh sách những tài nguyên cần được lưu trữ để sử dụng khi người dùng không có kết nối mạng.
Tệp tin manifest gồm 3 phần:
- CACHE MANIFEST – Danh sách tài nguyên trong phần này sẽ được lưu trữ trên trình duyệt sau lần truy cập đầu tiên của người dùng
- NETWORK – Danh sách tài nguyên trong phần này sẽ không được lưu trữ trên trình duyệt
- FALLBACK – Danh sách tài nguyên trong phần này quy định: nếu một trang không thể truy cập được sẽ tự động chuyển sang trang dự phòng
CACHE MANIFEST
Cú pháp sử dụng phần CACHE MANIFEST:
|
1 2 3 4 |
CACHE MANIFEST /theme.css /logo.gif /main.js |
Tệp tin manifest ở trên liệt kê 3 tài nguyên gồm: một tệp tin CSS, một ảnh GIF và một tệp tin JavaScript. Khi tệp tin manifest được tải, trình duyệt sẽ tự động tải ba tệp tin từ website và lưu trữ. Nếu người dùng mất kết nối internet, những tệp tin này sẽ được truy cập để phục vụ người dùng.
NETWORK
Phần NETWORK như trong ví dụ dưới đây quy định địa chỉ “login.asp” sẽ không được lưu trữ, khi người dùng mất kết nối, địa chỉ này cũng sẽ không thể hoạt động:
|
1 2 |
NETWORK: login.asp |
Bạn có thể sử dụng dấu hoa thị để quy định tất cả các tài nguyên/tệp tin không được lưu trữ trên trình duyệt, bắt buộc phải có kết nối internet khi truy cập:
|
1 2 |
NETWORK: * |
FALLBACK
Phần FALLBACK trong ví dụ dưới đây quy định: trong trường hợp không có kết nối internet, tệp tin “offline.html” sẽ được đưa ra để phục vụ thay thế cho tất cả các tệp tin trong thư mục /html/:
|
1 2 |
FALLBACK: /html/ /offline.html |
Lưu ý: Địa chỉ đầu tiên là tài nguyên, địa chỉ thứ 2 là trang thay thế khi không có kết nối internet.
Cập nhật cache
Khi tài nguyên website của bạn đã được lưu trữ, chúng sẽ chỉ cập nhật khi một trong những điều dưới đây xảy ra:
- Người dùng xóa cache trên trình duyệt
- Tệp tin manifest được chỉnh sửa (xem bên dưới)
- Application cache được lập trình để cập nhật
Ví dụ đầy đủ về manifest
|
1 2 3 4 5 6 7 8 9 10 11 |
CACHE MANIFEST # 2015-09-02 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html |
Lưu ý khi dùng Application Cache
Thật cẩn thận với những tài nguyên bạn muốn trình duyệt lưu trữ thông qua Application Cache.
Một khi tài nguyên được lưu trữ, trình duyệt sẽ chỉ hiển thị phiên bản được lưu trữ, ngay cả khi bạn đã thay đổi tài nguyên đó trên website. Để chắc chắn trình duyệt sẽ cập nhật những tài nguyên này, bạn cần phải thay đổi tệp tin manifest.
Lưu ý: Mỗi trình duyệt sẽ quy định dung lượng giới hạn để lưu trữ tài nguyên của bạn (một số trình duyệt quy định giới hạn lưu trữ là 5MB cho mỗi website).
