HTML5 오프라인 저장 원리

머리말:

HTML5를 사용하면 캐시 매니페스트 파일을 생성하여 웹 애플리케이션의 오프라인 버전을 쉽게 생성할 수 있습니다.

HTML5에는 애플리케이션 캐싱이 도입되었습니다. 즉, 네트워크가 없어도 웹 애플리케이션을 캐시하고 액세스할 수 있습니다.

애플리케이션 캐시는 앱에 세 가지 이점을 제공합니다.

오프라인 탐색 - 사용자가 오프라인에서 사용할 수 있습니다.

속도 - 캐시된 리소스가 더 빠르게 로드됩니다.

서버 부하 감소 - 브라우저는 서버에서 변경된 리소스만 다운로드합니다.

원칙과 환경

위에서 언급한 것처럼 HTML5의 오프라인 저장은 새로 생성된 .appcache 파일을 기반으로 하며 이 파일의 解析清单 오프라인 저장 리소스를 통해 이러한 리소스는 쿠키처럼 저장됩니다. . 나중에 네트워크가 오프라인일 때 브라우저는 오프라인에 저장된 데이터를 통해 페이지를 표시합니다.

쿠키와 마찬가지로 HTML5의 오프라인 저장에도 서버 환경이 필요합니다.
여기에 간단한 도구인 간단한 iis 서버가 있습니다. 이를 프로젝트 업데이트 디렉터리에 넣고 두 번 클릭하여 실행하여 서버 환경을 시뮬레이션합니다.
링크: http://pan.baidu.com/s/1jG86UV0 비밀번호: ja9h

파싱 목록

시작하기 전에 manifest(예: .appcache 파일)과 위의 解析清单 작성 방법을 이해해야 합니다.

매니페스트 파일은 캐시된 항목과 캐시되지 않은 항목을 브라우저에 알려주는 간단한 텍스트 파일입니다.

매니페스트 파일은 세 부분으로 나눌 수 있습니다.

• 캐시 매니페스트 - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다.
• 네트워크 - 이 제목 아래 나열된 파일은 서버 연결이 필요하며 캐시되지 않습니다.
• FALLBACK - 이 제목 아래 나열된 파일은 페이지에 액세스할 수 없을 때(예: 404 페이지) 대체 페이지를 지정합니다.

온라인일 때 사용자 에이전트는 페이지를 방문할 때마다 매니페스트를 읽습니다. 변경 사항이 발견되면 매니페스트의 모든 리소스가 다시 로드됩니다.

캐시 매니페스트

첫 번째 줄인 CACHE MANIFEST는 필수 항목입니다.

<span style="color: #008080;">1</span> CACHE MANIFEST / theme.css /logo.gif / main.js

위 매니페스트 파일에는 CSS 파일, GIF 이미지, JavaScript 파일이라는 세 가지 리소스가 나열되어 있습니다. 매니페스트 파일이 로드되면 브라우저는 웹 사이트의 루트 디렉터리에서 이 세 파일을 다운로드합니다. 그러면 사용자가 인터넷 연결을 끊을 때마다 이러한 리소스를 계속 사용할 수 있습니다.

네트워크

화이트리스트는 와일드카드 "*"를 사용합니다. 이 상태에서는 해당 캐시 영역에 나타나지 않는 모든 URL은 기본적으로 HTTP 관련 캐시 헤더 정책을 사용합니다.

다음 NETWORK 섹션에서는 "login.asp" 파일이 캐시되지 않으며 오프라인에서 사용할 수 없음을 지정합니다.

<span style="color: #008080;">1</span> NETWORK: login.asp

*는 다른 모든 리소스/파일에 인터넷 연결이 필요함을 나타내는 데 사용할 수 있습니다.

NETWORK: *

폴백

다음 FALLBACK 섹션에서는 인터넷 연결을 설정할 수 없는 경우 /html5/ 디렉토리의 모든 파일이 "offline.html"로 대체되도록 지정합니다.

ALLBACK：/html5/ /404.html

참고: 첫 번째 URI는 리소스이고 두 번째 URI는 대체입니다.

캐시 업데이트

한 번 캐시된 앱은 다음 상황이 발생할 때까지 캐시된 상태로 유지됩니다.

• 사용자가 브라우저 캐시를 지움
• 매니페스트 파일이 수정되었습니다
• 프로그램별 애플리케이션 캐시 업데이트

데모

<span style="color: #0000ff;">case</span>/ |-- index.html | |-- demo.appcache | |-- 简易IIS服务器.exe | `-- image |-- HTML5 오프라인 저장 원리 `-- HTML5 오프라인 저장 원리

index.html

 
 
 
    <meta charset="UTF-8"> 
    <title>HTML5离线存储</title>
 
 
    <img src="image/HTML5%20%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8%20%EC%A0%80%EC%9E%A5%20%EC%9B%90%EB%A6%AC" alt=""> 
    <img src="image/HTML5%20%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8%20%EC%A0%80%EC%9E%A5%20%EC%9B%90%EB%A6%AC" alt=""> 
 

