h5离线缓存
离线缓存:application cache
什么是离线缓存:
离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示
离线缓存的优势:
提高用户的访问速度,节省流量;
如何实现离线缓存
1.在需要缓存文件的根节点 html 上添加 manifest 属性(属性值是以 .appcache 为后缀的文件) 案例 (<html manifest="a.appcache"> ... </html> )
2.必须在同级目录下添加以 .appcache为后缀的文件
3. .appcache文件的内容
在 .appcache 其实本质上也属于txt文件 所以 # 代表注释的意思
CACHE MANIFEST
# 1.0 版本号 (这个注释是给 开发者看的,代表了第几个版本)
CACHE:
在这里书写需要被缓存的文件,既可以是相对路径,也可以使用绝对路径
NETWORK:
* 指的是不会被缓存的文件, * 代表 上面的除了上面的缓存文件之外的其他所有都不会被缓存
FALLBACK:
如果无法建立英特网请求(如404),而打开的文件
(在/theme.css 前面加上 CACHE 就更好了)
在服务端的处理(服务端有可能无法解析此文件),需要添加他的mime类型
不然在控制台 会报错: failed to parse manifest (意思是:解析manifest文件失败)
原因是服务端,没有响应这个文件的mime类型
在服务器上添加 .appcache文件的mime类型
以phpstudy为例
phpstudy-->apache-->conf-->mime.types
在最后一行添加mime类型: text/cache-manifest .appcache (还有添加后缀名)
如图
如何查看缓存文件
F12-->检查元素:application---->application cache 中 source中 查看 ,但随着浏览器的升级,现在不能直接查看了,因为他会引发上下文的安全,及耗资源
并且,同级目录下不能出现 以 .txt 结尾的文件,否则缓存功能失效
在客户端插在缓存文件的位置;
在浏览器的地址栏输入 chrome://version
然后在个人资料路径一栏便可找到
h5离线缓存的更多相关文章
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- h5 离线缓存小demo
传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...
- H5 离线缓存的用法
H5离线缓存基础系列 1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...
- 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,作用是为了让服务器识别该 ...
随机推荐
- ^A '\001' 分隔符
^A 分隔符符号\001,使用组合按键“ctrl+V+A”获得
- npm errno -4048错误
这种错误是缓存原因导致的,首先清除缓存 npm cache clean --force 然后校验缓存依赖的完整和有效性 npm cache verify 最后重新安装即可
- 图论 test solution
图论 test solution T1:潜伏 题目背景 小悠回家之后,跟着母亲看了很多抗日神剧,其中不乏一些谍战片. 题目描述 解放前夕,北平城内潜伏着若干名地下党员,他们居住在城市的不同位置.现在身 ...
- faker数据填充详解
安装 在laravel中已经自动集成,无需手动安装.如需在其他地方使用,可使用以下命令进行安装. composer require fzaninotto/faker 为Faker指定中文支持 可通过在 ...
- [LeetCode] 130. 被围绕的区域
题目链接 : https://leetcode-cn.com/problems/surrounded-regions/ 题目描述: 给定一个二维的矩阵,包含 'X' 和 'O'(字母 O). 找到所有 ...
- [LeetCode] 109. 有序链表转换二叉搜索树
题目链接 : https://leetcode-cn.com/problems/convert-sorted-list-to-binary-search-tree/ 题目描述: 给定一个单链表,其中的 ...
- Scrapy 教程(五)-分页策略
scrapy 爬取分页网站的策略 1. 检测当前页是否存在“下一页” 2. 如果存在,把“下一页”的链接交给本方法或者其他方法 3. 如果不存在,结束 图示 示例代码 def parse(self, ...
- php配置伪静态如何将.htaccess文件转换 nginx伪静态文件
php通常设置伪静态三种情况,.htaccess文件,nginx伪静态文件,Web.Config文件得形式,如何将三种伪静态应用到项目中呢, 1,.htaccess文件 实例 <IfModule ...
- 2019 安洵杯 Re 部分WP
0x01.EasyEncryption 测试文件:https://www.lanzous.com/i7soysb 1.IDA打开 int sub_416560() { int v0; // eax i ...
- Django【第24篇】:JS实现的ajax和同源策略
JS实现的ajax和同源策略 一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器 ...