Có cách nào để tôi có thể đặt một số mã trên trang của mình để khi ai đó truy cập vào một trang web, nó sẽ xóa bộ nhớ cache của trình duyệt để họ có thể xem các thay đổi?
Ngôn ngữ được sử dụng: ASP.NET, VB.NET và tất nhiên là HTML, CSS và jQuery.
Câu trả lời:
Nếu điều này sắp xảy ra .cssvà .jsthay đổi, một cách là "xóa bộ nhớ cache" bằng cách thêm một cái gì đó như " _versionNo" vào tên tệp cho mỗi bản phát hành. Ví dụ:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Hoặc thay thế làm điều đó sau tên tập tin:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Bạn có thể kiểm tra liên kết này để xem nó có thể hoạt động như thế nào.
script.js?v=1.2. (Hoặc nếu bạn không theo dõi các phiên bản, chỉ cần sử dụng tệp được sửa đổi lần cuối, điều này thậm chí còn dễ thực hiện hơn). Không chắc đó là ý kiến của người bình luận trước đó!
<link />thẻ một cách linh hoạt và đưa phiên bản của ứng dụng làm tham số chuỗi truy vấn. Ngoài ra, một số CMS sẽ có "phiên bản tài nguyên máy khách" dưới dạng cài đặt toàn CMS được thêm vào - quản trị viên của trang có thể tự tăng phiên bản đó và các bản cập nhật của CMS cũng có thể tự động cập nhật. Dòng dưới cùng: bạn cần hiển thị URL tệp động.
Nhìn vào kiểm soát bộ đệm và Thẻ META hết hạn .
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
Một thực tiễn phổ biến khác là nối các chuỗi thay đổi liên tục vào cuối các tệp được yêu cầu. Ví dụ:
<script type="text/javascript" src="main.js?v=12392823"></script>
Đây là một câu hỏi cũ nhưng tôi nghĩ rằng nó cần một câu trả lời cập nhật hơn bởi vì bây giờ có một cách để có nhiều quyền kiểm soát bộ nhớ đệm trang web hơn.
Trong Ứng dụng web ngoại tuyến (thực sự là bất kỳ trang web HTML5 nào) applicationCache.swapCache()có thể được sử dụng để cập nhật phiên bản được lưu trong bộ nhớ cache của trang web của bạn mà không cần phải tải lại trang theo cách thủ công.
Đây là một ví dụ mã từ Hướng dẫn cho người mới bắt đầu sử dụng Bộ đệm ứng dụng trên HTML5 Rocks giải thích cách cập nhật người dùng lên phiên bản mới nhất của trang web của bạn:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);Xem thêm Sử dụng bộ đệm ứng dụng trên Mozilla Developer Network để biết thêm thông tin.
Mọi thứ thay đổi nhanh chóng trên Web. Câu hỏi này đã được hỏi vào năm 2009 và năm 2012 tôi đã đăng một bản cập nhật về một cách mới để xử lý vấn đề được mô tả trong câu hỏi. 4 năm nữa trôi qua và bây giờ có vẻ như nó đã bị phản đối. Cảm ơn cgaldiolo đã chỉ ra nó trong các ý kiến.
Hiện tại, kể từ tháng 7 năm 2016, Tiêu chuẩn HTML, Phần 7.9, các ứng dụng Web ngoại tuyến bao gồm cảnh báo không dùng nữa:
Tính năng này đang trong quá trình xóa khỏi nền tảng Web. (Đây là một quá trình dài phải mất nhiều năm.) Sử dụng bất kỳ tính năng ứng dụng Web ngoại tuyến nào tại thời điểm này rất không được khuyến khích. Sử dụng nhân viên dịch vụ thay thế.
Vì vậy, không dùng bộ nhớ cache ứng dụng trên Mozilla Developer Network mà tôi được tham chiếu trong năm 2012:
Không dùng nữa
Tính năng này đã bị xóa khỏi các tiêu chuẩn Web. Mặc dù một số trình duyệt vẫn có thể hỗ trợ nó, nhưng nó đang trong quá trình bị loại bỏ. Không sử dụng nó trong các dự án cũ hoặc mới. Các trang hoặc ứng dụng web sử dụng nó có thể bị hỏng bất cứ lúc nào.
Không phải như vậy. Một phương pháp là gửi các tiêu đề thích hợp khi phân phối nội dung để buộc trình duyệt tải lại:
Đảm bảo rằng một trang web không được lưu trong bộ nhớ cache, trên tất cả các trình duyệt.
Nếu bạn tìm kiếm "cache header"hoặc một cái gì đó tương tự ở đây trên SO, bạn sẽ tìm thấy các ví dụ cụ thể về ASP.NET.
Một cách khác, ít sạch hơn nhưng đôi khi chỉ là cách nếu bạn không thể kiểm soát các tiêu đề ở phía máy chủ, là thêm một tham số GET ngẫu nhiên vào tài nguyên đang được gọi:
myimage.gif?random=1923849839Đối với tài nguyên tĩnh, bộ nhớ đệm phải sẽ sử dụng các tham số truy vấn có giá trị của từng phiên bản tệp hoặc triển khai. Điều này sẽ có tác dụng xóa bộ nhớ cache sau mỗi lần triển khai.
/Content/css/Site.css?version={FileVersionNumber}Dưới đây là ví dụ ASP.NET MVC.
<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />Đừng quên cập nhật phiên bản lắp ráp.
?version=@ViewContext.Controller.GetType().Assembly.GetName().Version
Tôi đã có vấn đề tương tự và đây là cách tôi giải quyết nó:
Trong index.htmltệp tôi đã thêm tệp kê khai:
<html manifest="cache.manifest">Trong <head>phần bao gồm tập lệnh cập nhật bộ đệm:
<script type="text/javascript" src="update_cache.js"></script>Trong <body>phần tôi đã chèn chức năng onload:
<body onload="checkForUpdate()">Trong cache.manifesttôi đã đặt tất cả các tập tin tôi muốn lưu trữ. Điều quan trọng bây giờ là nó hoạt động trong trường hợp của tôi (Apache) chỉ bằng cách cập nhật mỗi lần nhận xét "phiên bản". Nó cũng là một tùy chọn để đặt tên tệp với "? Ver = 001" hoặc một cái gì đó ở cuối tên nhưng không cần thiết . Thay đổi chỉ # version 1.01kích hoạt sự kiện cập nhật bộ đệm.
CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other filesĐiều quan trọng là bao gồm 1., 2. và 3. chỉ trong index.html. Nếu không thì
GET http://foo.bar/resource.ext net::ERR_FAILEDxảy ra bởi vì mọi tệp "con" cố lưu trữ trang trong khi trang đã được lưu vào bộ đệm.
Trong update_cache.jstập tin tôi đã đặt mã này:
function checkForUpdate()
{
if (window.applicationCache != undefined && window.applicationCache != null)
{
window.applicationCache.addEventListener('updateready', updateApplication);
}
}
function updateApplication(event)
{
if (window.applicationCache.status != 4) return;
window.applicationCache.removeEventListener('updateready', updateApplication);
window.applicationCache.swapCache();
window.location.reload();
}Bây giờ bạn chỉ cần thay đổi tập tin và trong bản kê khai bạn phải cập nhật nhận xét phiên bản. Bây giờ truy cập trang index.html sẽ cập nhật bộ đệm.
Các phần của giải pháp không phải của tôi nhưng tôi đã tìm thấy chúng qua internet và kết hợp lại để nó hoạt động.
Tôi đã có một trường hợp tôi sẽ chụp ảnh khách hàng trực tuyến và sẽ cần cập nhật div nếu một bức ảnh bị thay đổi. Trình duyệt vẫn hiển thị ảnh cũ. Vì vậy, tôi đã sử dụng hack để gọi một biến GET ngẫu nhiên, sẽ là duy nhất mỗi lần. Đây là nếu nó có thể giúp bất cứ ai
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...EDIT Như được chỉ ra bởi những người khác, sau đây là giải pháp hiệu quả hơn nhiều vì nó sẽ chỉ tải lại hình ảnh khi chúng được thay đổi, xác định thay đổi này theo kích thước tệp:
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"Rất nhiều câu trả lời bị thiếu điểm - hầu hết các nhà phát triển đều nhận thức rõ rằng tắt bộ đệm là không hiệu quả. Tuy nhiên, có nhiều trường hợp phổ biến trong đó hiệu quả là không quan trọng và hành vi bộ đệm mặc định bị phá vỡ nghiêm trọng.
Chúng bao gồm lồng ghép, kiểm tra kịch bản lặp (cái lớn!) Và cách giải quyết phần mềm của bên thứ ba. Không có giải pháp nào được đưa ra ở đây là đủ để giải quyết các tình huống phổ biến như vậy. Hầu hết các trình duyệt web là bộ nhớ đệm quá tích cực và không cung cấp phương tiện hợp lý để tránh những vấn đề này.
<meta http-equiv="pragma" content="no-cache" />Đồng thời xem /programming/126772/how-to-force-a-web-browser-not-to-cache-images
Cập nhật URL cho các công việc sau đây cho tôi:
/custom.js?id=1
Bằng cách thêm một số duy nhất sau ?id=và tăng nó cho những thay đổi mới, người dùng không phải nhấn CTRL + F5để làm mới bộ đệm. Ngoài ra, bạn có thể nối thêm phiên bản băm hoặc chuỗi của thời gian hiện tại hoặc Epoch sau?id=
Cái gì đó như ?id=1520606295
Đây là trang MDSN về thiết lập bộ nhớ đệm trong ASP.NET.
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True
If Response.Cache.VaryByParams("Category") Then
'...
End IfKhông chắc chắn nếu điều đó thực sự có thể giúp bạn nhưng đó là cách bộ nhớ đệm nên hoạt động trên bất kỳ trình duyệt nào. Khi trình duyệt yêu cầu một tệp, nó sẽ luôn gửi yêu cầu đến máy chủ trừ khi có chế độ "ngoại tuyến". Máy chủ sẽ đọc một số tham số như ngày sửa đổi hoặc etags.
Máy chủ sẽ trả về phản hồi lỗi 304 cho KHÔNG ĐƯỢC SỬA ĐỔI và trình duyệt sẽ phải sử dụng bộ đệm của nó. Nếu etag không xác thực ở phía máy chủ hoặc ngày sửa đổi thấp hơn ngày sửa đổi hiện tại, máy chủ sẽ trả về nội dung mới với ngày sửa đổi mới hoặc etags hoặc cả hai.
Nếu không có dữ liệu bộ nhớ đệm được gửi đến trình duyệt, tôi đoán hành vi này không được xác định, trình duyệt có thể hoặc không thể lưu tệp bộ nhớ cache không cho biết cách chúng được lưu trong bộ nhớ cache. Nếu bạn đặt tham số bộ đệm trong phản hồi, nó sẽ lưu các tệp của bạn một cách chính xác và sau đó máy chủ có thể chọn trả về lỗi 304 hoặc nội dung mới.
Đây là cách nó nên được thực hiện. Sử dụng thông số ngẫu nhiên hoặc số phiên bản trong url giống như một bản hack hơn bất cứ thứ gì.
http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs- hết hạn-tiêu đề-vs-etag /
Sau khi đọc tôi thấy rằng cũng có một ngày hết hạn. Nếu bạn gặp vấn đề, có thể bạn đã hết hạn sử dụng. Nói cách khác, khi trình duyệt sẽ lưu trữ tệp của bạn, vì nó đã hết hạn sử dụng, nên không cần phải yêu cầu lại trước ngày đó. Nói cách khác, nó sẽ không bao giờ yêu cầu tệp đến máy chủ và sẽ không bao giờ nhận được 304 không được sửa đổi. Nó chỉ đơn giản là sử dụng bộ đệm cho đến khi hết hạn sử dụng hoặc xóa bộ đệm.
Vì vậy, đó là dự đoán của tôi, bạn có một số ngày hết hạn và bạn nên sử dụng etags sửa đổi lần cuối hoặc kết hợp tất cả và đảm bảo rằng không có ngày hết hạn.
Nếu mọi người có xu hướng làm mới rất nhiều và tập tin không bị thay đổi nhiều, thì có lẽ nên đặt ngày hết hạn lớn.
2 xu của tôi!
Tôi đã triển khai giải pháp đơn giản này phù hợp với tôi (chưa có trên môi trường sản xuất):
function verificarNovaVersio() {
var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
$.ajax({
url: "./versio.txt"
, dataType: 'text'
, cache: false
, contentType: false
, processData: false
, type: 'post'
}).done(function(sVersioFitxer) {
console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
location.reload(true);
}
});
}Tôi có một tập tin nhỏ nằm ở nơi chứa html:
"Versio.txt":
v00.5.0014Hàm này được gọi trong tất cả các trang của tôi, vì vậy khi tải nó sẽ kiểm tra xem giá trị phiên bản của localStorage có thấp hơn phiên bản hiện tại hay không
location.reload(true);... Để buộc tải lại từ máy chủ thay vì từ bộ đệm.
(rõ ràng, thay vì localStorage, bạn có thể sử dụng cookie hoặc bộ nhớ máy khách liên tục khác)
Tôi đã chọn giải pháp này vì tính đơn giản của nó, bởi vì chỉ duy trì một tệp duy nhất "Versio.txt" sẽ buộc toàn bộ trang web phải tải lại.
Phương thức queryString khó thực hiện và cũng được lưu vào bộ đệm (nếu bạn thay đổi từ v1.1 sang phiên bản trước sẽ tải từ bộ đệm, thì điều đó có nghĩa là bộ đệm không bị xóa, giữ tất cả các phiên bản trước đó trong bộ đệm).
Tôi là một người mới và tôi sẽ kiểm tra và kiểm tra chuyên môn của bạn để đảm bảo phương pháp của tôi là một phương pháp tốt.
Hy vọng nó giúp.
Ngoài việc đặt Kiểm soát bộ đệm: không có bộ đệm, bạn cũng nên đặt tiêu đề Hết hạn thành -1 nếu bạn muốn bản sao cục bộ được làm mới mỗi lần (một số phiên bản IE dường như yêu cầu điều này).
Xem HTTP Cache - kiểm tra với máy chủ, luôn gửi If-Modified-Because
Có một mẹo có thể được sử dụng. Thủ thuật là nối một tham số / chuỗi vào tên tệp trong thẻ script và thay đổi nó khi bạn thay đổi tệp.
<script src="myfile.js?version=1.0.0"></script>
Trình duyệt diễn giải toàn bộ chuỗi là đường dẫn tệp mặc dù cái gì xuất hiện sau dấu "?" là các tham số. Vì vậy, wat xảy ra bây giờ là lần tới khi bạn cập nhật tệp của mình, chỉ cần thay đổi số trong thẻ script trên trang web của bạn (Ví dụ <script src="myfile.js?version=1.0.1"></script>) và mỗi trình duyệt người dùng sẽ thấy tệp đã thay đổi và lấy một bản sao mới.
Buộc các trình duyệt xóa bộ nhớ cache hoặc tải lại dữ liệu chính xác? Tôi đã thử hầu hết các giải pháp được mô tả trong stackoverflow, một số công việc, nhưng sau một thời gian, nó sẽ lưu cache và hiển thị tập lệnh hoặc tập tin được tải trước đó. Có cách nào khác để xóa bộ nhớ cache (css, js, v.v.) và thực sự hoạt động trên tất cả các trình duyệt không?
Tôi đã tìm thấy cho đến nay các tài nguyên cụ thể có thể được tải lại riêng lẻ nếu bạn thay đổi ngày và giờ trên các tệp của mình trên máy chủ. "Xóa bộ nhớ cache" không dễ như mong muốn. Thay vì xóa bộ nhớ cache trên trình duyệt của tôi, tôi nhận ra rằng việc "chạm" vào các tệp máy chủ được lưu trong bộ nhớ cache sẽ thực sự thay đổi ngày và giờ của tệp nguồn được lưu trong máy chủ (Đã kiểm tra trên Edge, Chrome và Firefox) và hầu hết các trình duyệt sẽ tự động tải xuống nhiều nhất bản sao mới hiện tại của whats trên máy chủ của bạn (mã, đồ họa cũng đa phương tiện). Tôi khuyên bạn chỉ nên sao chép các tập lệnh mới nhất trên máy chủ và giải pháp "thực hiện cảm ứng" trước khi chương trình của bạn chạy, vì vậy nó sẽ thay đổi ngày của tất cả các tệp vấn đề của bạn thành ngày và giờ mới nhất, sau đó nó tải xuống một bản sao mới vào trình duyệt của bạn:
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>sau đó ... phần còn lại của chương trình của bạn ...
Tôi phải mất một thời gian để giải quyết vấn đề này (vì nhiều trình duyệt hoạt động khác nhau với các lệnh khác nhau, nhưng tất cả đều kiểm tra thời gian của tệp và so sánh với bản sao đã tải xuống trong trình duyệt của bạn, nếu ngày và giờ khác, sẽ thực hiện làm mới), Nếu bạn Không thể đi đúng hướng, luôn có một giải pháp hữu ích và tốt hơn cho nó. Trân trọng và cắm trại vui vẻ. Bằng cách chạm (); hoặc các lựa chọn thay thế hoạt động trong nhiều ngôn ngữ lập trình được bao gồm trong javascript bash sh php và bạn có thể bao gồm hoặc gọi chúng trong html.
Bạn có muốn xóa bộ nhớ cache hoặc chỉ đảm bảo trang hiện tại (đã thay đổi?) Không được lưu trong bộ nhớ cache?
Nếu sau này, nó sẽ đơn giản như
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">