体验h5离线缓存
摘要
Application Cache是浏览器自己的一种机制，随着移动互联网时代的到来，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。不仅能提高用户体验，而且在有网络时，也能直接访问本地文件，减少网络请求，节省流量。
Manifest
manifest 属性规定文档的缓存 manifest 的位置。
例如：
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/test.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
应用程序缓存使得应用程序有三个优点：
- 离线浏览 - 用户可以在离线时使用应用程序
- 快速 - 缓存的资源可以更快地加载
- 减少服务器加载 - 浏览器只从服务器上下载已更新/已更改的资源
manifest 属性应该被 Web 应用程序中您想要缓存的每个页面包含。
manifest 文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。
简单语法
<html manifest="URL">
url可以是绝对路径，也可以是相对路径。
manifest文件内容，分为三部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存。
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
例如一个完整的manifest内容如下：
CACHE MANIFEST
#2018-04-16 v1.0.0 /css/main.css
/js/test.js NETWORK:
test.html FALLBACK:
404.html
注意：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个js，css文件，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
发布
发布站点，部署在iis上。
添加mini-type类型，类型必须为：text/cache-manifest
浏览，如果在谷歌浏览器中，我们可以通过访问chrome://appcache-internals/，查看缓存的本地的资源文件
此时没有缓存任何资源文件。
访问我们发布的站点。
也可以通过f12查看网络请求。
如果是，你需要修改页面的样式或者js文件，如果希望该文件重新缓存，那么你也必须修改mainifest文件，修改日期和版本号。
比如上面的css和js文件是一个空文件，那么现在我们添加一个函数，然后查看本地缓存的js文件是否改变
function getDate() {
alert("2018-04-17")
};
getDate();
通过更新manifest文件中的版本号，是比较方便的一种方式，同样也可以通过js文件来控制
window.applicationCache.update();
总结
离线应用优点：1、离线浏览 。2、快速。3、减少服务器请求。
在更新文件的时候需要注意，需要更新manifest文件版本号。
如何通过js更新本地缓存，可以参考这篇文章：
https://www.cnblogs.com/PeterSpeaking/p/5912221.html
体验h5离线缓存的更多相关文章
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- H5 离线缓存的用法
H5离线缓存基础系列 1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...
- h5 离线缓存小demo
传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...
- H5离线缓存机制-manifest
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
- H5离线缓存技术
HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...
- H5离线缓存基础系列
1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...
- H5离线缓存(基础)学习指南
离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...
- h5离线缓存
离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...
- H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
随机推荐
- 【Python】使用Python将Shellcode转换成汇编
1.介绍 需要多少行代码转换hex成反汇编呢? 多亏了Python的Capstone库,做这件事只需要五行. 在二进制分析中,进行Exploit开发或逆向工程时,需要快速将十六进制的Shellcode ...
- fastdfs：安装nginx
#安装依赖 yum -y install gcc yum -y install gcc-c++ yum -y install zlib-devel yum -y install pcre-devel ...
- Vue 虚拟Dom 及 部分生命周期初探
踏入前端,步入玄学 17年底至18年初附带做了vue的一些框架搭建,中途断断续续用了部分vue,时隔几个月后的工作又拾起vue,对于一些原理性的知识淡忘了,正值这段时间使用中遇到了一些坑,又拨了部分代 ...
- 【LOJ】#2181. 「SDOI2015」排序
题解 还以为是啥毒瘤题 然后是个搜索题 复杂度算起来挺大 然后跑起来就连0.1ms不到= = 就是从大到小进行每种操作,搜出来一种操作就乘上一个操作数的阶乘就行 如果现在进行的操作操作\(2^i\)那 ...
- form表单自动提交
form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...
- UVa140 Bandwidth 小剪枝+双射小技巧+枚举全排列+字符串的小处理
给出一个图,找出其中的最小带宽的排列.具体要求见传送门:UVa140 这题有些小技巧可以简化代码的编写. 本题的实现参考了刘汝佳老师的源码,的确给了我许多启发,感谢刘老师. 思路: 建立双射关系:从字 ...
- s3fs挂s3作为本地盘制作ftp使用
一. 安装s3fs 安装s3fs-fuserhttps://github.com/s3fs-fuse/s3fs-fuse 二. 安装vsftpd #查看当前系统版本cat /etc/redhat-re ...
- 027.Zabbix的定期备份
一 数据库备份及恢复 1.1:全库备份 [root@zabbix01 ~]# mysqldump -uroot -p123456 --opt zabbix > zabbix.sql [root@ ...
- Qt编译好的oracle驱动下载
在上文,我累赘了一大堆,给大家写了一篇Qt如何编译OCI驱动,在这里自然就不再累赘了,直接附上编译好的文件供大家下载: <Qt5.3.1+OCI驱动下载地址> 有经济来源的请传送:http ...
- 数据库相关--mysql中的单表查询
一.完整的单表查询语句 select [distinct] *|字段1,字段2, .... from 表名 [where 条件1] [group by 字段名 [having 条件2] ] [orde ...