Bài 46: Cache cho ứng dụng web trong HTML5

Bộ nhớ cache chức năng cơ bản là giúp tăng tốc độ truy cập website ở những lần truy cập sau đó. Với bộ nhớ cache cho ứng dụng (Application Cache), thật dễ dàng để thực hiện một phiên bản offline của một ứng dụng web, bằng cách tạo một bộ nhớ cache lưu các file tạm. Chúng ta sẽ tìm hiểu cách thức thực hiện tạo cache cho ứng dụng web với HTML5.

Cache cho ứng dụng là gì?

HTML5 giới thiệu cache cho ứng dụng, có nghĩa là một ứng dụng web được lưu trữ tạm lại và có thể truy cập mà không cần kết nối Internet.

Ứng dụng bộ nhớ cache cung cấp cho một ứng dụng 3 ưu điểm:

  1. Duyệt web offline (Offline browsing) – Người sử dụng có thể sử dụng ứng dụng khi họ offline
  2. Tốc độ (Speed) – Nguồn tài nguyên lưu trữ được tải nhanh hơn
  3. Giảm tải server (Reduced server load) – Trình duyệt sẽ chỉ tải xuống các cập nhật/thay đổi tài nguyên từ máy chủ

Hỗ trợ trình duyệt

Phiên bản đầu tiên của các trình duyệt hỗ trợ đầy đủ cache cho ứng dụng.

API icon_chrome  icon_ie icon_firefox icon_safari  icon_opera
Cache cho ứng dụng 4.0 10.0 3.5 4.0 11.5

Ví dụ Cache Manifest trong HTML

Ví dụ dưới đây cho thấy một tài liệu HTML với cache manifest (đối với duyệt web offline):

Ví dụ:


<!DOCTYPE html>
<html manifest="demo_cache.appcache">
<body>

<script>
function getDateTime() {
 var d = new Date();
 document.getElementById('timePara').innerHTML = d;
}
</script>

<p id="timePara"><button onclick="getDateTime()">Lấy thời gian</button></p>

<p><img src="img_logo.gif" width="336" height="69"></p>

<p>Thử mở <a href="cache_manifest.htm" target="_blank">trang này</a>, rồi thực hiện ngắt mạng Internet và thử tải lại trang. Bạn sẽ thấy Script này chạy bình thường.</p>

</body>
</html>

Xem ví dụ ở đây

Cache Manifest căn bản

Để kích hoạt cache cho ứng dụng web, cần thêm thuộc tính manifest trong thẻ <html>:


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

Mọi trang web với thuộc tính manifest được chỉ định sẽ được cache khi người sử dụng truy cập nó. Nếu thuộc tính manifest không được xác định thì trang web sẽ không được cache  (trừ khi trang web này được chỉ định trực tiếp trong tệp manifest).

Phần mở rộng tập tin được đề nghị cho các file manifest là “.appcache”

Một tệp manifest cần được chỉ định đúng kiểu phương tiện phục vụ , đó là “text/cache-manifest“. Cần phải được cấu hình trên web server.

Tệp Manifest

Tệp Manifest là một tệp tin văn bản đơn giản, nó báo cho trình duyệt cái gì cache (và cái gì không cache).

Manifest file có 3 phần:

  • CACHE MANIFEST – Danh sách các tập tin ở dưới tiêu đề này sẽ được cache, sau khi chúng được tải lần đầu tiên.
  • NETWORK – Danh sách các tập tin nằm dưới tiêu đề này sẽ được yêu cầu kết nối tới máy chủ, và sẽ không bao giờ cache.
  • FALLBACK – Danh sách các tập tin nằm ở dưới tiêu đề này chỉ định các trang dự phòng nếunếu một trang không thể truy cập.

CACHE MANIFEST

Dòng đầu tiên, CACHE MANIFEST, được yêu cầu:


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

Tệp Manifest ở trên liệt kê 3 tài nguyên: một CSS file, một ảnh GIF, và một file JavaScript. Khi tệp manifest được nạp, trình duyệt sẽ tải 3 tệp này từ thư mục gốc của website.  Sau đó, Dù khikhông có kết nối internet, các nguồn tài nguyên trên vẫn sẽ có sẵn.

NETWORK

Phần NETWORK dưới đây chỉ định file “login.php” không được cache, và sẽ không có sẵn khi offline :


NETWORK:
login.php

Dấu hoa thị có thể được sử dụng để chỉ ra rằng tất cả các tài nguyên/các tệp cần yêu cầu kết nối mạng:


NETWORK:
*

FALLBACK

Phần FALLBACK bên dưới chỉ định tệp “offline.html” sẽ được phục vụ thay thế các tệp trong thư mục / html/ trong trường hợp kết nối internet không được thiết lập:


FALLBACK:
/html/ /offline.html

Chú ý: URI đầu tiên là các nguồn, thú 2 là dự phòng.

Cập nhật trong Cache

Một khi ứng dụng được lưu trữ, nó sẽ giữ bộ nhớ cache này cho đến khi một trong các trường hợp sau xảy ra:

  • Người dùng xóa bộ nhớ cache của trình duyệt
  • Tệp Manifest được thay đổi (xem Mách nhỏ bên dưới)
  • Bộ nhớ cache của ứng dụng được cập nhật theo chương trình

Ví dụ – Cache Tệp Manifest đầy đủ


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

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

Chú ý Cache cho ứng dụng

Hãy cẩn thận với những cái bạn cache.

Mộ tệp tin được cache, trình duyệt sẽ sử dụng hiển thị tệp này trong bộ nhớ cache, thậm chí ngay cả khi bạn thay đổi các tệp tin này trên máy chủ. Để đảm bảo trình duyệt cập nhật bộ nhớ cahe, bạn cần thay đổi tệp manifest.

Ghi chú: Trình duyệt có thể giới hạn kích thước khác nhau đối với việc cache dữ liệu (một vài trình duyệt có giới hạn 5MB mỗi website).

Các thẻ:

Có thể bạn sẽ thích…

Để lại một bình luận