离线缓存：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离线缓存的更多相关文章

  1. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  2. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  3. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  4. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  5. H5离线缓存技术

      HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...

  6. H5离线缓存基础系列

    1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...

  7. H5离线缓存(基础)学习指南

    离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...

  8. 体验h5离线缓存

    摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...

  9. H5 应用程序缓存(离线缓存)

    离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该 ...

随机推荐

  1. jmeter应用之批量插入数据

    上一篇讲到如何在jmeter中配置并连接使用mysql数据库,这一节主要是讲数据库连接的简单应用——批量插入数据 总体步骤如下: 1)新建线程组和添加JDBC Connection Configura ...

  2. mysql5.7 修改用户密码

    修改vi /etc/my.cnf,增加skip-grant-tables可以免密码登录mysql use mysql ; update user set authentication_string=P ...

  3. [BZOJ 4332] [JSOI2012]分零食(DP+FFT)

    [BZOJ 4332] [JSOI2012]分零食(DP+FFT) 题面 同学们依次排成了一列,其中有A位小朋友,有三个共同的欢乐系数O,S和U.如果有一位小朋友得到了x个糖果,那么她的欢乐程度就是\ ...

  4. zprofiler工具

    转自:zprofiler三板斧解决cpu占用率过高问题 此工具为阿里自产的profiler工具,在其他文章中看到有用此工具进行性能问题定位的.在此转载文章学习一下. 上周五碰到了一个线上机器cpu占用 ...

  5. nodeJS打包安装和问题处理

    一,执行步骤,打包报错 1,查看npm版本npm -v 2,查看gulp版本(报错怎么证明没安装)gulp --version 3,安装gulpnpm install --global gulp-cl ...

  6. luogu P1397 [NOI2013]矩阵游戏

    传送门 题目中那两个递推式显然可以写成矩乘的形式,然后十进制快速幂即可.这里不再赘述 只有两个递推式,我们可以考虑一波推式子,首先第一行的元素应该分别是\(1,a+b,a^2+ab+b,a^3+a^2 ...

  7. k3 cloud在站点中新增用户

    1.进去金蝶云企业平台: 网址:https://cloud.kingdee.com/pt/ 2.进入控制台页面,我的产品下面选择添加用户 去cloud平台新增并同步用户注册信息 3.去管理中心更新用户 ...

  8. 洛谷 P2866 [USACO06NOV]糟糕的一天Bad Hair Day 牛客假日团队赛5 A (单调栈)

    链接:https://ac.nowcoder.com/acm/contest/984/A 来源:牛客网 题目描述 Some of Farmer John's N cows (1 ≤ N ≤ 80,00 ...

  9. flutter 基础组件

    TextWidget class TextWidget extends StatelessWidget { final TextStyle _textStyle = TextStyle( fontSi ...

  10. 动态SQL的注意

    MyBatis的动态SQL元素. 元素 说明 <if> 判断语句,用于单条件分支判断 <choose>(<when>.<otherwise>) 相当于j ...