最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家。正好前段时间翻译了一本书《HTML5 Mobile Development Cookbook》,中文译本在此。其中讲到了不少移动端Web开发的Best Practices,正好就用到了10K Hours这个应用上。其中我觉得非常有用但是又让人头痛的一个功能就是AppCache:它可以让用户在访问一次网页以后,下次再来时不能访问网络的情况下,也可以使用这个Web App;但是当页面资源被缓存以后,非常难去更新它们⋯⋯下面就是App Cache的详细介绍和使用技巧:

什么是AppCache

下面是来自W3C的解释:

In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP's coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user's browser to keep a copy of the files for use offline.

简单来说就是可以让开发者在网络出问题的情况下,可以部分或全部访问网站的静态资源。

可能有些朋友会疑惑AppCache与浏览器自动缓存和localStorage的区别,这里我简单讲一下:在默认设置下,浏览器会根据request header自动缓存静态文件,但是在请求该文件时还是会发出http request,而一旦被AppCache缓存住的文件就不会发送http request,除非人工触发缓存更新;localStorage也是一种缓存,但是它缓存的是数据,而AppCache缓存的是文件。

如何使用AppCache

要引入AppCache一般有三个步骤:

1. 声明manifest文件

manifest可以告诉浏览器网站的cache行为,下面是一个完整的manifest文件示例:

  1. CACHE MANIFEST
  2. # Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)
  3. CACHE:
  4. index.html
  5. stylesheet.css
  6. images/logo.png
  7. scripts/main.js
  8. NETWORK:
  9. myApp/api
  10. http://api.twitter.com
  11. FALLBACK:
  12. images/large/ images/offline.jpg

CACHE MANIFEST表明该文件用于AppCache的配置,必须放在第一行

# Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)是一个时间戳,用于触发缓存文件的更新,这个会在后面详细讲到。

CACHE指定需要被缓存的文件。这些文件会被缓存到AppCache中,以后这些文件都会从AppCache中加载。

NETWORK指定不需要被缓存的文件。这些文件不会被缓存到AppCache中,一般用于一些动态的页面或数据。

注意:一些浏览器会给缓存容量加入上限,比如Chrome浏览器就是使用一个共有的缓存池,如果超出上限,以前缓存的文件有可能会被清除掉。

FALLBACK指定当网络不可用时的替代文件,这些文件在网络可用时不会从AppCache中读取,只有当网络不可用时才会从AppCache中读取。示例中指定当images/large/中的任意文件无法访问时,都从AppCache中读取images/offline.jpg文件。

我们一般使用.appcache作为manifest文件的后缀,这个是WHATWG的建议,同时也获得了更多浏览器的支持。

2. 在页面中引入manifest文件

引入manifest文件需要在html标签中加入manifest属性,其值为manifest文件地址,例如:

  1. <html manifest="example.appcache">
  2. ...
  3. </html>

注意:你需要在每个用到AppCache的页面都加入manifest属性,除非该页面就在缓存列表中,而拥有manifest属性的页面会自动被缓存住,不需要再加入缓存列表了。

3. 修改服务器端的mime-type

为了让服务器端可以正确的处理manifest文件,需要在mine-type中加入text/cache-manifest。比如在Apache服务器中,可以添加以下行到配置文件中:

  1. AddType text/cache-manifest .appcache

更新缓存

完成manifest文件的配置以后,你会发现你的页面加载速度暴增,可以算是秒载,但是你也会悲催的发现,任何文件的修改将不会被反应到页面上,那么当我们有文件修改的时候应该怎么办呢?

修改manifest文件

有两种情况可以导致缓存更新:

  1. 用户清除缓存数据。
  2. manifest文件修改。

所以我们要更新缓存,其实只有一个办法,那就是修改manifest文件。这个时候我们就可以看到在上个例子中那个被注释掉的时间戳(# Time: Wed May 22 2013 17:07:07 GMT+0800 (CST))的作用了,每当任意一个被缓存的文件修改后,我们都应该修改manifest文件的时间戳,让浏览器知道有文件更改,应该更新缓存。

当浏览器检测到manifest文件更改以后,它会发起请求更新所有被缓存的文件,但是这时候还不会马上更新到页面中,还需要用户再次刷新页面,才能看到新的内容。也就是说,当我们有文件修改以后,需要用户刷新两次才能看到新的内容,这个对于用户来说是很奇怪的体验。这个时候我们可以利用AppCache提供的一些接口来解决这个问题。

AppCache接口

AppCache提供了以下的事件接口:

  • checking:客户端正在检查manifest文件的更新,或者尝试下载manifest文件时触发。注意:这个事件总是首先触发的。
  • noupdate:客户端检查manifest文件,并且manifest文件没有更新时触发。
  • downloading:客户端发现manifest文件需要更新并开始更新,或者开始下载manifest中列举的缓存文件时触发。
  • progress:客户端下载manifest中列巨额的缓存文件时触发。
  • cached:manifest中的文件被下载,并且被缓存以后触发。
  • updateready:当新的缓存文件下载完成后触发,可以利用swapCache()来应用新的文件。

其中最重要的就是updateready这个事件,我们可以利用JavaScript绑定这个事件,在缓存更新的时候自动刷新来应用这些更新,例如:

  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);

