브라우저가 CSS, 자바 스크립트 등을 새로 고침하도록 강제

XAMPP를 통해 Wordpress 소스 코드를 기반으로 웹 사이트를 개발 중입니다. 때로는 CSS 코드, 스크립 또는 다른 것을 변경하고 브라우저가 수정 사항을 적용하는 데 시간이 걸리는 것을 알았습니다. 이로 인해 여러 브라우저를 사용하여 하나를 새로 고치고 새 스타일을 적용하지 않으면 두 번째 스타일을 시도하고 항상 이것입니다.

이 문제를 피할 수있는 방법이 있습니까? 때로는 이전 수정 사항을 통보하지 않고 코드를 변경합니다.

일반 솔루션

Ctrl+ F5(또는 Ctrl+ Shift+ R)를 눌러 캐시를 강제로 다시로드합니다. 나는 Mac이 Cmd+ Shift+를 사용한다고 생각 R합니다.

PHP

PHP에서는 만료 날짜를 헤더가있는 과거 시간으로 설정하여 캐시를 비활성화 할 수 있습니다.

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

크롬

로 개발자 도구를 열고 F12오른쪽 하단의 톱니 바퀴 아이콘을 클릭 한 다음 설정 대화 상자에서 캐시 사용 안함을 선택하여 다음과 같이 Chrome 캐시를 사용 중지 할 수 있습니다 .

^{이 답변 에서 가져온 이미지 .}

Firefox

입력 about:config한 후 제목 항목을 찾을 URL 표시 줄에 network.http.use-cache. 이것을로 설정하십시오 false.

클라이언트 측에서이를 피 ?v=1.x하려면 파일 내용이 변경 될 때 css 파일 링크 와 같은 것을 추가 할 수 있습니다 . 예를 들어 <link rel="stylesheet" type="text/css" href="css-file-name.css">변경 <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">이 가능하면 캐싱을 우회합니다.

PHP를 작성할 수 있다면 다음과 같이 작성할 수 있습니다.

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

항상 새로 고침됩니다!

편집 : 물론 모든 웹 사이트에 대해 수동으로 추가하지 않기 때문에 전체 웹 사이트에 실제로 실용적이지 않습니다.

확인 : 브라우저가 내 스타일 시트의 최신 버전을 사용하도록하려면 어떻게해야합니까?

css 파일이라고 가정 foo.css하면 아래와 같이 쿼리 문자열을 추가하여 클라이언트가 최신 버전을 사용하도록 할 수 있습니다.

<link rel="stylesheet" href="foo.css?v=1.1">

개발자 관점
(원래 질문에서와 같이) 개발 모드에있는 경우 가장 좋은 방법은 HTML 메타 태그를 통해 브라우저에서 캐싱을 비활성화하는 것입니다. 이 접근 방식을 보편적으로 만들려면 아래와 같이 메타 태그를 3 개 이상 삽입해야합니다.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

이러한 방식으로 개발자는 변경 사항을 확인하기 위해 페이지를 새로 고치기 만하면됩니다. 그러나 모든 캐싱은 클라이언트에게 좋은 일이므로 프로덕션 단계에서 해당 코드를 주석 처리하는 것을 잊지 마십시오.

프로덕션 모드 프로덕션
에서는 캐싱을 허용하고 클라이언트는 전체 다시로드 또는 기타 트릭을 강제하는 방법을 알 필요가 없기 때문에 브라우저가 새 파일을로드 할 것이라고 보증해야합니다. 예,이 경우 제가 아는 가장 좋은 방법은 파일 이름을 변경하는 것입니다.

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

수정하면 새로 고침됩니다.

이것이 DNS에서 발생하지 않는지 확인하십시오. 예를 들어 Cloudflare에는 Cloudflare가 가속화 된 캐시를 제공하므로 스타일 시트와 이미지를 강제로 제거하는 개발 모드를 켤 수있는 기능이 있습니다. 이것은 그것을 비활성화하고 누군가가 귀하의 사이트를 방문 할 때마다 업데이트하도록 강제합니다.

브라우저 캐시를 지우십시오.

Firefox의 웹 개발자 도구 모음에서 캐싱을 끌 수 있습니다.

