什么是Application Cache

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

Application Cache带来的三个优势是：

① 离线浏览 – 用户可在离线时浏览您的完整网站

② 提升页面载入速度 – 缓存资源为本地资源，因此加载速度较快

③ 降低服务器压力 – 浏览器只会从发生了更改的服务器下载资源

而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响

Nginx manifest配置

离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。对于Nginx需要修改配置目录下的mime.types文件，添加manifest文件映射：

text/cache-manifest                   manifest;

重启nginx后，服务器支持manifest。

配置manifest文件

CACHE MANIFEST

CACHE:

#需要缓存的列表

clock.css

clock.js

NETWORK:

#不需要缓存的

*

FALLBACK:

#访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html

index.html a.html

HTML5 Application Cache

使用离线存储，除了上述的配置外，只需要在html tag标签增加<manifest>。

<!DOCTYPE html>

<html lang="en" manifest="cache.manifest">

  <head>

    <title>AppCache Test</title>

    <link rel="stylesheet" href="clock.css">

    <script src="clock.js"></script>

  </head>

  <body>

    <p><output id="clock"></output></p>

    <div id="log"></div>

  </body>

</html>

通过chrom 访问站点，即可看到离线缓存后的效果：

通过JS动态控制更新

应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

缓存状态:
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：

var appCache = window.applicationCache;

switch (appCache.status) {

  case appCache.UNCACHED: // UNCACHED == 0

    return 'UNCACHED';

    break;

  case appCache.IDLE: // IDLE == 1

    return 'IDLE';

    break;

  case appCache.CHECKING: // CHECKING == 2

    return 'CHECKING';

    break;

  case appCache.DOWNLOADING: // DOWNLOADING == 3

    return 'DOWNLOADING';

    break;

  case appCache.UPDATEREADY:  // UPDATEREADY == 4

    return 'UPDATEREADY';

    break;

  case appCache.OBSOLETE: // OBSOLETE == 5

    return 'OBSOLETE';

    break;

  default:

    return 'UKNOWN CACHE STATUS';

    break;

};

要以编程方式更新缓存，请先调用 applicationCache.update()。此操作将尝试更新用户的缓存（前提是已更改清单文件）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用 applicationCache.swapCache() 即可将原缓存换成新缓存。

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {

  appCache.swapCache();  // The fetch was successful, swap in the new cache.

}

请注意：以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向 用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。

好消息是，您可以避免重新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 updateready 事件：

    //Check if a new cache is available on page load.

    window.addEventListener('load', function(e) {

      window.applicationCache.addEventListener('updateready', function(e) {

        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

          // Browser downloaded a new app cache.

          // Swap it in and reload the page to get the new hotness.

          window.applicationCache.swapCache();

          if (confirm('A new version of this site is available. Load it?')) {

            window.location.reload();

          }

        } else {

          // Manifest didn't changed. Nothing new to server.

        }

      }, false);

    }, false);

Nginx manifest 实现 HTML5 Application Cache的更多相关文章

  1. HTML5 application cache

    Application Cache API (一) 基本应用 http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html Appl ...

  2. html5 Application Cache 机制以及使用

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

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

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

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

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

  5. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

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

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

  7. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  8. HTML5应用程序缓存Application Cache

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

  9. HTML5学习总结-08 应用缓存(Application Cache)

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

随机推荐

  1. HTTP请求方法详解

    HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定 ...

  2. 让 select 的 option 标签支持事件监听（如复制操作）

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  3. 基于Enterprise Library的Winform开发框架实现支持国产达梦数据库的扩展操作

    由于一个客户朋友的需求,需要我的Winform开发框架支持国产达梦数据库的操作,这个数据库很早就听过,但是真正一般项目用的很少,一般在一些特殊的项目可能需要用到.由于我的Winform开发框架,是基于 ...

  4. [SL] Silverlight + WCF Demo项目

    I:项目描述:利用 Silverlight+WCF 技术,模拟资源管理器(如图1)功能,通过地址栏输入本地文件夹路径,然后将解析出来的该目录下所有文件(夹)存储到数据库中,然后再加载到界面上显示出来: ...

  5. EC笔记，第二部分：6.若不想使用编译器默认生成的函数，就该明确拒绝

    6.若不想使用编译器默认生成的函数,就该明确拒绝 1.有的时候不希望对象被复制和赋值,那么就把复制构造函数与赋值运算符放在private:中,但是这两个函数是否需要实现呢?假设实现了,那么你的类成员方 ...

  6. PHP运行环境，服务器相关配置

    1.在DOS命令窗口输入 mysql -hlocalhost -uroot -p回车 进入mysql数据库, 其中-h表示服务器名,localhost表示本地:-u为数据库用户名,root是mysql ...

  7. ABP中使用OAuth2(Resource Owner Password Credentials Grant模式)

    ABP目前的认证方式有两种,一种是基于Cookie的登录认证,一种是基于token的登录认证.使用Cookie的认证方式一般在PC端用得比较多,使用token的认证方式一般在移动端用得比较多.ABP自 ...

  8. 微信公众平台自动回复wechatlib.jar的生成及wechatlib解析

    微信公众平台出来有一段时日了,官方提供的自动回复的接口调用大致是这么些类型(text/image/location/link),每个项目都如此拷贝代码,在笔者看来比较麻烦,今天乘着点闲暇的时间特意将这 ...

  9. 【工业串口和网络软件通讯平台(SuperIO)教程】六.二次开发导出数据驱动

    SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1    导出数据接口的作用 在数据集成系统项目中,要么是自已集成其他厂家的设备,要么是其他厂家集成自己 ...

  10. Hadoop2.6.0安装—单机/伪分布

    目录 环境准备 创建hadoop用户 更新apt 配置SSH免密登陆 安装配置Java环境 安装Hadoop Hadoop单机/伪分布配置 单机Hadoop 伪分布Hadoop 启动Hadoop 停止 ...