离线缓存：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. Centos7 搭建pptp服务器

    1.检查是否支持pptp 返回ok即表示支持 modprobe ppp-compress-18 && echo ok 2.安装ppp yum install -y ppp 3.安装pp ...

  2. P3951小凯的疑惑

    这是2017年提高组的第一题,是一个小学奥数题?听说很多大佬爆零了,我AC了,,, 这个题首先给出两个素数,问取任意个这两个素数之和不可以达到的最大的数是多少?拿到这个题首先很蒙,于是试了试样例,并没 ...

  3. 【Luogu P2201】【JZOJ 3922】数列编辑器

    题面: Description 小Z是一个爱好数学的小学生.最近,他在研究一些关于整数数列的性质. 为了方便他的研究,小Z希望实现一个叫做"Open Continuous Lines Pro ...

  4. 通过编写串口助手工具学习MFC过程——（二）通过“打开串口”按钮了解基本操作

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  5. Find The Multiple （水题）

    Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal repr ...

  6. Jafka源码分析——网络架构

    在kafka中.每个broker都是一个server.依照一般理解,server就是一个SocketServer,其不断接收用户的请求并进行处理.在Java中进行网络连接有两种方式一种为堵塞模式一种为 ...

  7. ps的一点快捷键

    选区工具快捷键(shift alt很重要) 按M键切换到选区工具 矩形选区-> shift 正方形 shift+m 矩形/椭圆来回切换 参考线:alt+v 选中上方的工具 alt+v+e 新建参 ...

  8. tortoise svn回滚常用命令

    一.revert to this version 和 revert changes from this version的区别 假设SVN已有版本4814-4854:1.基于4837版本执行[rever ...

  9. MIT-线性代数公开课

    本博客是学习MIT-线性代数笔记,Gilbert Strang大神讲的通俗易懂,感兴趣的可以观看视频 其中习题集请点击 01)方程组的几何解释 02)矩阵消元 03)乘法和逆矩阵 04)A的LU分解 ...

  10. Codeforces 916 二进制1数目构造(阅读理解) 最小生成树1-N路径质数构造

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...