什么是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. [开源 .NET 跨平台 数据采集 爬虫框架: DotnetSpider] [二] 基本使用

    [DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 使用环境 Visual Studio 2015 or later .NET 4 ...

  2. CodeFirst时使用T4模板（你肯定没用过的笨方法，还望园友指教）

    我们都知道T4模板用于生成相似代码. 在DBFirst和ModelFirst条件下我们很容易从.edmx下获取所有实体类和其名称,并且通过我们定义的模板和某些遍历工作为我们生成所需要的相似代码. 但是 ...

  3. C# MVC绑定 List<DapperRow>到bootstrap-table列表

    1.Dapper返回List<dynamic>对象 /// <summary> /// 获取候选人推荐的分页数据 /// </summary> /// <pa ...

  4. Oracle 数据库基础学习 (八) PL/SQL综合练习

    1.定义游标:列出每个员工的姓名.部门名称并编程显示第10个到第20个记录. declare cursor zemp_cursor is (select temp.ename, temp.dname ...

  5. No.006：ZigZag Conversion

    问题: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...

  6. androidstudio报错

    今天换一下IDE,结果上来就给我报错, androidstudio message:Error:java.lang.UnsupportedClassVersionError: com/android/ ...

  7. PHP工作笔记：数组转字符串与字符串转数组

    一个数组要入库,发现不可以,特定用函数转为字符串入库 $data = array( 'http://img4.bitautoimg.com/autoalbum/files/20110420/734/2 ...

  8. C# out ref 重载

    今天看极客学院wiki时候看到了out,ref的介绍,之前对这个知识点没有深刻认识,所以就写了个小测试看了下,瞬间明白了. using System; using System.Collections ...

  9. [翻译]Java HashMap工作原理

    大部分Java开发者都在使用Map,特别是HashMap.HashMap是一种简单但强大的方式去存储和获取数据.但有多少开发者知道HashMap内部如何工作呢?几天前,我阅读了java.util.Ha ...

  10. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...