html5 manifest缓存

来源：互联网发布：mplayer 1.3 windows 编辑：程序博客网时间：2024/05/16 04:50

html5 manifest缓存

html5给予了一个很好的webapp开发环境，有些时候我们会希望我们的应用像原生应用一般能被完全离线访问，而不同于我们所说的缓存优化，那我们就需要使用到html5 提供的mainfest标签，具体用法如下

index.html

<!DOCTYPE html><html lang="en" manifest="manifest.appcache">    <head>        <meta charset="UTF-8">        <title>APP CACHE</title>        <link rel="stylesheet" href="needCache.css">        <link rel="stylesheet" href="noCache.css">    </head>    <body>        <div class="box"></div>    <script type="text/javascript">        window.applicationCache.addEventListener('updateready', function(){                    console.log('updateready!');                    window.applicationCache.swapCache();                });    </script></html>

/manifest.appcache

CACHE MANIFEST#version 1.0CACHE:    needCache.cssNETWORK:    *

像上面这样在html标签中添加manifest属性指向离线配置文件即可，其中的配置项的意思如下：
关于index.manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项，而第一行CACHE MANIFEST为固定格式，必须写在前面。

CACHE:（必须）

标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。例如：aa.css，http://www.baidu.com/aa.js.

NETWORK:（可选）

这一部分是要绕过缓存直接读取的文件，可以使用通配符＊，,也就是说除了上面的cache文件，剩下的文件每次都要重新拉取。例如＊，login.php。

FALLBACK:（可选）

指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。例如*.html /404.html（所有html页面都替换为404页面）。

在此需要注意的：

浏览器限制了每个站点的缓存大小，通常为5MB
修改被缓存的文件后，需要同时修改manifest文件才能使缓存起作用
想要整个应用都能离线访问一定要把NETWORK的选项置空，但并不一定要把所有资源都放在CACHE上（经过简单的chrome offline测试过，如有不同的现象望提出）
测试离线缓存需要使用服务器端访问，如果使用webstorm等直接访问，并不能真正测试manifest
建议使用FALLBACK，可以增加用户体验
在不使用上面的js代码的时候，需要刷新两次才能看到改变的效果，这个也会妨碍到缓存的更新，建议- 配合上面的代码一同使用
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存

参考资料
HTML5 离线缓存-manifest简介

0 0