文章主要介绍H5离线存储Manifest的原理和使用。 文章中详细介绍了示例代码。 有需要的同事就跟着小编一起学习吧。
理解：
离线存储可以将站点的文件存储在本地html5文件，在没有网络的情况下仍然可以访问相应站点的存储页面。 此类文件可以包括html、js、css、img等文件。 但即使有网络，浏览器也会优先使用已经离线存储的文件。
哪些是清单：
Manifest是一个简单的文本文件，扩展名任意，定义了需要缓存的文件和资源。 第一次打开时，浏览器会手动缓存相应的资源。
显性特征：
清单用途：
创建一个与html同名的manifest文件，比如页面是index.html，那么就可以创建一个index.manifest文件，然后在index.html的html标签中添加以下属性：
或者
清单的引入可以是绝对路径，也可以是相对路径。 如果使用绝对路径，则清单文件必须与站点位于同一域名下。
您可以使用任何扩展名保存清单文件，但mine-type必须是text/cache-manifest。
或者
在服务器上部署时，需要在服务器上添加对应的mie-type。
清单标记应包含需要缓存资源的页面。 第一次打开页面时，浏览器会解析页面中的清单并缓存上面列出的资源。 同时，该页面也会被浏览器手动缓存，尽管该页面没有列在Manifest中。
清单文件结构：
Manifest 文件，基本格式为三部分：CACHE、NETWORK 和 FALLBACK，其中 NETWORK 和 FALLBACK 是可选的。
第一行CACHEMANIFEST是固定格式，必须写在上面。
#号开头的注释可以是版本号、时间戳等。通常这里写一个版本号，用于缓存文件更新时修改manifest的作用：浏览器已经缓存了缓存，仅此而已当清单文件发生变化时，本地缓存也会更新，即使你的代码发生了
更新html5文件，本地浏览器不知道，所以每次发布代码的时候，可以修改#旁边的信息，比如版本号或者时间，告诉浏览器相应更新本地缓存。
CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
1. 第一行是CACHEMANIFEST，这是必需的。
2. CACHE（必须）表示需要缓存哪些文件，可以是相对路径，也可以是绝对路径。 此处列出的文件将在首次加载时由浏览器本地缓存。
3.NETWORk是绕过缓存直接读取的文件，可以使用转义，大多数网站都使用*. 使用时显示除了CACHE指定的文件外，其他页面都需要通过Internet访问。
4. FALLBACK（可选） 当资源难以访问时，浏览器会使用备份资源来代替。 第二个表示后备页面。 两个 URI 必须使用相对路径并且与清单文件具有相同的来源。 可以使用转义。
在下面的示例中，如果无法建立 Internet 连接，请将 /html5/ 目录中的所有文件替换为“404.html”。
倒退：
/html5//404.html
在下面的示例中，当任何页面难以访问时，它会重定向到“404.html”页面。
倒退：
*.html/404.html
注意：1必须在第一行。 2、3、4的直接顺序是随机的，并且可以在同一个清单文件中出现多次。 多次与一次效果相同。
添加了manifest属性的页面会被浏览器手动缓存，不需要在CACHE节点中再次添加。
如何更新缓存
在清单中添加或删除文件可以更新缓存。 如果我们修改js而不进行增删改查，则可以利用上例中注释中的版本号来更新manifest文件。
HTML5引入了js操作离线缓存的方式，下面的js可以自动更新本地缓存。
window.applicationCache.update();
如果用户清除浏览器缓存（自动或使用其他工具），文件将被重新下载。
我们可以使用代码来自动更新清单缓存。 一旦webapp源代码更新，本地manifest缓存将被手动更新，以便用户仍然可以访问最新的源代码。
至此，这篇关于H5离线存储Manifest的原理和使用的文章就介绍到这里了。 更多关于H5离线存储Manifest的信息，请搜索之前的文章或者继续浏览下面的相关文章。