이 Firefox 확장 프로그램은 제가 작업 할 수있는 유일한 솔루션이었습니다 : https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

위의 대답은 정확합니다. 그러나 주기적으로 만 캐시를 다시로드하고 Firefox를 사용하는 경우 웹 개발자 도구 (2015 년 11 월 현재 도구 메뉴 항목 아래)에서 네트워크 옵션을 제공합니다. 여기에는 다시로드 버튼이 포함됩니다. 일회용 캐시 재설정을 위해 다시로드를 선택합니다.

이러한 파일이 모든 사용자에 대해 Chrome에서 올바르게 새로 고쳐 지도록 must-revalidate하려면 Cache-Control헤더 에 있어야 합니다 . 이렇게하면 Chrome이 파일을 다시 가져와야하는지 확인합니다.

다음 응답 헤더를 권장합니다.

Cache-Control: must-validate

이렇게하면 Chrome이 서버를 확인하고 최신 파일이 있는지 확인합니다. 최신 파일이 있으면 응답으로 수신합니다. 그렇지 않은 경우 304 응답을 수신하고 캐시의 응답이 최신 상태임을 보증합니다.

이 헤더를 설정하지 않으면 파일을 무효화하는 다른 설정이 없으면 Chrome은 서버에서 최신 버전이 있는지 확인 하지 않습니다 .

다음은 이 문제에 대해 자세히 설명 하는 블로그 게시물 입니다.

html-head의 link-tag를 외부 CSS 파일에 연결하는 대신 php-include를 사용하십시오.

<style>
<?php
include("style.css");
?>      
</style>

일종의 해킹이지만 나를 위해 작동합니다. :)

브라우저가 새 버전의 css 및 js 파일을 확인하지 않기 때문에 변경할 때마다 css 및 js 디렉토리의 이름을 변경하기로 결정했습니다. 나는 css1에서 css9까지, js1에서 js9까지 디렉토리 이름으로 사용합니다. 9가되면 다음으로 1부터 다시 시작합니다. 고통 스럽지만 매번 완벽하게 작동합니다. 사용자에게을 입력하라고 말해야한다는 것은 말도 안됩니다.

수천 명의 클라이언트에 원격으로 영향을 미치는 스타일 시트를 만들고 변경할 수 있어야하는 경우가 있지만 과도한 네트워크로드의 위험으로 인해 캐시를 끄지 않습니다.

HTML 내용을 원격으로 변경할 수 있으므로 스타일 시트의 내용과 일치하는 해시 코드로 스타일 시트를 연결합니다.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

즉, HTML 내용이 변경 될 때 노드와 속성을 신중하게 교체하기 위해 클라이언트 측 자바 스크립트 함수를 사용합니다. 즉, 스타일 시트 링크 태그는 교체되지 않고 href 속성 만 변경됩니다.

이 시나리오는 Windows의 Chrome, Firefox 및 Edge, Android의 Chrome에서도 잘 작동하지만 놀랍게도 Android의 웹 클라이언트에서는 항상 작동하지 않습니다. 그래서 저는 자바 스크립트를 사용하여 업데이트를 강제 / 트리거 할 무언가를 찾고 있습니다-페이지를 다시로드 할 필요없이 최적으로.

Firefox / Chrome 개발자 도구 모음을 사용할 수 있습니다.

1. 개발자 도구 모음 열기 Ctrl+ Shift+I
2. 네트워크 탭으로 이동
3. "캐시 비활성화"확인란을 누릅니다 (Firefox : 툴바 오른쪽 상단, 크롬 : 툴바 상단 중앙)

이 시도:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

'?'뒤에 필요한 것이 있다면 페이지에 액세스 할 때마다 다릅니다.time() 것입니다. 이것을 코드에 영구적으로 남겨 두는 것은 페이지 로딩 속도를 늦추고 아마도 필요하지 않기 때문에 실제로 좋은 생각이 아닙니다.

페이지 레이아웃을 광범위하게 변경 한 경우 스타일 시트 새로 고침을 강제하는 것이 도움이되며 새 스타일 시트에 액세스하는 것이 화면에 적절한 것을 표시하는 데 중요하다는 것을 발견했습니다.