离线缓存：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. 数据库设计时，每个表要不要都设置自增主键ID！（转）

    逻辑数据库设计 - 需要ID(谈主键Id) 本文的目标就是要确认那些使用了主键,却混淆了主键的本质而造成的一种反模式. 一.确立主键规范 每个了解数据库设计的人都知道,主键对于一张表来说是一个很重要, ...

  3. Mac 切换bash zsh等shell

    现在假设大家都安装了iTerm2,我们先把bash切换成zsh,使用命令行如下: chsh -s /bin/zsh 执行命令后,会让你输入电脑的密码,输入即可.完成后,需要完全退出iTerm2,再次进 ...

  4. iOS APP 国际化

    pp Store 中很多流行的应用程序有多种语言版本.虽然这些应用程序可能因为很多因素而变得流行,但是具有多种本地化版本,肯定是其中一个因素.越多的人可以理解并使用您的应用程序,潜在的买家也就越多. ...

  5. vb中的资源文件

    --- 一．VB中资源文件的分类 ---- 通常将资源分为两类:1.字符串资源,包括菜单和文本中使用的字符串,如"Hello World"等:2.二进制资源,如位图(.BMP),图 ...

  6. VB中输入函数InputBox的用法

    格式:InputBox(pronpt[,title][,default][,xpos,ypos]).其中的pronpt为窗口的提示词,title为输入窗口的标题,default为输入窗口的默认内容,x ...

  7. 使用pycharm编写自动化脚本

    1.:导入本地Python环境 2:安装Selenium 3:下来需要根据安装的浏览器版本,下载合适的chromedriver驱动程序. 4:接着需要将下载的chromedriver进行解压,并将文件 ...

  8. 魔咒词典 HDU - 1880 （字符串hash 单hash转int或者 双hash ）

    哈利波特在魔法学校的必修课之一就是学习魔咒.据说魔法世界有100000种不同的魔咒,哈利很难全部记住,但是为了对抗强敌,他必须在危急时刻能够调用任何一个需要的魔咒,所以他需要你的帮助. 给你一部魔咒词 ...

  9. pandas的数据统计函数

    # 1汇总类统计 # 2唯一去重和按值计数 # 3 相关系数和协方差 import pandas as pd # 0 读取csv数据 df = pd.read_csv("beijing_ti ...

  10. mac+react-native环境搭建

    主要参考 https://reactnative.cn/docs/getting-started.html react-native中文网 IOS版 1.Node v10以上.Watchman 和 R ...