1.配置缓存文件 cache manifest

MIME TYPE：text/cache-manifest
文件名称：name.appcache
作用：用于配置需要缓存的文件

2.使用方法

在服务器上添加MIME TYPE
在apache virtual host 中添加

  1. AddType text/cache-manifest .appcache

创建 name.manifest，文件后缀可自定义，定义后需要在服务器上添加对应的MIME TYPE

  1. CACHE MANIFEST
  2. #VERSION 1.0
  3. CACHE:
  4. index.html
  5. ./js/jquery.js
  6. ./css/style.css
  7. NETWORK:
  8. ./upload/
  9. FAILBACK:
  10. ./proxy/ proxy.html

CACHE MANIFEST：文件标识
#VERSION 1.0 ：版本号，只是一行注释，但改变可以更新缓存
CACHE：表示要缓存的文件
NETWORK：表示需要连接服务器的文件
FAILBACK：表示当没有响应时的替代方案

<html>标签添加manifest属性

<html manifest="name.appcache"> 

3.更新方法

1.自动更新：浏览器在第一次访问时访问应用缓存，之后只会在cache manifest文件发生变化时更新缓存（即使注释变化也会更新，#VERSION 1.0的作用），而cache manifest中的资源文件发生变化则不会触发更新。

2.手动更新：以编程方法更新缓存，先调用applicationCache.update()，此操作尝试更新用户的缓存（前提是cache manifest文件有更改）。然后当applicationCache.status为UPDATEREADY状态时，调用applicationCache.swapCache()即可将原缓存换成新缓存。

  1. ar appCache = window.applicationCache;
  2. appCache.update(); // Attempt to update the user's cache.
  3. ...
  4. if (appCache.status == window.applicationCache.UPDATEREADY) {
  5. appCache.swapCache(); // The fetch was successful, swap in the new cache.
  6. }

使用update() 和 swapCache() 不会向用户提供更新的资源，只会让浏览器检查是否有新的cache manifest清单，下载指定的更新内容及重新填充应用缓存。因此需要两次加载才能向用户提供新内容。第一次是获得新的应用缓存，第二次是刷新网页内容。

避免重新加载两次的麻烦，可以设置监听器，监听网页加载时updateready的事件。

  1. // Check if a new cache is available on page load.
  2. window.addEventListener('load', function(e) {
  3. window.applicationCache.addEventListener('updateready', function(e) {
  4. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  5. // Browser downloaded a new app cache.
  6. // Swap it in and reload the page to get the new hotness.
  7. window.applicationCache.swapCache();
  8. if (confirm('A new version of this site is available. Load it?')) {
  9. window.location.reload();
  10. }
  11. } else {
  12. // Manifest didn't changed. Nothing new to server.
  13. }
  14. }, false);
  15. }, false);

4.在线状态检测和监视

检测：navigator.onLine 属性表示当前是否在线，如果为 true，表示在线。如果为 false， 表示离线。
监视：当在线/离线状态切换时，会触发online/offline事件，这两个事件触发在body元素上，并且沿着document.body，document 和 window的顺序冒泡。

6.注意事项

1. 站点离线存储的容量限制是5M
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 在manifest中使用的相对路径，相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行，且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时，资源请求本身也会触发更新

HTML5 使用application cache 接口实现离线数据缓存的更多相关文章

  1. [Selenium] Android HTML5 中 Application Cache

    HTML5 中引入了 Application Cache,这意味着 Web 应用程序可以被缓存到本地,且可在没有网络的情况下也能访问该 Web 应用程序 Application Cache 在以下3个 ...

  2. 【HTML5】Application Cache应用程序缓存

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...

  3. SpringBoot 结合 Spring Cache 操作 Redis 实现数据缓存

    系统环境: Redis 版本:5.0.7 SpringBoot 版本:2.2.2.RELEASE 参考地址: Redus 官方网址:https://redis.io/ 博文示例项目 Github 地址 ...

  4. php cache类代码(php数据缓存类)

    如果访问量大的话会给数据库造成很大的负担,所以对于变化不经常的内容要做好php 数据cache(缓存)是十分必要的,我做了一个简单的php“文件缓存”的类,希望对大家有所帮助. 思路是这样的: 对于一 ...

  5. 转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  6. HTML5 Application cache初探和企业应用启示

    Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...

  7. html5 Application Cache 机制以及使用

    那什么是Application Cache呢? 顾名思义,AppCache就是对app内存缓存的方案,具体表现为当请求某个文件时不是从网络获取该文件,而是从本地内存中获取. Application C ...

  8. html5 Application Cache——加快简历二次访问速度

    上篇博客(在github上写个人简历——最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...

  9. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

随机推荐

  1. STM32 IIC

    #include "Type.h" #include "IIC.h" #include "Delay.h" void I2C_Init(vo ...

  2. bootstrap-select js jQuery控制select属性变化

    bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究 ...

  3. Xcode静态检查分析代码

    Clang静态分析和Instruments来剖析代码有一些不同,Clang更致力于在编译的过程中通过自身的一套判断机制来找出代码中潜在的隐患.   在XCode 3.2之后的版本里,Clang已经被集 ...

  4. quartz配置文件详解

    quartz配置文件详解(转载)     quartz学习总结: 一.关于job:    用Quartz的行话讲,作业是一个执行任务的简单Java类.任务可以是任何Java代码.只需你实现org.qu ...

  5. JSP网页处理过程

    以下步骤表明了Web服务器是如何使用JSP来创建网页的:  就像其他普通的网页一样,您的浏览器发送一个HTTP请求给服务器. Web服务器识别出这是一个对JSP网页的请求,并且将该请求传递给JSP引擎 ...

  6. C#winForm调用WebService的远程接口

    Web Service 的创建简单编码.发布和部署 上一篇详细概述了WebService的创建,编码,发布和部署,那么作为客户端的程序如何访问远程端的WebService 接下来看一下具体步骤:   ...

  7. C#语言实现定时开启或禁用网卡小程序

    C#语言实现定时开启/禁用网卡 程序运行效果图 程序实现主要代码 源代码工程文件(VS2013工程文件编译通过) 查看网卡名称附图 1.win7旗舰版运行效果图: 2.程序实现主要代码: /// 网卡 ...

  8. xamarin(3.9.236)里DATETIMENOW的错误。

    [ERROR] FATAL UNHANDLED EXCEPTION: System.EntryPointNotFoundException: monodroid_get_system_property ...

  9. Tor网络突破IP封锁，爬虫好搭档【入门手册】

    本文地址:http://www.cnblogs.com/likeli/p/5719230.html 前言 本文不提供任何搭梯子之类的内容,我在这里仅仅讨论网络爬虫遇到的IP封杀,然后使用Tor如何对抗 ...

  10. ASP.Net Core 里是如何把一个普通的 Action 返回类型转换为某种 IActionResult 的

    秘密在于这个类型: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker 在它的 CreateActionResult 方法里会将相关类型 ...