Drupal 7 HTML5 Application Cache

主标签

投票加载中...
标签: 
Drupal 7 HTML5 Application Cache

HTML5 Application Cache 离线缓存. 是HTML5 最常用的特性之一,

安装与配置: 

1. 此模块需要在模板中HTML标签中增加一个属性,表示离线缓存的配置可以从这个URL中去取

manifest="<?php print base_path(); ?>/appcache.manifest"

2. 配置离线缓存, 进入配置 admin/config/services/appcache

在配置页面的几个选项.

1. Cache

需要缓存的列表,一行一个. 资源文件需要单个填写. 比如:
 

http://example.com/sites/default/files/demo.jpg
http://example.com/sites/default/files/demo.mp4

如果你在上面勾选了自动缓存资源以后这里会是 "*"

提示:自动缓存资源并不会缓存图片,视频,JS 和 CSS文件. 默认只会缓存页面的DOM. 如果需要缓存以上的这些资源文件需要手动添加.
提示2: 过大的视频不适合做缓存,浏览器对缓存的大小有限制,当你的视频超过一定大的时候会缓存失败.

2. Network

在Network中的选项跟上面也是一行一个,Network的项目将会去获取最新的.

3. FALLBACK

当缓存的项不可用时,会从此选项中寻找替代. 比如:

/html5/  /404.html

 

开发资料: 

缓存何时会刷新? 

当你的minifest文件内容发生变化时,缓存会更新.包括文件中的注释

以下代码为自动检测缓存是否更新, 更新后自动刷新页面

 // Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
    window.applicationCache.addEventListener('updateready', function(e) {
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            applicationCache.swapCache();
            window.location.reload();
        }
    }, false);

    if (applicationCache.status != applicationCache.UNCACHED) {
        //  每5秒检查一下缓存是过期.
        setInterval(function() {
            applicationCache.update();
        }, 5000);
    }
}, false);

 

使用Chrome 的调试工具可以看到你的缓存是否工作

模块下载: 
文件加载中...