HTML5离线缓存
参考文档: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离线缓存的更多相关文章
- HTML5离线缓存(Application Cache)
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- HTML5 离线缓存Appcache
创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...
- html5离线缓存使用
html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...
- node.js与HTML5离线缓存
最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...
- HTML5离线缓存攻击测试
本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...
- Html5离线缓存详细讲解
离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存
本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...
随机推荐
- PhpStorm创建Drupal模块项目开发教程(2)
通常支持Drupal HOOK的文件为.module.首先我们需要在这里对它进行声明,以便索引,并且在代码完成中使用Ctrl+Space(空格)完成HOOK实现. Drupal HOOK调用,通常情况 ...
- openWrt 安装与实践
1. 先装一个编译用的环境, ubuntu 14 2. 在ubuntu里面安装svn, g++, libncurses5-dev git libssl-dev gawk, svn因为openwrt社区 ...
- HTML空格标签
双学位论文+本学位开题报告+实训项目+实训考试+学员考试,真是脑子都要爆炸... 话不多说,留个小知识点,HTML的空格替代符号表示法: 1. 半个空白,1个字符宽度: 或者 2.1个空白,2个 ...
- Python写一个Windows下的android设备截图工具
界面版 利用python的wx库写个ui界面,用来把android设备的截图输出到电脑屏幕,前提需要安装adb,涉及到的python库也要安装.代码如下: import wx,subprocess,o ...
- python中的generator(coroutine)浅析和应用
背景知识: 在Python中一个function要运行起来,它在python VM中需要三个东西. PyCodeObject,这个保存了函数的代码 PyFunctionObject,这个代表一个虚拟机 ...
- 复旦大学2015--2016学年第二学期(15级)高等代数II期末考试第六大题解答
六.(本题10分) 设 $n$ 阶复方阵 $A$ 的特征多项式为 $f(\lambda)$, 复系数多项式 $g(\lambda)$ 满足 $(f(g(\lambda)),g'(\lambda))= ...
- shell 从1加到100
- 学习视频更新管理,对于前面数据库视频资料,以及.net资料失效感到抱歉
首先,对不起,各位网友,我知道也都是好学的的人才会来查找视频,抱歉视频失效了.以后有需要的可以常联系我,有错误定当及时改正.如有延误多多包含. 上一次发的.net学习视频失效了,我决定帮大家多找一些学 ...
- C#委托,事件理解入门 (译稿)
原文地址:http://www.codeproject.com/Articles/4773/Events-and-Delegates-Simplified 引用翻译地址:http://www.cnbl ...
- 关于String str =new String("abc")和 String str = "abc"的比较
String是一个非常常用的类,应该深入的去了解String 如: String str =new String("abc") String str1 = "abc&qu ...