离线缓存：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. Java——HashMap使用Demo

    package map; import java.util.Collection; import java.util.HashMap; import java.util.Set; public cla ...

  2. hdu-4738.Caocao's Bridges(图中权值最小的桥)

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. 各类最新Asp .Net Core 项目和示例源码

    1.网站地址:http://www.freeboygirl.com2.网站Asp .Net Core 资料http://www.freeboygirl.com/blog/tag/asp%20net%2 ...

  4. 题解 AT2684 【K-City】

    此题这么水,竟然发题解的这么少. 本蒟蒻也来发一篇QwQ. 题目中所谓“四条街包围一个街区”其实就是两条街之间夹一个街区而已: n条街有几条两两相邻呢?答案是n-1条: m条街有几条两两相邻呢?答案是 ...

  5. px-em-pt等字体的不同

  6. Neo4j清空所有数据

    两种方法: 一.用下列 Cypher 语句: match (n) detach delete n 二. 1.停掉服务: 2.删除 graph.db 目录: 3.重启服务. 原文地址:http://ne ...

  7. time和datetime的区别

    time在 Python 文档里,time是归类在Generic Operating System Services中,换句话说, 它提供的功能是更加接近于操作系统层面的.通读文档可知,time 模块 ...

  8. css秘密花园一

    css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; b ...

  9. OneDrive网盘资源下载教程

    目录 1. 本文地址 2. 下载流程 3. 打赏&支持 1. 本文地址 博客园:https://www.cnblogs.com/coco56/p/11161530.html CSDN:http ...

  10. [转载]转一篇Systemverilog的一个牛人总结

    原文地址:转一篇Systemverilog的一个牛人总结作者:dreamylife Systemverilog 数据类型 l       合并数组和非合并数组 1)合并数组: 存储方式是连续的,中间没 ...