manifest缓存

另外,github上面托管的页面也无法使用配置.htaccess之类的方式来优化缓存,而默认的缓存过期时间只有10分钟

以 .appache 结尾就行. 名字无所谓. 本文: jekyll.appache

如果你在服务器修改了任何缓存资源,必须修改清单文件,这样浏览器才能知道它需要重新获取资源。 如果你在服务器修改了任何缓存资源,必须修改清单文件,这样浏览器才能知道它需要重新获取资源。 如果你在服务器修改了任何缓存资源,必须修改清单文件,这样浏览器才能知道它需要重新获取资源。 如 main.css main.js .
如果这两个文件你使用了缓存. 然后 服务器上你 更新了 main.css . 如果你不更新 jekyll.appache 这个缓存文件. 本地的浏览器 是根据 jekyll.appache 这个文件内容是否有变化.来判断服务器是否更新了 main.css 等等文件. 本地浏览器就会继续使用 本地旧的 main.css 缓存. 所以你的更新 不会显示在本地浏览器中!!!!

缓存清单文件

引用一个缓存清单文件 web 应用中的 manifest 特性可以指定为缓存清单文件的相对路径或一个绝对 URL(绝对 URL 必须与应用同源)。 缓存清单文件可以使用任意扩展名,但传输它的 MIME 类型必须为 text/cache-manifest。

注意:在 Apache 服务器上,若要设置适用于清单(.appcache)文件的 MIME 类型,可以向根目录或应用的同级目录下的一个 .htaccess 文件中增加 AddType text/cache-manifest .appcache 。

缓存清单文件内容

缓存清单文件是一个纯文本文件,它列出了所有浏览器应该缓存起来的资源,以便能够离线访问。 资源使用 URI 来标识。在缓存清单文件中列出的所有记录必须拥有相同的协议、主机名与端口号。

缓存清单文件结构

缓存文件可以包含三段内容: CACHE, NETWORK, 和 FALLBACK,

  • CNAME: 缓存: 需要缓存的内容
  • NETWORK: 绝不缓存 需要网络的内容
  • FALLBACK: 有网络使用网络下载. 没网络使用本地. 相当于备份.

在上面的例子中,没有段落标题,因此所有数据行都认为是属于显式 (CACHE) 段落,这意味着浏览器应该在应用缓存中缓存所有列出的资源。资源可以使用绝对或者相对 URL 来指定(例如 index.html)。

上面例子中的注释 「v1」很有必要存在。只有当清单文件发生变化时,浏览器才会去更新应用缓存。 如果你要更改缓存资源(比如说,你使用了一张新的 header.png 图片),你必须同时修改清单文件中的内容,以便让浏览器知道它们需要更新缓存。 你可以对清单文件做任何改动,但大家都认同的最佳实践则是修正版本号。

清单文件可以分为三段:

CACHE:

这是缓存文件中记录所属的默认段落。 在 CACHE: 段落标题后(或直接跟在 CACHE MANIFEST 行后)列出的文件会在它们第一次下载完毕后缓存起来。

NETWORK:

在 NETWORK: 段落标题下列出的文件是需要与服务器连接的白名单资源。 所有类似资源的请求都会绕过缓存,即使用户处于离线状态。可以使用通配符。

FALLBACK:

FALLBACK: 段指定了一个后备页面,当资源无法访问时,浏览器会使用该页面。 该段落的每条记录都列出两个 URI—第一个表示资源,第二个表示后备页面。 两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。 CACHE, NETWORK, 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中,并且每个段落可以在同一清单文件中出现多次。

缓存清单文件示例(简单)

CACHE MANIFEST
v1 - 2011-08-13
This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah

缓存清单文件示例(复杂)

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 缓存原理

  1. 先开启 manifest缓存.
  • 无缓存(第一次访问): 浏览器从服务器加载网页所需的所有文档! 读取缓存文件中的文件列表.生成缓存.

  • 有缓存(不是第一次访问)
    1. 从本地缓存中读取缓存文件.
    2. 给服务器发送一个 checking 事件.看缓存文件是不是最新的
  • 最新的: 给服务器发送 noupdate 事件. 更新结束.
  • 非新的: 下载新的缓存文件.

一旦第一次访问 所有文件都成功获取. 就会真正的离线到缓存中. 并向服务器发送 cached事件.

开启 manifest缓存

<html manifest="jekyll.appcache"> 
  ...
</html>

浏览器不会缓存不带有manifest 特性的页面. 如果要博客内所有文章都开启缓存. 就要把 这个加到header.html 模板中..

缓存文件位置

谷歌浏览器 访问这个 可以看详细的缓存 chrome://appcache-internals/