离线缓存：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. 又是图论.jpg

    BZOJ 2200 道路和航线重讲ww: FJ 正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到 T 个城镇 (1 ≤ T ≤ 25000),编号为 1 到 T.这些城镇之间通过 R 条 ...

  2. django项目学习之QQ登录

    最近在用django框架写一个商城项目(前后端分离),里面用到的一些技术其他项目也可以借鉴,于是就想写一些博客记录,以防自己忘记,今天先写一个关于登录接口中引入QQ登录接口的流程. 关于QQ登录接口的 ...

  3. Python 入门之 推导式

    Python 入门之 推导式 推导式就是构建比较有规律的列表,生成器,字典等一种简便的方式 1.推导式 (1)列表推导式 : <1> 普通循环: [变量 for循环] print([i f ...

  4. 剑指offer-二叉树的下一结点-树-python

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针.   思路:中序遍历,pNode节点的下一个节点根据中序 ...

  5. spark数据结构之RDD

    学习spark,RDD是一个逃不过去的话题,那么接下来我们看看RDD 1.什么是RDD? RDD叫做弹性分布式数据集,是Spark中最基本的数据抽象,代表一个不可变.可分区.里面元素可以并行计算的集合 ...

  6. nsswitch.conf - 系统数据库及名字服务开关配置文件

    DESCRIPTION C 程序库里很多函数都需要配置以便能在本地环境正常工作, 习惯上是使用文件(例如`/etc/passwd') 来完成这一任务. 但别的名字服务, 如网络信息服务NIS, 还有域 ...

  7. Django视图中使用本地缓存

    Django服务器视图使用缓存可以大大减小服务器的压力,对数据实时性要求不高的场景使用缓存非常适合. 使用Django本地缓存 1. 在settings.py配置CACHES CACHES = { ' ...

  8. TFServering和docker

    nvidia-docker安装:https://github.com/NVIDIA/nvidia-docker nvidia-docker的基本操作:https://blog.csdn.net/pan ...

  9. element隐藏组件滚动条scrollbar使用

    可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...

  10. 前端之HTML：HTML

    前端基础之html 一.初始html 1.web服务本质 import socket sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM) soc ...