한 페이지 자바 스크립트 앱 및 정적 리소스 캐싱

나는 this question을보고 내 현재의 문제 (들)/심문에 맞지 않는다고 말해야합니다.한 페이지 자바 스크립트 앱 및 정적 리소스 캐싱

시나리오 : 사용자가 성공적들은 기본 HTML은 CSS와 JS 파일과 함께 전송/응용 프로그램에 (document.location.href) 리디렉션 (Ajax 호출을 통해) 로그인

후.

문제 :

나는 현재이 새 버전의 예에 갱신됩니다 있는지 확인하기 위해 쿼리 문자열 버전 번호를 APPNAME-2.3.3.js처럼 내 축소 된 자바 스크립트와 CSS를 파일 이름에 버전 번호를 넣고 추가 해요 : 파일 이름과 쿼리 문자열 번호 변경, 브라우저가 마지막 버전의 캐시를 유지하는 경우에도

<script src="/js/app/appname-2.3.3-min.js?1207040740" language="javascript" type="text/javascript"></script>

나는 새 로그인 후, 새 버전을 밀어

. 사용자가 새 정적 파일을 가져 오려면 전체 페이지 새로 고침 Ctrl + F5를 수행해야합니다.

질문 :

이

가) 무엇 각각의 새로운 로그인 사용자를 보장하는 가장 좋은 방법이 될 것입니다 올바른 버전이? 내 생각 엔/app HTML 페이지가 캐시이고 로그인 후 리디렉션 할 때 쿼리 문자열 값을 입력해야 할 수도 있습니다. 하지만 그 문제는 내가 로그인 메서드를 호출하는 javascript 파일이 "올바른"버전 등이되어야한다는 것을 의미합니다.

내 컨트롤러에 HTTP 헤더를 표시하여 브라우저에 캐시하지 말아야할까요?/app 페이지? 그 페이지에서 캐싱 된 정적 파일이 없다는 의미가 있습니까?

거의 매주 새 업데이트가 있으며, 캐싱이 여전히 필요합니다.

b) 귀하의 관점에서 볼 때, 이미 로그인 한 사용자에게 새로운 버전이 업데이트되었으며 페이지를 새로 고쳐야한다는 것을 사용자에게 알리는 좋은 방법이 무엇일까? 그것은 사용자의 인식에서 "받아 들일 수있는"것입니다. 참고로

, 응용 프로그램은 3

시간 내 주셔서 감사합니다/입력

출처

2012-07-04 Dominic St-Pierre

브라우저의 개발 도구에는 각 웹 페이지에 대해 요청되는 리소스를 확인할 수있는 "넷"탭이 있습니다. 쿼리 문자열에 새 번호가 포함되어 있으면 브라우저는 캐시 된 파일 대신 새 업데이트 된 파일을 검색해야합니다. (Btw,이 기술을 사용한 스택 오버플로) –

Net 탭을 살펴볼 것입니다. 하지만 그것은 요점입니다. 비록 html 태그에 새로운 번호가 있어도 pagea.html이 브라우저 캐시 pagea.html을 사용한다고 가정합니다. 따라서 버전 번호가 변경된 새 버전을 업로드하더라도 pagea.html은 여전히 유효합니다. 이전 번호로 캐시 되었습니까? –

당신은이 작업을 수행 할 window.applicationCache을 사용할 수 있습니다에 대한 ASP.NET MVC에 내장되어 있습니다. 대부분의 사람들은 응용 프로그램 캐시를 문제의 반대쪽에서 생각합니다. 어떻게 클라이언트에 데이터를 캐시 할 수 있습니까? 그러나 캐시 매니페스트 파일이 변경되면 서버 캐싱을 완전히 무시하여 CACHE 섹션의 모든 파일을 업데이트합니다. 또한 클라이언트 측 캐싱의 이점을 얻을 수 있습니다.

이렇게하면 브라우저에서 새로 고침을 유도하기 위해 버전 번호와 쿼리 문자열이 필요하지 않습니다.

manifest="cache.manifest"부터 <html>까지를 더합니다. cache.manifest은 캐시 할 항목을 정의하는 데 사용할 파일의 이름입니다. 그것은 무엇이든 지명 될 수있다, 그러나 나는 실제로 나의 전화 cache.manifest를 부른다.그런 다음

<html lang="en" manifest="cache.manifest">

웹 서버로 설정 .manifest에 대한 MIME 유형이 있는지 확인 :

텍스트/캐시 매니페스트

그런 다음, cache.manifest라는 이름의 파일을 생성에 넣어 당신의 앱 루트. CACHE 섹션에서 캐시 할 파일 (이 경우에는 새로 고침)을 넣습니다. NETWORK 섹션에서 캐싱하지 않으려는 파일을 넣거나 "기타"로 간단하게 *을 입력하십시오.

릴리스를 누를 때마다 캐시 매니페스트의 버전 번호를으로 변경하십시오. 파일의 모든 변경 작업은 가능하지만 버전 번호는이를위한 완벽한 메커니즘입니다.

CACHE MANIFEST 
#ver 1.0.0 

CACHE: 
app.html 
app.css 
app.js 

NETWORK: 
*

onload 또는 이와 동등한 스크립트의 맨 위에 넣으십시오. 이 코드를 처음 코드에 추가 할 때 첫 번째 업데이트 (이 기능을 사용할 수 없으므로)에 새로 고침이 수행되지 않지만 초는입니다. 초기 업데이트 후에 예상대로 작동합니다.

function updateVersion(event) { 

    window.applicationCache.removeEventListener('updateready', updateVersion, false); 

    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { 
     //perhaps notify user here 
     window.applicationCache.swapCache(); 
     window.location.reload(); 
    }; 

}; 

if (window.applicationCache) { 
    window.applicationCache.addEventListener('updateready', updateVersion, false); 
};

출처

2012-07-05 09:36:36 ThinkingStiff

고마워요, 이것은 제가 찾고 있던 것입니다. 지연을 유감스럽게 생각합니다. 테스트를하기 전에 시간이 걸렸습니다. –

한 페이지 자바 스크립트 앱 및 정적 리소스 캐싱

답변

관련 문제