모든 응용 프로그램 캐시 리소스를 다운로드하는 방법은 무엇입니까?

Question

처음에는 응용 프로그램이 오프라인으로 작동하지 않는 간헐적 인 문제가 발생한 것으로 나타났습니다. 내 응용 프로그램에 대한 진입 점은 로그인 페이지

내 응용 프로그램의 모든 페이지, 로그인 페이지 제외/동적 데이터를 표시 승이다

• : 내 응용 프로그램에 대한

  몇 가지 세부 사항

  . 동적 데이터를 표시하는 페이지가 캐시되지 않도록하기 위해 로그인 페이지에 manifest 속성을 html 요소 만 포함 시키도록했습니다.
• 내 매니페스트 파일에 나열된 자산의 총 크기는 대략 1MB입니다. (applicationCache 자원 다운로드가 시작됩니다)
를 로그인 페이지로
• 이동 :

단계는 내가 문제를 재현하기 위해 수행 (내 브라우저/장치에 캐시 된 applicationCache 자원이없는 가정)

• 즉시 응용 프로그램에
• 이동 오프라인으로 로그인 한 브라우저가 applicationCache
에서 자원 봉사하는 데 실패 오프라인 자원을
• 공지 사항을 요청

구체적인 증거는 없지만 브라우저가 applicationCache 자산을 검색하는 과정에서 Login 페이지를 탐색하고 appCache 자산 다운로드를 중단하고 오프라인 리소스로 연결되는 것을 발견했습니다. 오프라인 일 때 제공됩니다. 예상되는 브라우저 동작입니까? 충분한 시간을 기다려 브라우저에 애셋을 다운로드 할 수있는 기회가 주어지면 오프라인 기능이 작동합니다.

오프라인 기능을 보장하려면 사용자가 applicationCache 캐시 이벤트가 시작될 때까지 로그인 페이지에서 벗어나지 못하도록해야합니까?

Answer 1

이 브라우저는 예상되는 동작입니까?

실제로 의도 된 동작입니다. 내가 생각할 수 http://diveintohtml5.info/offline.html#debugging

if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was.

하나 개의 솔루션이 (가) window.applicationCache.status는 checking 또는 downloading 중 하나 인 경우 beforeunload 확인하는 것입니다 참조하십시오.

error 이벤트 (아래 참조)를 사용하여 마지막 시도가 성공하지 못했음을 나타내는 플래그를 사용자 localStorage에 설정하고 모든 것이 성공적으로로드 될 때까지 파일을 다시 페치 할 수 있습니다.

캐시 할 항목이 많은 경우 진행률 표시 줄과 페이지로드 중 사용자에게 인내심을 요구하는 텍스트를 표시 할 수 있습니다. 진행률 표시 줄의 경우 캐시 처리 기능의 progress 이벤트에 event.loaded 및 event.total을 사용할 수 있습니다.

var appCache = window.applicationCache; 

// Fired after the first cache of the manifest. 
appCache.addEventListener('cached', handleCacheEvent, false); 

// Checking for an update. Always the first event fired in the sequence. 
appCache.addEventListener('checking', handleCacheEvent, false); 

// An update was found. The browser is fetching resources. 
appCache.addEventListener('downloading', handleCacheEvent, false); 

// The manifest returns 404 or 410, the download failed, 
// or the manifest changed while the download was in progress. 
appCache.addEventListener('error', handleCacheError, false); 

// Fired after the first download of the manifest. 
appCache.addEventListener('noupdate', handleCacheEvent, false); 

// Fired if the manifest file returns a 404 or 410. 
// This results in the application cache being deleted. 
appCache.addEventListener('obsolete', handleCacheEvent, false); 

// Fired for each resource listed in the manifest as it is being fetched. 
appCache.addEventListener('progress', handleCacheEvent, false); 

// Fired when the manifest resources have been newly redownloaded. 
appCache.addEventListener('updateready', handleCacheEvent, false); 

function handleCacheEvent(e){ 
    if(e.type && (e.type=='progress' || e.type=='ProgressEvent')){ 
     console.log('percent:', Math.round(e.loaded/e.total*100)+'%', 'total:', e.total, 'loaded:',e.loaded); 
    } 
}