브라우저가 캐시를 지우도록 강제
누군가가 사이트를 방문 할 때 브라우저 캐시를 지우고 변경 사항을 볼 수 있도록 내 페이지에 코드를 넣을 수있는 방법이 있습니까?
사용되는 언어 : ASP.NET, VB.NET, 물론 HTML, CSS 및 jQuery
이와 관련 .css하여 .js변경되는 경우 "캐시 버스 팅"방법은 _versionNo각 릴리스의 파일 이름에 " " 와 같은 것을 추가하는 것 입니다. 예를 들면 다음과 같습니다.
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.
또는 파일 이름 다음에 수행하십시오.
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.
이 링크 를 확인하여 어떻게 작동하는지 확인할 수 있습니다.
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
또 다른 일반적인 관행은 지속적으로 변경되는 문자열을 요청 된 파일의 끝에 추가하는 것입니다. 예를 들어 :
<script type="text/javascript" src="main.js?v=12392823"></script>
2012 업데이트
이것은 오래된 질문이지만 웹 사이트 캐싱을보다 잘 제어 할 수있는 방법이 있기 때문에 최신 답변이 필요하다고 생각합니다.
에서 오프라인 웹 응용 프로그램 (모든 HTML5 웹 사이트가 정말 인) applicationCache.swapCache()수동으로 페이지를 다시로드 할 필요없이 웹 사이트의 캐시 된 버전을 업데이트하는 데 사용할 수 있습니다.
다음은 HTML5 Rocks 에서 초보자를위한 응용 프로그램 캐시 사용에 대한 코드 예제로, 사용자를 최신 버전의 사이트로 업데이트하는 방법을 설명합니다.
// 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);
자세한 정보는 Mozilla Developer Network 에서 애플리케이션 캐시 사용을 참조하십시오 .
2016 업데이트
웹에서 상황이 빠르게 바뀝니다. 이 질문은 2009 년에 요청되었으며 2012 년에 질문에 설명 된 문제를 처리하는 새로운 방법에 대한 업데이트를 게시했습니다. 또 다른 4 년이 지났는데 이제는 더 이상 사용되지 않는 것 같습니다. 의견에서 지적 해 주신 cgaldiolo 에게 감사드립니다 .
현재 2016 년 7 월 기준 HTML 표준 7.9 절 오프라인 웹 응용 프로그램 에는 사용 중단 경고가 포함되어 있습니다.
이 기능은 웹 플랫폼에서 제거되고 있습니다. (이 과정은 오랜 시간이 걸립니다.) 현재 오프라인 웹 응용 프로그램 기능을 사용하지 않는 것이 좋습니다. 대신 서비스 직원을 사용하십시오.
2012 년에 언급 한 Mozilla 개발자 네트워크 에서 응용 프로그램 캐시 사용도 마찬가지입니다 .
더 이상 사용되지 않음
이 기능은 웹 표준에서 제거되었습니다. 일부 브라우저는 여전히이를 지원할 수 있지만 삭제되는 중입니다. 오래된 프로젝트 나 새로운 프로젝트에서는 사용하지 마십시오. 이를 사용하는 페이지 또는 웹 앱은 언제든지 중단 될 수 있습니다.
서비스 워커 페치 차단이 활성화 된 경우 버그 1204581-AppCache에 대한 지원 중단 알림 추가를 참조하십시오 .
그렇지 않습니다. 한 가지 방법은 컨텐츠를 제공 할 때 적절한 헤더를 전송하여 브라우저를 강제로 다시로드하는 것입니다.
모든 브라우저에서 웹 페이지가 캐시되지 않도록하십시오.
"cache header"SO에서 검색 하거나 이와 비슷한 것을 찾으면 ASP.NET 관련 예제를 찾을 수 있습니다.
덜 깨끗하지만 때로는 서버 측에서 헤더를 제어 할 수없는 경우에만 유일한 방법은 호출되는 리소스에 임의의 GET 매개 변수를 추가하는 것입니다.
myimage.gif?random=1923849839
들어 정적 리소스 바로 캐싱하는 것입니다 쿼리 매개 변수를 사용하여 각 배포 또는 파일 버전의 값. 이는 각 배포 후 캐시를 지우는 효과가 있습니다.
/Content/css/Site.css?version={FileVersionNumber}
다음은 ASP.NET MVC 예입니다.
<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />
어셈블리 버전을 업데이트하는 것을 잊지 마십시오.
나는 비슷한 문제가 있었고 이것이 내가 해결 한 방법이다.
에서
index.html파일 I 매니페스트 추가했습니다 :<html manifest="cache.manifest">에서
<head>섹션 스크립트 캐시를 업데이트를 포함 :<script type="text/javascript" src="update_cache.js"></script>에서
<body>섹션 I 기능 온로드 삽입 한 :<body onload="checkForUpdate()">에서
cache.manifest나는 모든 파일을 넣어 한 내가 캐시합니다. 이제는 "버전"주석을 업데이트 할 때마다 제 경우 (아파치)에서 작동하는 것이 중요합니다. "? ver = 001"또는 이름 끝에 무언가를 사용하여 파일 이름을 지정할 수도 있지만 필요하지는 않습니다 . 변경하면# version 1.01캐시 업데이트 이벤트가 트리거됩니다.CACHE MANIFEST # version 1.01 style.css imgs/logo.png #all other filesindex.html 에만 1, 2 및 3. 포인트를 포함시키는 것이 중요합니다 . 그렇지 않으면
GET http://foo.bar/resource.ext net::ERR_FAILED페이지가 이미 캐시되어있는 동안 모든 "하위"파일이 페이지를 캐시하려고 시도하기 때문에 발생합니다.
에서
update_cache.js파일이 코드를 넣어했습니다 :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(); }
이제 파일 만 변경하면 매니페스트에서 버전 주석을 업데이트해야합니다. 이제 index.html 페이지를 방문하면 캐시가 업데이트됩니다.
솔루션의 일부는 내 것이 아니지만 인터넷을 통해 찾은 다음 작동하도록 구성했습니다.
나는 고객의 온라인 사진을 찍을 사진이 있고 사진이 변경되면 div를 업데이트 해야하는 경우가있었습니다. 브라우저에 여전히 오래된 사진이 표시되었습니다. 그래서 나는 매번 고유 할 임의의 GET 변수를 호출하는 해킹을 사용했습니다. 여기 누군가를 도울 수 있다면
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...
편집 다른 사람들이 지적했듯이 다음은 이미지가 변경 될 때만 이미지를 다시로드하여 파일 크기 로이 변경 사항을 식별하기 때문에 훨씬 효율적인 솔루션입니다.
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"
대부분의 개발자들은 캐시를 끄는 것이 비효율적이라는 것을 잘 알고 있습니다. 그러나 효율성이 중요하지 않고 기본 캐시 동작이 심각하게 손상되는 일반적인 상황이 많이 있습니다.
여기에는 중첩 된 반복 스크립트 테스트 (대규모!) 및 손상된 타사 소프트웨어 해결 방법이 포함됩니다. 여기에 제공된 솔루션 중 어느 것도 그러한 일반적인 시나리오를 해결하기에 적합하지 않습니다. 대부분의 웹 브라우저는 너무 공격적인 캐싱으로 이러한 문제를 피할 수있는 합리적인 수단을 제공하지 않습니다.
<meta http-equiv="pragma" content="no-cache" />
또한 참조 https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images
이것이 실제로 도움이 될지 확실하지 않지만 브라우저에서 캐싱이 작동하는 방식입니다. 브라우저가 파일을 요청할 때 "오프라인"모드가 없으면 항상 서버로 요청을 보내야합니다. 서버는 수정 한 날짜 또는 전자 태그와 같은 일부 매개 변수를 읽습니다.
서버는 NOT MODIFIED에 대해 304 오류 응답을 반환하며 브라우저는 캐시를 사용해야합니다. etag가 서버 측에서 유효하지 않거나 수정 된 날짜가 현재 수정 된 날짜보다 낮 으면, 서버는 새로운 수정 된 날짜 또는 etags 또는 둘 다로 새 컨텐츠를 리턴해야합니다.
브라우저로 전송 된 캐싱 데이터가 없으면 동작이 결정되지 않은 것 같습니다. 브라우저는 캐시 방법을 알려주지 않는 파일을 캐시하거나 캐시하지 않을 수 있습니다. 응답에 캐싱 매개 변수를 설정하면 파일을 올바르게 캐시하고 서버는 304 오류 또는 새 내용을 반환하도록 선택할 수 있습니다.
이것이 어떻게 이루어져야 하는가입니다. URL에서 임의의 매개 변수 또는 버전 번호를 사용하는 것은 무엇보다 해킹과 같습니다.
http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs- expire-header-vs-etag /
읽은 후 만료 날짜도 있음을 알았습니다. 문제가있는 경우 만료 날짜가 설정되었을 수 있습니다. 즉, 브라우저가 파일을 캐시 할 때 만료 날짜가 있으므로 해당 날짜 이전에 다시 요청하지 않아도됩니다. 즉, 파일을 서버에 요청하지 않으며 수정되지 않은 304를받지 않습니다. 만료 날짜에 도달하거나 캐시가 지워질 때까지 캐시를 사용합니다.
그래서 그것은 내 추측입니다, 당신은 어떤 종류의 만료 날짜가 있으며 당신은 마지막으로 수정 된 etags 또는 그 조합을 사용하고 만료 날짜가 없는지 확인해야합니다.
사람들이 많이 새로 고치는 경향이 있고 파일이 많이 변경되지 않으면 만료 날짜를 크게 설정하는 것이 좋습니다.
내 2 센트!
URL을 다음으로 업데이트하면 나에게 효과적입니다.
/custom.js?id=1
?id=새 번호 변경 후 고유 번호를 추가 하고 증가 시킴으로써 사용자는 CTRL + F5캐시를 새로 고치기 위해을 누를 필요가 없습니다 . 또는 현재 시간 또는 Epoch 뒤에 해시 또는 문자열 버전을 추가 할 수 있습니다.?id=
같은 것 ?id=1520606295
다음 은 ASP.NET에서 캐싱 설정에 대한 MDSN 페이지입니다.
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 If
나는 아직 프로덕션 환경에서는 작동하지 않는이 간단한 솔루션을 구현했습니다.
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);
}
});
}
html이있는 곳에 작은 파일이 있습니다.
"versio.txt":
v00.5.0014
이 함수는 모든 페이지에서 호출되므로로드 할 때 localStorage의 버전 값이 현재 버전보다 낮은 지 확인하고
location.reload(true);
... 캐시 대신 서버에서 강제로 다시로드합니다.
(분명히 localStorage 대신 쿠키 또는 다른 영구 클라이언트 저장소를 사용할 수 있습니다)
단일 파일 "versio.txt"만 있으면 전체 사이트를 강제로 다시로드하므로이 솔루션의 단순성을 선택했습니다.
queryString 메소드는 구현하기 어렵고 캐시되기도합니다 (v1.1에서 이전 버전으로 변경하면 캐시에서로드되는 경우 캐시가 플러시되지 않고 모든 이전 버전을 캐시에 유지함).
나는 약간의 초보자이며 내 방법이 좋은 접근법인지 확인하기 위해 전문적인 확인 및 검토를 감수합니다.
도움이 되길 바랍니다.
Cache-control : no-cache를 설정하는 것 외에도 매번 로컬 복사본을 새로 고치려면 Expires 헤더를 -1로 설정해야합니다 (일부 IE 버전에서는이를 필요로 함).
HTTP 캐시를 참조하십시오 -항상 If-Modified-Since를 전송하여 서버를 확인하십시오
사용할 수있는 트릭이 하나 있습니다. 트릭은 스크립트 태그의 파일 이름에 매개 변수 / 문자열을 추가하고 파일 변경시이를 변경하는 것입니다.
<script src="myfile.js?version=1.0.0"></script>
브라우저는 "?"뒤에 오는 문자열이더라도 전체 문자열을 파일 경로로 해석합니다. 매개 변수입니다. 이제 다음에 파일을 업데이트 할 때 웹 사이트의 스크립트 태그에서 숫자를 변경하면 (예 <script src="myfile.js?version=1.0.1"></script>) 각 사용자 브라우저에서 파일이 변경되었음을 확인하고 새 사본을 얻습니다.
브라우저가 캐시를 지우거나 올바른 데이터를 다시로드하도록 하시겠습니까? 나는 stackoverflow, 일부 작업에 설명 된 대부분의 솔루션을 시도했지만 잠시 후에 결국 캐시를 수행하고 이전에로드 된 스크립트 또는 파일을 표시합니다. 캐시 (css, js 등)를 지우고 실제로 모든 브라우저에서 작동하는 다른 방법이 있습니까?
서버의 파일에서 날짜와 시간을 변경하면 특정 리소스를 개별적으로 다시로드 할 수 있다는 것을 알았습니다. "캐시 지우기"는 쉽지 않습니다. 브라우저에서 캐시를 지우는 대신 캐시 된 서버 파일을 "만지면"실제로 서버에 캐시 된 소스 파일의 날짜와 시간 (Edge, Chrome 및 Firefox에서 테스트 됨)이 변경되고 대부분의 브라우저가 자동으로 가장 많이 다운로드됩니다 서버에있는 최신 내용 사본 (코드, 모든 멀티미디어 그래픽) 프로그램을 실행하기 전에 서버에서 최신 스크립트를 복사하고 "터치 작업" 솔루션 을 사용하는 것이 좋습니다 . 따라서 모든 문제 파일의 날짜를 최신 날짜 및 시간으로 변경 한 다음 새로운 사본을 다운로드합니다. 브라우저로 :
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>
그런 다음 ... 나머지 프로그램 ...
이 문제를 해결하는 데 약간의 시간이 걸렸습니다 (많은 브라우저가 다른 명령과 다르게 작동하기 때문에 파일 시간을 확인하고 브라우저에서 다운로드 한 사본과 비교합니다 (날짜와 시간이 다른 경우 새로 고침을 수행 할 경우)). 가정 된 올바른 길을 갈 수 없으며 항상 유용하고 더 나은 해결책이 있습니다. 안부와 행복한 캠핑. 그런데 touch (); 또는 대안은 javascript bash sh php에 포함 된 많은 프로그래밍 언어에서 작동하며 html로 포함하거나 호출 할 수 있습니다.
캐시를 지우시겠습니까, 아니면 현재 (변경된) 페이지가 캐시되지 않았는지 확인 하시겠습니까?
후자 인 경우 다음과 같이 단순해야합니다.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
참고 URL : https://stackoverflow.com/questions/1922910/force-browser-to-clear-cache
'Programing' 카테고리의 다른 글
| 세트를 변환하는 방법 (0) | 2020.03.29 |
|---|---|
| SELECT로 삽입 (0) | 2020.03.29 |
| Angular에서 활성 경로를 어떻게 결정합니까? (0) | 2020.03.29 |
| 문자열을 연결하는 가장 효율적인 방법은 무엇입니까? (0) | 2020.03.29 |
| javac가 "확인되지 않거나 안전하지 않은 작업 사용"경고를 발생시키는 원인 (0) | 2020.03.29 |