应用程序缓存能做什么？

  1. 可以在脱离网络的条件下离线访问。
  2. 减少读取服务器文件，减轻服务器的访问压力。
  3. 优化网站打开速度。

如何启用应用缓存？

第一步：给服务器添加新的MIME：扩展名：.appcache  MIME类型：text/cache-manifest

第二步：创建appcache文件：

appcache文件可以看作缓存规则配置文件。appcache文件内可以定义需要缓存的文件列表、不缓存的文件列表、及文件不存在时时的替补资源。

appcache文件分成三部份：

  1. CACHE:          #设置需要缓存的资源
  2. NETWORK:    #设置不缓存的资源，该资源在离线时不可用
  3. FALLBACK:    #规定如果无法建立因特网连接时，用指定的资源替换

appcache文件示例，比如将此文件保存到网站根目录路径：/manifest/article_lists.appcache

 CACHE MANIFEST

 # 井号用来注释

 # CACHE表示需要缓存的文件

 # CACHE不支持  * 号

 CACHE:

 about.html

 video.html

 css/css.css

 js/common.js

 # NETWORK 表示不缓存的文件，离线时是不可用的

 NETWORK:

 login.asp

 # * 可以使用星号来指示所有其他资源/文件都需要因特网连接：

 # FALLBACK 规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件：

 FALLBACK:

 /html5/ /404.html

appcache文件注意事项：

  1. 列表清单支持相对路径和绝对路径。
  2. 资源名称尽量不要使用汉字、空格等特殊文件。

第三步：主页面引入appcache文件，一旦打开该页面的同时会缓存appcache指定的文件。

比如主页面名为：article_lists.html，其引入方式如下：

 <!DOCTYPE html>

 <!-- appcache文件路径可以是相对，也可以是绝对路径-->

 <html manifest="/manifest/article_lists.appcache">

注意细节：

  1. 执行文件(比如 article_lists.html)，虽然不在缓存列表内，但仍然会被缓存。
  2. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
  3. 查看资源是否被缓存，可以在浏览器按F12键，在console内查看

  5. 文件引用缓存文件时，一定要区分大小写！
    比如：缓存列表内缓存css/css.css 资源，全是小写状态。则执行时会将该文件下载到本机。
    而离线html文件想要加载该css文件用了大写文件名时会显示出错，是因为离线匹配缓存文件是区分大小写。
    也就是说： css.css 资源是被缓存了，但离线文件引用该缓存资源时未能正确的匹配大小写状态，导致无法正确加载该CSS样式。
  6.  <!DOCTYPE HTML>
    
 <html manifest="/learn/h5/h5.appcache">
    
 <head>
    
 <title>H5 简明教程</title>
    
 <!-- 由于appcache内缓存的文件名是小写的：css/css.css  而这里引用了大写的Css/css.css导致无法获取该资源的缓存 -->
    
 <link rel="stylesheet" type="text/css" href="Css/css.css" />

1、 如果要缓存一个html页面，一定同时要缓存该文件所关联的所有资源列表，包括css、js、图片、文件等。

2、强制更新缓存，可以编辑appcache文件，比如修改注释。

H5应用程序缓存浅谈及实际测试的更多相关文章

  1. H5应用程序缓存 - Cache manifest

    一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...

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

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

  3. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

  4. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  5. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  7. Php output buffering缓存及程序缓存

       在php中有时为了控制程序的输出显示顺序,提供了output buffering缓存(php自身缓存机制). 若Ob缓存开启,需要输出的就先存在ob缓存里,再到程序缓存里.若没有开启,则直接进入 ...

  8. HTML 5 学习之应用程序缓存

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  9. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. $Yeasion$的码风修改历程

    总之,今天是一个值得纪念的伟大日子,我将自己的码风进行了彻底的修改,大概是参考了Pks和\(Rqy\)的码风,分为以下几点. 1.变量名.在所有的计算符号之前和之后加空格.如:"&& ...

  2. 【MongoDB】CentOS上安装MongoDB

    权限部分尚未测试完成,请勿参考. 1.去官方网站下载Mongodb for linux的包,我没找到CentOS的,随便下载了个mongodb-linux-x86_64-amazon-3.2.0.tg ...

  3. Entity FreamWork 无法创建“System.Object”类型的常量值。此上下文仅支持基元类型或枚举类型错误解决

    Entity FreamWork 无法创建“System.Object”类型的常量值.此上下文仅支持基元类型或枚举类型错误解决: 最近在开发中把我原来抄的架构里面的主键由固定的Guid改成了可以泛型指 ...

  4. 随机数使用不当引发的生产bug

    前几天负责的理财产品线上出现问题:一客户赎回失败,查询交易记录时显示某条交易记录为其他人的卡号. 交易的链路如下: 出现该问题后,我们对日志进行了分析,发现主站收到的两笔流水号完全相同,然而主站却没有 ...

  5. detach()之大坑：detach会引起局部变量失效引起线程对内存的非法访问题。

    detach()之大坑:detach会引起局部变量失效引起线程对内存的非法访问题.一:传递临时对象作为线程参数(1.1)要避免的陷阱(解释一)(1.2)要避免的陷阱(解释一)事实一:只要用临时构造的A ...

  6. C++笔记011：C++对C的扩展——变量检测增强

    原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 在C语言中重复定义多个同名的变量是合法的,多个同名的全局变量最终会被链接到全局数据区的同一个地址空间上. 在C++中,不允许定义多个同名的 ...

  7. Zabbix——设置报警阈值

    前提条件: 1. Zabbix-server 版本为4.0 2.邮件告警正常使用 3. 阈值改为1分钟进行邮件发送 点击: 找到agent,点击触发器: 设置网络ping包进行检测

  8. .Net core 下Swagger如何隐藏接口的显示

    Swagger是这个非常强大的api文档工具,通常可以用来测试接口,和查看接口,就像这样: 非常的好用和快捷,这是一个小小的demo,我们在完成系统时,发布后,外部依旧可以用/swagger访问到这个 ...

  9. PHP Fatal error: Call to undefined function think\finfo_open()

    PHP Fatal error:  Call to undefined function think\finfo_open() php.ini      extension=php_fileinfo. ...

  10. Java学习笔记二十六:Java多态中的引用类型转换

    Java多态中的引用类型转换 引用类型转换: 1.向上类型转换(隐式/自动类型转换),是小类型到大类型的转换: 2.向下类型转换(强制类型转换),是大类型到小类型的转换: 3.instanceof运算 ...