#manifest 详解以及规范
HTML5 提供了应用缓存功能,可以让浏览器保存上一次打开的文件,以便在没有网络的情况下进行访问。
使用应用缓存有以下的优势
离线访问:当用户离线的情况下任然可以继续访问网站
速度优势:文件从本地加载,数独优势
减少服务器压力:浏览器只下载变动的文件,多次加载同一个页面的时候不会通过服务器多次访问同一个文件
使用manifest
使用应用缓存主要是通过的manifest属性来指定缓存文件。
<html manifest="example.appcache">
...
</html>
manifest加载文件流程
当用户访问一个指定了 manifest 的网站,如果没有缓存,浏览器会加载manifest文件,然后下载所有指定的文件,建立第一个缓存版本。
当用户第二次访问的时候,浏览器会先根据 manifest 从本地加载文件,并触发 windwo.applicationCache 对象的 checking 事件
如果没有文件更新,浏览器会触发 applicationCache 对象的 noupdate 事件
如果manifest文件更新了,浏览器会重新从服务端加载更新后的文件,用户也可以通过 applicationCache.add() 事件增加缓存文件,每一个零时增加的文件会触发 applicationCache 对象的 progress 事件。如果文件出错会触发 error 事件。
当所有的文件加载完成之后,会触发 applicationCache 对象的 cached 事件。
manifset 语法
manifest 文件以 text/cache-manifest
的MIME类型保存,文件的开头是 CACHE MANIFEST
两个单词中间用空格分割。
标记
标记
说明
CACHE:
指定的缓存文件
NETWORK:
缓存文件白名单
FALLBACK:
失败处理
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
manifest 文件规范 (建议稿)
manifest文件必须使用 text/cache-manifest
的MIME类型
manifest文件内容必须以 CACHE MANIFEST
开头
manifest文件中需要加上版本号的注释,任何关于缓存文件的修改,必须要修改版本号
禁止缓存manifest文件本身,这样会导致网页无法更新。
尽可能的缓存CSS,JS,HTML文件,动态的文件如AJAX接口,PHP动态输出文件禁止缓存
📱 喜欢这篇文章? 博客文章会第一时间发布,然后按类型同步到对应公众号
关注公众号
你的留言可能会让更多人从中受益,欢迎分享你的看法!