demo.appcache

CACHE MANIFEST #v01 image/HTML5 오프라인 저장 원리   NETWORK:*FALLBACK: /

이미지 폴더 저장
HTML5 오프라인 저장 원리

HTML5 오프라인 저장 원리

그럼 실행해 보세요简易IIS服务器.exe 한번 시도해 보세요.
iis가 켜진 경우

iis가 꺼진 경우(꺼져 있으면 일시정지하면 아무런 효과도 볼 수 없음)

오프라인에서는 图片1가 성공적으로 표시되었으나, 图片2은 정상적으로 표시되지 않는 것을 확인할 수 있습니다.

이제 图片2과 图片1의 위치를 ​​바꾸고 싶습니다.

 
    <img src="image/HTML5%20%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8%20%EC%A0%80%EC%9E%A5%20%EC%9B%90%EB%A6%AC" alt=""> 
    <img src="image/HTML5%20%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8%20%EC%A0%80%EC%9E%A5%20%EC%9B%90%EB%A6%AC" alt=""> 

这时候发现问题来了，html明明修改了为什么图片没有置换过来呢，我不是在demo.appcache文件的NETWORK写了星号吗?除了CACHE MANIFEST文件其它都采用在线模式。查资料得知：引入manifest的页面,即使没有被列入缓存清单中，仍然会被用户代理缓存。
好吧，那我把.appcache文件更新下，于是乎把头部的版本号修改一下#v02。刷新下页面还是没反应！再刷新，有了！为什么？

　　对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新.

 

通过控制台我们能够窥探一二：

• 第一次刷新，应用程序缓存更新准备事件,
  
• 第二次刷新才会看到效果。
  

缓存立即执行

我们的产品已经更新了用户却要第二次进来才能够看到，这样用户体验也太差了吧，有什么方式能够解决呢？好在html5给javascript提供了相关的API。

API篇幅太多自行查看把，这里我晒下我测试成功的code：

<span style="color: #008080;"> 1</span> <span style="color: #008000;">/*</span><span style="color: #008000;">code1,简单粗暴的</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 2</span> applicationCache.onupdateready = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 3</span> 　　<span style="color: #000000;">applicationCache.swapCache();
</span><span style="color: #008080;"> 4</span> 　　<span style="color: #000000;">location.reload();
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">};
</span><span style="color: #008080;"> 6</span> <span style="color: #008000;">/*</span><span style="color: #008000;">code2，缓存公用方法</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 7</span> <span style="color: #008000;">//</span><span style="color: #008000;"> var EventUtil = {</span>
<span style="color: #008080;"> 8</span> <span style="color: #008000;">//</span><span style="color: #008000;"> addHandler: function(element, type, handler) {</span>
<span style="color: #008080;"> 9</span> <span style="color: #008000;">//</span><span style="color: #008000;"> if (element.addEventListener) {</span>
<span style="color: #008080;">10</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element.addEventListener(type, handler, false);</span>
<span style="color: #008080;">11</span> <span style="color: #008000;">//</span><span style="color: #008000;"> } else if (element.attachEvent) {</span>
<span style="color: #008080;">12</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element.attachEvent(“on” + type, handler);</span>
<span style="color: #008080;">13</span> <span style="color: #008000;">//</span><span style="color: #008000;"> } else {</span>
<span style="color: #008080;">14</span> <span style="color: #008000;">//</span><span style="color: #008000;"> element["on" + type] = handler;</span>
<span style="color: #008080;">15</span> <span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #008080;">16</span> <span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #008080;">17</span> <span style="color: #008000;">//</span><span style="color: #008000;"> };</span>
<span style="color: #008080;">18</span> <span style="color: #008000;">//</span><span style="color: #008000;"> EventUtil.addHandler(applicationCache, “updateready”, function() { //缓存更新并已下载，要在下次进入页面生效</span>
<span style="color: #008080;">19</span> <span style="color: #008000;">//</span><span style="color: #008000;"> applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。</span>
<span style="color: #008080;">20</span> <span style="color: #008000;">//</span><span style="color: #008000;"> applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效</span>
<span style="color: #008080;">21</span> <span style="color: #008000;">//</span><span style="color: #008000;"> location.reload(); //重新载入页面</span>
<span style="color: #008080;">22</span> <span style="color: #008000;">//</span><span style="color: #008000;"> });</span>

code1一般用在页面加载时直接触发，而code2的方式可后期检查更新。

注意事项

• 站点离线存储的容量限制是5M
• 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
• 引用manifest的html必须与manifest文件同源，在同一个域下
• 在manifest中使用的相对路径，相对参照物为manifest文件
• CACHE MANIFEST字符串应在第一行，且必不可少
• 系统会自动缓存引用清单文件的 HTML 文件
• manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
• FALLBACK中的资源必须和manifest文件同源
• 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
• 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
• 当manifest文件发生改变时，资源请求本身也会触发更新

 

文章来源：http://www.codeceo.com/article/html5-cache.html

侵权删