manifest details and specifications

Sorry, this article is not written in English and has not been translated into English yet .You can view this article in English with Google Translate, or please come back later.

#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动态输出文件禁止缓存
102710
  • logo
    • HI, THERE!I AM MOFEI

      (C) 2010-2024 Code & Design by Mofei

      Powered by Dufing (2010-2020) & Express

      IPC证:沪ICP备2022019571号-1