브라우저가 캐시를 지우도록 강제합니다

https://stackoverflow.com/questions/1922910

20-09-2019
|

문제

누군가가 내 페이지에 코드를 넣을 수있는 방법이 있습니까? 누군가가 사이트를 방문 할 때 브라우저 캐시를 지우므로 변경 사항을 볼 수 있습니까?

사용 된 언어 : 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에서 사용자를 최신 사이트로 업데이트하는 방법을 설명하는 HTML5 록.

// 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 Developer Network에서 :

감가 상각 된
이 기능은 웹 표준에서 제거되었습니다. 일부 브라우저는 여전히 지원할 수 있지만 삭제되는 과정에 있습니다. 기존 프로젝트 또는 새로운 프로젝트에서 사용하지 마십시오. 이를 사용하는 페이지 또는 웹 앱은 언제든지 끊어 질 수 있습니다.

또한보십시오 버그 1204581 -Service Worker Fetch Interception이 활성화 된 경우 AppCache에 대한 감가 상각 통지 추가.

그렇지 않습니다. 한 가지 방법은 컨텐츠를 전달할 때 브라우저가 다시로드하도록 적절한 헤더를 보내는 것입니다.

모든 브라우저에서 웹 페이지가 캐시되지 않도록합니다.

검색하는 경우 "cache header" 또는 여기에 비슷한 것이 있으면 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 매니페스트를 추가 한 파일 :
```
<html manifest="cache.manifest">
```
~ 안에 <head> 섹션 포함 스크립트가 캐시 업데이트 :
```
<script type="text/javascript" src="update_cache.js"></script>
```
~ 안에 <body> onload 기능을 삽입 한 섹션 :
```
<body onload="checkForUpdate()">
```
~ 안에 cache.manifest 캐시하고 싶은 모든 파일을 넣었습니다. "버전"댓글을 할 때마다 업데이트하여 내 경우 (APACHE)에서 작동하는 것이 중요합니다. 또한 "? ver = 001"또는 이름 끝에있는 파일 이름을 지명하는 옵션이지만 필요하지 않습니다. 그냥 변경 # version 1.01 캐시 업데이트 이벤트를 트리거합니다.
```
CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other files
```
1., 2. 및 3. 포인트를 포함시키는 것이 중요합니다. 뿐 index.html에서. 그렇지 않으면
```
GET http://foo.bar/resource.ext net::ERR_FAILED
```
모든 "child"파일이 페이지를 캐시하는 동안 페이지를 캐시하려고 시도하기 때문에 발생합니다.

~ 안에 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를 업데이트해야합니다. 브라우저는 여전히 오래된 사진을 보여주고있었습니다. 그래서 나는 매번 독특 할 것입니다. 여기에 누군가를 도울 수 있다면 여기에 있습니다

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

다른 사람들이 지적한대로 편집하면 다음은 이미지가 변경 될 때만 다시로드되므로 파일 크기 로이 변경을 식별하기 때문에 훨씬 더 효율적인 솔루션입니다.

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

많은 답변이 요점을 놓치고 있습니다. 대부분의 개발자는 캐시를 끄는 것이 비효율적이라는 것을 잘 알고 있습니다. 그러나 효율성이 중요하지 않으며 기본 캐시 동작이 심하게 파손되는 많은 일반적인 상황이 있습니다.

여기에는 중첩 된 반복 스크립트 테스트 (Big One!)와 깨진 타사 소프트웨어 해결 방법이 포함됩니다. 여기에 제공된 솔루션 중 어느 것도 이러한 일반적인 시나리오를 해결하기에 적합하지 않습니다. 대부분의 웹 브라우저는 너무 공격적인 캐싱이며 이러한 문제를 피할 수있는 합리적인 수단을 제공하지 않습니다.

<meta http-equiv="pragma" content="no-cache" />

또한 참조하십시오 https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images

