H5 오프라인 캐시 문제

최근에 오프라인 캐시를 할 줄 아느냐는 질문에 안개가 끼어서 데모를 써서 검증하기로 했는데,
준비 작업:demo를nginx 서버에 넣고 뛰기 시작하기 (startnginx)
manifest 파일을 html 탭에 manifest 속성 프로젝트 루트 디렉터리에 설정합니다./index.manifest 파일의 내용은 다음과 같습니다

CACHE MANIFEST 

#version 1 

#CACHE:  

CACHE:
 index.html
 img/u-img.jpg

#NETWORK: ，  

NETWORK: 
 

FALLBACK: 404.html

 // manifest 
 window.applicationCache.update();
 

크롬 콘솔의 오류는 다음과 같습니다. Uncaught DOMException: failed to execute'update'on'응용 프로그램 캐시': there is no application cache to update.문제는 manifest에서 그림의 경로를 잘못 썼기 때문이다.img/u-img.png는img/u-img로 썼습니다.jpg 때문에 오프라인 캐시가 불가능합니다. manifest에 설정된 파일이 정확할 때 you able to see some files in Chrome's web dev tools under Resource->Application Cache.(nginx.exe-sstop 또는nginx.exe-squit) 서버를 멈추면 캐시된 파일img/u-img입니다.다른 그림은 정확하게 불러올 수 없습니다.
=========================================== 오프라인 캐시 설명 1. 캐시 상태: 윈도우.applicationCache 대상은 브라우저의 응용 캐시에 대한 프로그래밍 접근 방식입니다.이status 속성은 캐시의 현재 상태를 볼 수 있습니다.applicationCache.status의 값은 다음과 같습니다. 0 === 캐시되지 않음 1 == 유휴 (캐시가 최신 상태) 2 == 검사 중 3 == 다운로드 중 4 == 업데이트 준비 5 == 캐시 만료 시 캐시 사전 업데이트: applicationCache.update()

 <br> // <br> setInterval(function(){ applicationCache.update(); },50000);<br> 
 

2. 캐시와 관련된 사건을 소개합니다.1,updateready 이벤트: 새로운 캐시가 있고 업데이트가 끝난 후에 이 이벤트를 촉발합니다.예를 들어 코드:

 applicationCache.addEventListener("updateready",function(){ alert(" ");},false);
 

2,progress 이벤트: 새로운 캐시가 있고 다운로드 중일 때 이 이벤트를 계속 터치합니다.progress의 이벤트 대상은 다음과 같습니다:loaded와 total.loaded는 현재 불러온 파일을 대표합니다. 총 업데이트가 필요한 파일 수입니다

 applicationCache.addEventListener("progress",function(){
 alert(applicationCache.status); // 3 
 },false);
 

3, 기타 이벤트: checking 이벤트: downloading 이벤트 검사 중: updatereadey 이벤트 다운로드 중: 업데이트 완료obsolete 이벤트: 캐시가 만료된cached 이벤트: 비어 있습니다. 캐시가 최신 상태인 error 이벤트: 오류 보고: 업데이트 완료, 업데이트가 필요하지 않습니다.