Thứ Tư, 25 tháng 12, 2013

HTML5 Cache Đơn




Với HTML5 nó rấ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 ra một file manifest bộ nhớ cache.

Ứng dụng Cache là gì?

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

Bộ nhớ cache ứng dụng cho một ứng dụng ba lợi thế:
  1. Trình duyệt ngoại tuyến - người dùng có thể sử dụng ứng dụng khi họ offline
  2. Tốc độ - lưu trữ tài nguyên tải nhanh hơn
  3. Máy chủ tải giảm - trình duyệt sẽ chỉ download / tài nguyên thay đổi được cập nhật từ máy chủ

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 10, Firefox, Chrome, Safari và Opera hỗ trợ ứng dụng bộ nhớ cache.

HTML5 cache Manifest Ví dụ

Ví dụ dưới đây cho thấy một tài liệu HTML với một biểu hiện bộ nhớ đệm (cho trình duyệt ngoại tuyến):

Ví dụ

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"></p>
<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>


Thử nó cho mình »

Bộ nhớ cache Manifest Khái niệm cơ bản

Để kích hoạt bộ nhớ cache ứng dụng, bao gồm các thuộc tính biểu hiện trong thẻ <html> của tài liệu:

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

Tất cả các trang với các thuộc tính biểu hiện quy định sẽ được lưu trữ khi người dùng truy cập nó. Nếu thuộc tính biểu hiện không được chỉ định, trang web sẽ không được lưu trữ (trừ khi trang web được xác định trực tiếp trong file manifest).

Các tập tin được đề nghị gia hạn cho các tập tin biểu hiện là: "AppCache."

GhiMột biểu hiện tập tin cần để được phục vụ với đúng định dạng MIME , mà là "văn bản / cache-manifest". Phải được cấu hình trên máy chủ web.

File Manifest

File manifest là một tập tin văn bản đơn giản, mà nói với trình duyệt gì để nhớ đệm (và những gì không bao giờ nhớ cache).

Các tập tin manifest có ba phần:
  • CACHE MANIFEST - tập tin được liệt kê dưới tiêu đề này sẽ được lưu trữ sau khi được tải về lần đầu tiên
  • MẠNG - tập tin được liệt kê dưới tiêu đề này yêu cầu một kết nối đến máy chủ, và sẽ không bao giờ được lưu trữ
  • Dự phòng - tập tin được liệt kê dưới tiêu đề này xác định các trang dự phòng nếu một trang là không thể tiếp cận

CACHE MANIFEST

Dòng đầu tiên, bản kê cache, được yêu cầu:

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

Các tập tin manifest trên liệt kê ba nguồn lực: một tập tin CSS, một hình ảnh GIF, và một tập tin JavaScript. Khi file manifest được nạp, trình duyệt sẽ tải về ba tập tin từ thư mục gốc của trang web. Sau đó, bất cứ khi nào người dùng không kết nối với internet, các nguồn lực sẽ vẫn có sẵn.

MẠNG

Phần MẠNG dưới đây xác định rằng tập tin "login.asp" không bao giờ nên được lưu trữ, và sẽ không có sẵn ẩn:

NETWORK:
login.asp

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

NETWORK:
*

Dự phòng

Phần dự phòng dưới đây xác định rằng "offline.html" sẽ được phục vụ tại chỗ của tất cả các file trong thư mục / html / Danh mục, trong trường hợp kết nối internet không thể được thiết lập:

FALLBACK:
/html/ /offline.html

Lưu ý: URI đầu tiên là tài nguyên, thứ hai là dự phòng.

Cập nhật Cache

Khi một ứng dụng được lưu trữ, nó vẫn còn lưu trữ cho đến khi một trong những điều sau đây sẽ xảy ra:
  • Người sử dụng xóa bộ nhớ cache của trình duyệt
  • File manifest được sửa đổi (xem mẹo dưới đây)
  • Bộ nhớ cache ứng dụng được cập nhật theo chương trình

Ví dụ: - Toàn bộ cache Manifest file

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

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

Ghi chú về ứng dụng cache

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

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

Lưu ý: Các trình duyệt có thể giới hạn kích thước khác nhau cho dữ liệu lưu trữ (một số trình duyệt có một giới hạn 5MB cho mỗi trang web).
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)