AppCache的Debug

当我们在本地调试的时候,我们如何知道AppCache是否起效果,并缓存了哪些文件呢?Chrome的开发者工具提供了这些信息,打开开发者工具,在Resource => Application Cache中就可以看到缓存了哪些文件,如下图所示:

但是在这里不能对Cache进行删除操作,也不能看到其他网站的Cache。如果想看到所有网站的AppCache信息,并且删除其中某一个的话,可以进入chrome://appcache-internals/,这个管理页面会列出所有浏览器中的AppCache信息,包括manifest地址、缓存大小、更新时间、创建时间等等⋯⋯

打造离线使用的Mobile Web App的更多相关文章

  1. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  2. Web App Checklist

    Mobile Web App checklist 目标: 高性能Mobile Web App 一.UX和UI 操作节目与边框之间留空隙: 防止操作过程中,触发系统缺省行为,有些是无法disable的. ...

  3. [转]60fps on the mobile web

    Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowi ...

  4. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody

    最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...

  5. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  6. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  7. 利用JQuery Mobile开发web app

    什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...

  8. tms web core pwa让你的WEB APP离线可用

    tms web core pwa让你的WEB APP离线可用 tms web core允许创建渐进式Web应用程序(PWA).渐进式Web应用程序是为适应在线/离线情况,各种设备类型,最重要的是,让自 ...

  9. 2. 软件有很多种,也有各种分类办法: ShrinkWrap (在包装盒子里面的软件,软件在CD/DVD上); Web APP (基于网页的软件); Internal Software (企业或学校或某组织内部的软件); Games (游戏); Mobile Apps (手机应用); Operating Systems (操作系统); Tools

     选取对你最相关的一类软件,  请回答:(web app)  1) 此类软件是什么时候开始出现的, 这些软件是怎么说服你(陌生人)成为他们的用户的?  他们的目标都是盈利么?  他们的目标都是赚取用户 ...

随机推荐

  1. MyEclipse安装JS代码提示(Spket插件)

    近期需要大量使用JS来开发,但是MyEclipse2014自带的JS编辑器没有代码提示的功能,开发效率有点低,所以安装了一个Spket的插件,过程非常简单,SVN插件的安装比这个更简单. Spket插 ...

  2. make_head,,,pop_head,,,push_head,,,sort_head..

    STL中,有很多的排序函数模板供我们调用,省去我们自己编写一些排序过程的麻烦.本文是一篇关于STL中堆排序的一个介绍. 本文涉及的几个函数如下:make_heap(), push_heap(), po ...

  3. Bitwise AND of Numbers Range

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...

  4. VC++遇到的错误汇集

    1.在程序头添加#include "stdafx.h" 和#include <afx.h>时会出现以下错误 在Win32Project下使用,出现“error C118 ...

  5. Java for LeetCode 078 Subsets

    Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset must ...

  6. July 16th, Week 29th Saturday, 2016

    A long road tests a horse's strength and a long task proves a man's heart. 路遥知马力,日久见人心. Do you have ...

  7. jQuery常规选择器

    //简单选择器$('div').css('color','red'); //元素选择器,返回多个元素$('#box').css('color','red');//id选择器,返回单个元素$('.box ...

  8. linux网络编程_1

    本文属于转载,稍有改动,以利于学习. (一)Linux网络编程--网络知识介绍 Linux网络编程--网络知识介绍客户端和服务端         网络程序和普通的程序有一个最大的区别是网络程序是由两个 ...

  9. android之常用知识点(一)

    本文主要包括安卓一些常用的知识点 android常用的四种响应按钮点击事件的方法 android动态刷新界面 android常用的listView用法 android常用的handler的用法 and ...

  10. Python中通过cx_oracle操作ORACLE数据库的封闭函数

    哈哈,看来我的SQL自动化发布,马上就全面支持ORACLE,MYSQL,POSTGRESQL,MSSQL啦... http://blog.csdn.net/swiftshow/article/deta ...