그것이 실제로 도움이 될 수 있는지 확실하지 않지만 그것이 캐싱이 모든 브라우저에서 작동하는 방식입니다. 브라우저가 파일을 요청하면 "오프라인"모드가없는 한 항상 서버에 요청을 보내야합니다. 서버는 날짜 수정 또는 ETAG와 같은 일부 매개 변수를 읽습니다.

서버는 수정되지 않은 경우 304 오류 응답을 반환하고 브라우저는 캐시를 사용해야합니다. ETAG가 서버 측에서 유효성을 유지하지 않거나 수정 된 날짜가 현재 수정 된 날짜 아래에있는 경우 서버는 새 수정 날짜 또는 ETAG 또는 둘 다로 새 컨텐츠를 반환해야합니다.

브라우저에 캐싱 데이터가 전송되지 않으면 동작이 결정되지 않은 것으로 보이며, 브라우저는 캐시 된 방법을 알려주는 파일을 캐시하거나 캐시 할 수 없습니다. 응답에서 캐싱 매개 변수를 설정하면 파일을 올바르게 캐시하고 서버가 304 오류 또는 새 컨텐츠를 반환하도록 선택할 수 있습니다.

이것이 어떻게 해야하는지입니다. URL에서 임의의 매개 변수 또는 버전 번호를 사용하는 것은 무엇보다 해킹과 같습니다.

http://www.checkupdown.com/status/e304.htmlhttp://en.wikipedia.org/wiki/http_etaghttp://www.xpertdeveloper.com/2011/03/last-modified-header-vs-expire-header-vs-etag/

읽은 후 나는 만료 날짜도 있음을 알았습니다. 문제가있는 경우 만료 날짜가 설정되어있을 수 있습니다. 다시 말해, 브라우저가 파일에 캐시 할 때, 만료 날짜가 있으므로 해당 날짜 전에 다시 요청할 필요가 없습니다. 다시 말해, 파일을 서버로 묻지 않으며 304를 수정하지 않아도됩니다. 만료 날짜에 도달하거나 캐시가 지워질 때까지 캐시를 사용합니다.

그래서 그것은 내 추측입니다. 당신은 일종의 만료 날짜가 있으며, 당신은 마지막으로 수정 된 ETAG 또는 혼합을 사용하고 만료 날짜가 없는지 확인해야합니다.

사람들이 많이 새로 고침되는 경향이 있고 파일이 많이 변경되지 않으면 큰 만료 날짜를 설정하는 것이 현명 할 수 있습니다.

내 2 센트!

URL을 다음에 업데이트하면 다음과 같습니다.

/custom.js?id=1

후에 고유 한 숫자를 추가함으로써 ?id= 그리고 새로운 변경을 위해이를 증가 시키면 사용자는 누를 필요가 없습니다. CTRL + F5 캐시를 새로 고치기 위해. 또는 현재 시간 또는 에포크의 해시 또는 문자열 버전을 추가 할 수 있습니다. ?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를 설정하는 것 외에도 매번 로컬 사본을 새로 고치려면 만료 헤더를 -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');
?>

그럼 ... 나머지 프로그램 ...

이 문제를 해결하는 데 시간이 걸렸습니다 (많은 브라우저가 다른 명령과 다르게 행동하지만 모두 파일의 시간을 확인하고 다른 날짜와 시간이 다르면 브라우저에서 다운로드 된 사본과 비교하여 새로 고침 할 것입니다). 올바른 방법으로 갈 수는 없으며 항상 다른 사용 가능한 솔루션이 있습니다. 안부와 행복한 캠핑. 그건 그렇고 터치 (); 또는 대안은 JavaScript Bash SH PHP를 포함한 많은 프로그래밍 언어로 작동하며 HTML에 포함 시키거나 전화 할 수 있습니다.

캐시를 지우거나 현재 (변경된?) 페이지가 캐시되지 않았는지 확인 하시겠습니까?

후자의 경우, 그것은 단순해야합니다.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow