Bộ nhớ cache HTML5 - Có thể có một số cache riêng biệt cho một URL không?

Question

Mỗi URL có thể được liên kết với một tệp kê khai bộ nhớ cache duy nhất. Nhưng tôi muốn một số tệp kê khai bộ nhớ cache được liên kết với cùng một URL. Đây là lý do:

Một số tệp tôi muốn được lưu vào bộ nhớ cache hiếm khi được cập nhật và lớn. Vì vậy, mỗi khi bộ nhớ cache được cập nhật, các tệp lớn này sẽ được tải xuống lại ngay cả khi chúng có thể không bị thay đổi. Vì vậy, tôi muốn chia bộ nhớ cache. Một bộ nhớ cache cho các đề tài hiếm khi được cập nhật các tệp lớn và bộ nhớ cache khác cho các tệp ánh sáng được cập nhật thường xuyên.

Các bạn có biết cách chia nhỏ bộ nhớ cache HTML5 không?

Answer 1

Cách hiệu quả nhất là:

a) Sử dụng ngày hết hạn xa trong tương lai (max-age) trên tất cả các nguồn lực nêu ở phần CACHE manifest và thêm dấu thời gian hậu tố cho mỗi tập tin trong phần CACHE, ví dụ:

 
CACHE: 
menu_1355817388000.js 
toolbar_1355817389100.js 

b) Khi bất kỳ tệp nào ở trên thay đổi trên máy chủ, hãy regen/cập nhật tệp kê khai để thay đổi dấu thời gian. Chỉ tệp có dấu thời gian được sửa đổi mới được tải xuống lần tiếp theo. Nhiệm vụ hoàn thành.

Lưu ý: Tải lại trang hai lần trong trình duyệt, như trên trình duyệt làm mới đầu tiên tải xuống tệp kê khai và sử dụng tài nguyên được lưu trong bộ nhớ cache cũ để vẽ trang. Điều này được thực hiện để tăng tốc độ hiển thị trang (có các thủ thuật để xử lý vấn đề làm mới đôi này, nhưng chúng nằm ngoài phạm vi câu hỏi của bạn)

Xem thêm thông tin trong this long but best article I ever seen on appcache.

Answer 2

CACHE MANIFEST 

# This is a comment. 
# Cache manifest version 0.0.1 
# If you change the version number in this comment, 
# the cache manifest is no longer byte-for-byte 
# identical. 

demoimages/mypic.jpg 
demoimages/yourpic.jpg 
demoimages/ourpic.jpg 
sr/scroll.js 

NETWORK: 
# All URLs that start with the following lines 
# are whitelisted. 
# whitelisted items are needed to help the site function, you could put regularly 
# changing items here 
http://example.com/examplepath/ 
http://www.example.org/otherexamplepath/ 

CACHE: 
# Additional items to cache. 
demoimages/allpics.jpg 

FALLBACK: 
demoimages/currentImg.jpg images/stockImage.jpg` 

Answer 3

Sử dụng iframe

bộ nhớ cache trang của bạn manifest sẽ bao gồm các tập tin ánh sáng và manifest bộ nhớ cache của một iframe nạp bởi trang này sẽ bao gồm các tập tin lớn

Mở chrome bộ nhớ cache ứng dụng của iframe sẽ cũng được sử dụng cho trang. Tôi chưa thử nghiệm phương pháp này trên các trình duyệt khác.

xem một ví dụ sống tại http://www.timer-tab.com và nếu bạn đang sử dụng chrome thấy chia tay bộ nhớ cache của nó tại chrome: // appcache-internals/

Answer 4

Nếu lừa khung nội tuyến không hoạt động, sử dụng API HTML5 FileSystem

Xem http://updates.html5rocks.com/2012/04/Taking-an-Entire-Page-Offline-using-the-HTML5-FileSystem-API

Answer 5

Khi file manifest được thay đổi và các tập tin của bộ nhớ cache ứng dụng được tải xuống một lần nữa, các quy tắc HTTP bộ nhớ đệm bình thường vẫn áp dụng. Điều này có nghĩa là nếu bạn đặt đúng tiêu đề bộ nhớ đệm HTTP cho những tệp lớn này, bạn sẽ nhận được 304 để các tệp này không được tải xuống lại. Vì vậy, nó không cần thiết để chia bộ nhớ cache của ứng dụng.

Answer 6

Có thể là câu trả lời nhưng tôi muốn giảm nhẹ một số phát hiện của mình khi tôi khắc phục sự cố ứng dụng web của riêng mình.

Tôi đã phát hiện ra rằng tôi có thể sử dụng 2 iframe (manifest_framework) và (manifest_media) để tải tệp kê khai, nhưng tôi vẫn chưa rõ ràng cách chúng được nhắm mục tiêu, nhưng tôi đã thành công hạn chế.

manifest_framework:

CACHE MANIFEST 

CACHE: 
appdata.ini 
dialog.png 
jquery.min.js 
login.htm 
login.js 
manifest.appcache.js 

NETWORK: 
* 

FALLBACK: 

manifest_media:

CACHE MANIFEST 

CACHE: 
manifest_fwk.php 
od/audio_track_1_1.m4a 
od/audio_track_1_2.m4a 
od/audio_track_1_3.m4a 
od/audio_track_1_4.m4a 
od/video_1.mp4 
od/video_2.mp4 
od/video_3.mp4 

NETWORK: 
* 

FALLBACK: 
./ webapp.php 

./index.php là trang 'trang đích' mà bản thân nó không được lưu trữ nhưng rơi trở lại webapp.php khi offline .

Điều tôi không hiểu là cách liên kết này đến trang webapp.php. Tôi thấy rằng tôi chỉ có thể truy cập vào một hoặc bộ nhớ cache tệp kê khai khác. Các tác phẩm trên trong safari di động, phương tiện sẽ được lưu vào bộ nhớ cache và hình ảnh nhưng không nhất thiết phải là JS hoặc hình ảnh trong tệp kê khai khung công tác.

Bất kỳ ai cũng có nhiều ví dụ hơn khi nhiều tệp kê khai được tham chiếu từ một URL/trang?

Answer 7

Nhóm làm việc W3C đã từ bỏ hệ thống tệp api, vì vậy KHÔNG nên SỬ DỤNG nữa.

Có thể chúng tôi sẽ thấy nó rơi ra khỏi phiên bản Chrome tiếp theo.

http://www.w3.org/TR/file-system-api/