参考文档：http://www.w3cschool.cc/html/html5-app-cache.html

HTML5 应用程序缓存 又称离线缓存 ，即使断线了，刷新后也还是缓存了原来的页面，不会404了

首先，请在文档的<html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>

<html manifest="page.appcache"> <!--这里的page.appcache是一个文件，自己手动生成-->

...

</html>

在Apache，或者在.htaccess文件上加上

<IfModule mod_rewrite.c>

    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond $1 !^(index\.php|robots\.txt|views|plugins|backup|upload|image|runtime|install)

    RewriteRule ^(.*)$ index.php/$1 [L]

#加上这一句

AddType text/cache-manifest manifest

 </IfModule>

下面就是生成.appcache文件了。格式是

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.php

FALLBACK:

/html/ /offline.html

但是一个项目中不会只有这么点文件，要把更多的资源文件。css.js.img等加载进来，所以还需要一个遍历目录的方法。以下是我自己改写的一个方法。

<?php

/**

 * 获取路径下所有文件

 * @param string $folder 路径

 * @param int $levels   处理路径层级

 * @return array

 * @author lixianghui

 */

function list_files($folder = '', $levels = 100) {

    if (empty($folder) || !$levels) {

        return false;

    }

    $files = array();

    //打开目录

    if ($dir = @opendir($folder)) {

        //读取目录句柄

        while (($file = readdir($dir) ) !== false) {

            //过滤非法字符

            if (in_array($file, array('.', '..')))

                continue;

            //过滤中文

            if (preg_match("/[\x7f-\xff]/", $file))

                continue;

            //判断是否目录

            if (is_dir($folder . '/' . $file)) {

                //递归上一层级

                $files2 = list_files($folder . '/' . $file, $levels - 1);

                //生成目录或合并结果集

                if ($files2)

                    $files = array_merge($files, $files2);

                else

                    $files[] = $folder . '/' . $file . '/';

            } else {

                //文件

                //过滤非资源文件

                if (in_array(pathinfo($file)['extension'], array('css', 'js', 'png', 'jpg', 'gif'))) {

                    $files[] = $folder . '/' . $file;

                }

            }

        }

    }

    @closedir($dir);

    return $files;

}

/**

 * 离线缓存

 * @return void

 * @author lixianghui

 */

function offline_cache(){

    $list = array();

    $file_str = "";
　　 //获取目录下的资源文件

    $dir_upload = list_files('upload');

    $dir_default = list_files('views/default');

    $file_array=array_merge($dir_upload,$dir_default);

    foreach ($file_array as $val) {

        $file_str.=$val . "\n";

    }

　　//生成appcache文件

    $cache_str = "CACHE MANIFEST\n";

    $cache_str.="#" . date("Y-m-d H:i:s") . "\n";

    $cache_str.=$file_str;

    $cache_str.="NETWORK:\n\n\n";

    $cache_str.="FALLBACK:\nnomore.html";

    file_put_contents("page.appcache", $cache_str);

}

好了，接下来打开console测试，访问页面会看到缓存的资源都加载成功。如果出现保存请检查资源是否保存，或者是否存在

HTML5离线缓存的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  4. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  5. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  6. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  7. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  8. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  9. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

随机推荐

  1. easyUI+springMVC的DataGrid-demo

    DataGrid (一).搭建springMVC: 错误:无法访问HTML页面,HTTP Status 404- 原因:springMVC拦截了静态资源的访问 解决方案:方案①:(web.xml下)& ...

  2. 二十四、JDK1.5新特性---泛型

    由于本人认知有限,泛型在使用上没有太大压力,但是尚未具备详细介绍泛型的能力,因此本文只是粗略的描述泛型的相关知识,在以后的学习过程中会对这篇文章进行修改,希望这篇文章不会给读者带来迷惑,特此声明 什么 ...

  3. timus 1180. Stone Game 解题报告

    1.题目: 1180. Stone Game Time limit: 1.0 secondMemory limit: 64 MB Two Nikifors play a funny game. The ...

  4. windows2008 c盘清理

    可以删除 C:\inetpub\logs\LogFiles 里面的日志文件

  5. Contains Duplicate III 下标范围<=k 值范围<=t

    set妙用 1.维护一个大小最大位k的set set中数据是有顺序的 2.每次新加一个数据,只需要比较该数据加入 有没有带来变化 3.找到 >= 新数据-t的数据对应的迭代器 pos 4.如果找 ...

  6. 【iPhone手机老提示升级怎么办】

    首先复制链接 https://oldcat.me/web/NOOTA9.mobileconfig  然后到自带浏览器(Safari)打开,点击GO,后会弹出安装,安装即可,如果出现密码的,这个密码是你 ...

  7. [已解决] java 增加 ALPN支持

    添加javaVM参数: -Xbootclasspath/p:lib/alpn-boot-8.1.10.v20161026.jar 文章来源:http://www.cnblogs.com/gifisan ...

  8. PostgreSQL的OGG -- bucardo

    bucardo是PostgreSQL数据库中实现双向同步的软件,可以实现PostgreSQL数据库的双master的方案,不过bucardo中的同步都是异步的,它是通过触发器记录变化,程序是perl写 ...

  9. Foundation框架-NSString和NSMutableString

    可变与不可变的字符串 --1-- Foundation框架介绍 1.1 框架介绍 --2-- NSString 2.1 NSString介绍及使用 2.2 NSString创建方式  2.3 从文件中 ...

  10. checkbox的readonly效果

    用disabled会使控件整个灰掉,checkbox没有readonly属性,可以用下面的写法: <input id="check1" type="checkbox ...