HTML5 오프라인 캐싱
- 黄舟원래의
- 2017-02-16 14:39:351282검색
Html5에는 애플리케이션 캐싱이 도입되었습니다. 즉, 네트워크 연결이 없어도 웹 애플리케이션을 캐시하고 액세스할 수 있습니다.
1.1 캐시 매니페스트란
먼저 매니페스트는 minifest 또는 appcache라는 접미사를 붙인 파일로, 브라우저에서 캐시해야 하는 파일이 정의되어 있습니다. 매니페스트를 지원하는 경우 매니페스트 파일의 규칙에 따라 파일이 로컬에 저장되므로 네트워크 링크 없이 페이지에 액세스할 수 있습니다.
appcache를 처음으로 올바르게 구성한 후 애플리케이션에 다시 액세스하면 브라우저는 먼저 매니페스트 파일에 변경 사항이 있는지 확인합니다. 변경 사항이 있으면 해당 변경 사항이 업데이트됩니다. 동시에 브라우저에서 appcache를 변경합니다. 변경 사항이 없으면 appcache 리소스가 직접 반환됩니다.
1.2 애플리케이션 캐싱의 장점:
(1) 오프라인 탐색: 사용자가 오프라인일 때 앱을 사용할 수 있습니다.
(2) 더 빠르게: 캐시된 리소스가 더 빠르게 로드됩니다.
(3) 서버 로드 감소: 브라우저는 변경되거나 업데이트된 리소스만 서버에서 다운로드하면 됩니다.
2. 사용 방법
index.html, a.js, b.css 세 개의 파일이 있는 웹 애플리케이션이 있습니다. 이제 js 및 css 파일을 캐시해야 합니다. >
1. index.html에<html manifest="test.manifest">
매니페스트 형식은 test.manifest
CACHE MANIFEST #上面一句必须 #v1.0.0 #需要缓存的文件 CACHE: a.js b.css #不需要缓存的文件 NETWORK: * #无法访问页面 FALLBACK: 404.html와 같습니다. 3. 매니페스트 파일의 MIME 유형은 다음과 같아야 합니다.
유형 text/cache-manifest매니페스트 파일의 기본 형식은 CACHE, NETWORK 및 FALLBACK의 세 가지 섹션으로 구성되며, 이 중 NETWORK 및 FALLBACK은 선택 사항입니다.
CACHE: (필수)
캐시해야 하는 파일을 식별하며 상대 경로 또는 절대 경로일 수 있습니다.CACHE: a.css http://www.php.cn/
NETWORK: (선택)
이 부분은 캐시를 우회하여 직접 읽어들이는 파일로, 와일드카드 *를 사용할 수 있습니다. 다음 코드 "login.asp"는 캐시되지 않으며 오프라인에서 사용할 수 없습니다.NETWORK: login.asp별표는 다른 모든 리소스/파일에 인터넷 연결이 필요함을 나타내는 데 사용할 수 있습니다.
NETWORK:*
FALLBACK: (선택 사항)
은 리소스에 액세스할 수 없을 때 브라우저가 사용할 대체 페이지를 지정합니다. 이 섹션의 각 레코드에는 두 개의 URI가 나열됩니다. 첫 번째는 리소스를 나타내고 두 번째는 대체 페이지를 나타냅니다. 두 URI 모두 상대 경로를 사용해야 하며 매니페스트 파일과 동일한 출처를 가져야 합니다. 와일드카드 문자를 사용할 수 있습니다. 다음 예에서는 인터넷에 연결할 수 없는 경우 /html5/ 디렉터리의 모든 파일이 "404.html"로 대체됩니다.FALLBACK: /html5/ /404.html아래 예에서는 "404.html"을 사용하여 모든 파일을 교체합니다.
FALLBACK:*.html /404.html캐시 업데이트 방법캐시를 업데이트하는 방법에는 세 가지가 있습니다.
- 매니페스트 파일 업데이트
- 자바스크립트 작업을 통해 브라우저 캐시 지우기
window.applicationCache.update();사용자가 브라우저 캐시를 지우면(수동으로 또는 다른 도구를 사용하여) 파일이 다시 다운로드됩니다. 참고
- 브라우저마다 캐시된 데이터의 용량 제한이 다를 수 있습니다(일부 브라우저는 사이트당 5MB로 제한합니다).
- 매니페스트 파일 또는 내부에 나열된 파일 중 하나를 정상적으로 다운로드할 수 없는 경우 전체 업데이트 프로세스가 실패하고 브라우저는 이전 캐시를 계속 사용하게 됩니다.
- 매니페스트를 참조하는 html은 매니페스트 파일과 출처가 동일해야 하며 동일한 도메인에 있어야 합니다.
- FALLBACK의 리소스는 매니페스트 파일과 동일한 출처를 가져야 합니다.
- 리소스가 캐시되면 브라우저는 직접 절대 경로를 요청하고 캐시에 있는 리소스에도 액세스합니다.
- 사이트의 다른 페이지에 대해 매니페스트 속성이 설정되지 않은 경우에도 요청된 리소스가 캐시에 있으면 캐시에서 액세스됩니다.
- 매니페스트 파일이 변경되면 리소스 요청 자체도 업데이트를 트리거합니다.
- 각 index.html?id=1 또는 index.html?id=2에 대해 index.html 페이지가 별도로 캐시되며 이는 Chrome 브라우저를 통해 확인할 수 있습니다.
Resources/Application Cache - 캐시 내용을 업데이트하고 싶다면 v1.0.1 버전 변경 등 매니페스트 파일만 수정하면 됩니다
- 오프라인 저장소 리소스가 업데이트되면 다음 코드를 사용하여 모니터링할 수 있지만 첫 번째 로드는 여전히 원래 버전입니다
window.applicationCache.addEventListener('updateready',function(e){ if(window.applicationCache.status == window.applicationCache.UPDATEREADY){ window.applicationCache.swapCache(); if(confirm("loding new?")){ window.location.reload() } } },false);
Html5 引入了应用程序缓存，这意味着web应用可以进行缓存，并且可以在没有网络连接的时候进行访问。
1.1 什么是Cache Manifest
首先manifest是一个后缀名为minifest或者appcache，的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。
当我们第一次正确配置appcache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的appcache，如果没有变动，就会直接把appcache的资源返回，基本流程是这样的。
1.2 应用缓存的优势：
（1） 离线浏览：用户可以在应用离线时使用它们
（2） 速度更快：已缓存资源，加载得更快
（3） 减少服务器负载：浏览器只需从服务器删下载更改过或更新过的资源就可以了。
二、如何使用
有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来
1.在index.html里加上<html manifest="test.manifest">
2.test.manifest清单格式如下
CACHE MANIFEST #上面一句必须 #v1.0.0 #需要缓存的文件 CACHE: a.js b.css #不需要缓存的文件 NETWORK: * #无法访问页面 FALLBACK: 404.html
3.manifest文件的mime-type必须是 text/cache-manifest类型
manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。
而第一行CACHE MANIFEST为固定格式，必须写在前面。
以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。
CACHE:（必须）
标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。
CACHE: a.css http://www.php.cn/
NETWORK:（可选）
这一部分是要绕过缓存直接读取的文件，可以使用通配符＊。
下面的代码 “login.asp” 永远不会被缓存，且离线时是不可用的：
NETWORK: login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK:*
FALLBACK:（可选）
指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。
下面的例子中，如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。
FALLBACK: /html5/ /404.html
下面的例子中，则用 “404.html” 替代所有文件。
FALLBACK:*.html /404.html
如何更新缓存
如下三种方式，可以更新缓存：
更新manifest文件
通过javascript操作
清除浏览器缓存
给manifest添加或删除文件，都可更新缓存，如果我们更改了js，而没有新增或删除，前面例子中注释中的版本号，可以很好的用来更新manifest文件。
html5中引入了js操作离线缓存的方法，下面的js可以手动更新本地缓存。
window.applicationCache.update();
如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。
注意事项
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
引用manifest的html必须与manifest文件同源，在同一个域下。
FALLBACK中的资源必须和manifest文件同源。
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
当manifest文件发生改变时，资源请求本身也会触发更新。
对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器
Resources/Application Cache观察如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1
-
离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本
window.applicationCache.addEventListener('updateready',function(e){ if(window.applicationCache.status == window.applicationCache.UPDATEREADY){ window.applicationCache.swapCache(); if(confirm("loding new?")){ window.location.reload() } } },false);
以上就是html5的离线缓存的内容，更多相关内容请关注PHP中文网（www.php.cn）！