답변:
이와 관련 .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.이 링크 를 확인하여 어떻게 작동하는지 확인할 수 있습니다.
script.js?v=1.2입니다. (또는 버전을 추적하지 않는 경우 파일을 마지막으로 수정 한 시간 만 사용하면 훨씬 쉽습니다.) 그것이 이전 주석가의 의미인지 확실하지 않습니다!
<link />태그를 동적으로 렌더링 하고 애플리케이션 버전을 쿼리 문자열 매개 변수로 삽입 할 수 있습니다. 또는 일부 CMS에는 추가 된 CMS 전체 설정으로 "클라이언트 리소스 버전"이 있습니다. 사이트 관리자는 해당 버전 nr을 수동으로 늘릴 수 있으며 CMS 업데이트도 자동으로 업데이트 할 수 있습니다. 결론 : 파일 URL을 동적으로 렌더링해야합니다.
<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>
이것은 오래된 질문이지만 웹 사이트 캐싱을보다 잘 제어 할 수있는 방법이 있기 때문에 최신 답변이 필요하다고 생각합니다.
에서 오프라인 웹 응용 프로그램 (정말 어떤 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 .
웹에서 상황이 빠르게 바뀝니다. 이 질문은 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" />어셈블리 버전을 업데이트하는 것을 잊지 마십시오.
?version=@ViewContext.Controller.GetType().Assembly.GetName().Version
나는 비슷한 문제가 있었고 이것이 내가 해결 한 방법이다.
에서 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" />또한 참조 /programming/126772/how-to-force-a-web-browser-not-to-cache-images
다음 은 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이것이 실제로 도움이 될지 확실하지 않지만 모든 브라우저에서 캐싱이 작동하는 방식입니다. 브라우저가 파일을 요청할 때 "오프라인"모드가 없으면 항상 서버로 요청을 보내야합니다. 서버는 수정 된 날짜 또는 태그와 같은 일부 매개 변수를 읽습니다.
서버는 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 센트!
나는 아직 프로덕션 환경에서는 작동하지 않는이 간단한 솔루션을 구현했습니다.
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 버전에서는이를 필요로 함).
사용할 수있는 트릭이 하나 있습니다. 트릭은 스크립트 태그의 파일 이름에 매개 변수 / 문자열을 추가하고 파일 변경시이를 변경하는 것입니다.
<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로 포함하거나 호출 할 수 있습니다.