2011-02-25 5 views
2

오프라인 사용이 가능한 웹 응용 프로그램의 로딩 화면의 일부로 (using a cache manifest) 빌드 중이므로 사용자에게 어떤 파일이 있는지 알 수있는 정확한 진행 표시 줄을 표시하고 싶습니다. 아직까지 다운로드가 진행 중이며 아직 보류 중입니다. 다음과 같은 뭔가 :HTML 오프라인 응용 프로그램 캐시, 다운로드 한 파일 나열

Loading... 
/assets/images/logo.png: loaded 
/assets/images/splashImage.png: pending

내가 캐시 "보류"이벤트를 사용할 수 있다는 것을 알고 있지만, 이벤트 인수는 그와 관련된 모든 데이터를 가지고 내가 볼 수 없습니다.

이렇게 할 방법이 있습니까?

답변

3

각 파일이 다운로드 될 때마다 실행되는 progress 이벤트가 있지만 테스트 된 모든 브라우저 (Chrome, Safari, FF 베타)에는 파일 이름에 파일 이름이 포함되지 않습니다. Chrome은 콘솔에 파일 이름을 표시합니다 (비록 JS에 액세스 할 수 없다는 것을 알고 있지만). Safari와 FF는 그다지 멀리까지 가지 않습니다. 그리고 내가 본 것으로부터 파일은 매니페스트에 나열된 것과 동일한 순서로 다운로드되지 않으므로 순서가 지정된 목록을 생성 한 다음 한 번에 하나씩 삭제하는 방법조차 없습니다.

귀하의 질문에 대한 답변으로, 아니요, 지금 당장이 방법을 사용할 수 없습니다. 나중에 progress 이벤트에 파일 이름이 포함될 가능성이 있습니다 (적어도 일부 브라우저에서는 가능합니다). 그러나 지금은 불가능합니다.

크롬에 Safari 나 FF가 아닌 파일을 다운로드해야합니다. 적어도 다운로드 할 파일 수를 확보하면 정확한 진행률 막대를 계산할 수 있습니다.

function downloadProgress(e) { 
    totalfiles = Number(e.total); 
} 
window.applicationCache.addEventListener("progress", downloadProgress, false); 

그러나이 다른 브라우저에서 오류가 발생하지, 그래서 당신은 try/catch 또는 다른 방법 ( typeof(e.total)가) 오류를 방지하기 위해 포장 할 필요가 크롬이를 얻으려면 다음을 사용하십시오.

+0

그건 내가 읽고있는 것과 일치합니다. 나는 내 손가락을 교차 시켜서 이것이 미래의 사양으로 나아 간다. –

+0

나는 그렇게하기를 바랄 뿐이지 만, 나는 그것에 내기하지 않을 것이다. HTML5에서 내려간 경로에 대해 읽은 것부터 진행자와 파일 등을 보여주기 위해 브라우저에 남기고 싶었고 수동으로 삭제할 수있는 여러 사이트에 대한 파일 브라우저를 갖고 싶었습니다. – Myforwik

+0

나에게 Chrome은 또한 매우 편리한 'e.loaded'를 제공했다. JQuery에서'$ (appCache) .bind ("progress", function (event) {});와 같은 이벤트를 바인딩한다는 것에 주목하자. 적재 된 총계는 사라집니다. – jpprade

1

이것은 몇 년 늦었지 만, 아마도 이것을 연구하는 다른 사람에게 도움이 될 것입니다. 파일 또는 기타 항목을 나열하지 않지만로드 된 총 파일 수에 따라 정확한 (ish) 진행률 표시 줄을 보여줍니다. 아직 약간의 작업이 필요할 수도 있습니다 ... https://github.com/joelabeyta/app-cache-percent-bar

관련 문제