一个想法
在研究 PhoneGap 的时候一直在想一个问题，怎么提高移动网络下的网络性能？特别是静态文件，多次加载完全是浪费。
HTTP 协议中控制缓存也比较纠结，总会有个 304 请求，而且各种协议，各种 HTTP header，都不统一。而且 304 实际上也是进行了一次 HTTP 请求的。
因为用的是 PhoneGap，可以用 Navtive Code 来进行扩展，所以想到一个点子，是否能有一个静态文件升级功能？远程有一个文件标记着静态文件包的最新版本，如果有更新，这个插件就自动把静态文件下载到本地。然后 PhoneGap 打开的页面使用本地缓存的静态文件即可。完全不需要任何请求！
HTML Application Cache
正当我纠结怎么实现的时候，发现了 HTML5 种已经有类似的东西了，而且实现的功能和我的需求一模一样。因为它就是为离线应用设计的。
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。
使用缓存接口可为您的应用带来以下三个优势：
应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。
离线浏览 – 用户可在离线时浏览您的完整网站
速度 – 缓存资源为本地资源，因此加载速度较快。
服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
详细介绍：http://www.html5rocks.com/zh/tutorials/appcache/beginner/
一些坑后缀与 mime type：
上面的那篇文章说，缓存清单文件并没有标准的后缀名，你可以自定义一个后缀名并在你的 Web 服务器上指定 mime type。
例如：
AddType text/cache-manifest .appcache
动态输出 .appcache 缓存清单，实现缓存功能：http://www.sitesketch101.com/creating-a-dynamic-html5-cache-manifest/
利用 iframe 事先动态页面的 Application Cache 功能：http://labs.ft.com/2012/11/using-an-iframe-to-stop-app-cache-storing-masters/
具体怎么选，到底用不用，就需要你自己去抉择了。
Android 下 PhoneGap 应用程序的问题：
又是 Android 下，我在 iPhone 中，PhoneGap 跑起来后一点问题都没，上了 Android 就死活不成功。最郁闷的是， Application Cache 会有几个事件，可以通过这几个事件判断 Application Cache 是否正常。在 Android 的浏览器下，功能是好的，事件也被正确触发了。但是上了 PhoneGap 后，事件被正确地触发了，但是功能却总是有问题。后来同样是在网上找到了解决方案：
public class HelloWorld extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
super.init();
android.webkit.WebSettings settings = super.appView.getSettings();
String appCachePath = this.getCacheDir().getAbsolutePath();
settings.setAppCachePath(appCachePath);
settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
// super.loadUrl(Config.getStartUrl());
super.loadUrl("http://192.168.0.104:8080/cache/index.html");
}
}
为什么要多加这些代码？因为 Android 中的 Web浏览器控件默认是禁用 Application Cache 功能的。加上以上代码后恢复正常。
可让我郁闷的是，PhoneGap 2.5 发布的时候，说自己修复了这个问题了。之前的版本的确需要手动开启 Application Cache，2.5中已经把这个问题修复了。可我在 2.6 中依然遇到了这个问题， 十分诡异…
跨域：
Application Cache 和 ajax 请求一样无法跨域，PhoneGap 中一般是用一个本地的 index 文件，然后把类库也打包在本地，而一些业务的 js 和经常变的 css 就放在服务器上。这样的话，就遇到跨域的问题了，index 文件和 .appcache 文件不在同一个域下。
很纠结，很难解决，后来一想：打包在本地不就是为了缓存起来加快访问速度吗？Application Cache 也是解决同样的问题。既然有了 Application Cache，那为何还要把一些静态文件打包放在本地呢？嗯，把整个网站都放到服务器上，包括index.html ，然后问题就解决了。
禁用 Application Cache：
在折腾的过程中，我想把缓存去掉了。于是我把 index.html 中对缓存清单的引用去掉了，但是却没有效果！后来仔细想了一下，浏览器更新的流程如下：
先缓存了 index.html 和 .css 文件，我把 index.html 中对缓存清单的引用去掉了，可是 .appcache 文件还在服务器上。浏览器打开页面的时候直接去访问 .appcache 文件，发现没有变更，就认为缓存没有更新了。所以在这种场景下，修改 index.html 是没有效果的，你必须把 .appcache 删掉后才可以禁用 Application Cache。
完整更新和二次刷新：
下面说的是两个暂时无法解决的问题，是 Application Cache 的机制所决定的。首先是完整更新的问题，如果你的缓存清单更新了，它会把清单里的所有静态文件下载一遍。虽然问题也不大，但是为何不能指定更新的文件呢？可它的机制目前就是这样的，无解。
另一个很郁闷的问题：如果你的缓存清单更新了，用户需要刷新2次后才能用到你最新的文件。
第一次刷新会更新缓存的文件，但是页面已经加载好之前的文件了，js 也已经执行完了。
第二次刷新才会用到更新好的文件。
仔细想想这样做也是有道理的，因为不可能每次刷新都去等缓存清单加载后再去加载。加载完成后也不可能再把新的文件替换并执行，特别是 js 。
其实这个问题也是有办法解决的，因为缓存更新完毕后会触发一个事件，可以在这个事件里提醒用户是否要刷新页面？或者直接强制刷新？总之这里的问题其实不会很大。
PhoneGap 与 Application Cache应用缓存,布布扣,bubuko.com
PhoneGap 与 Application Cache应用缓存
原文：http://my.oschina.net/u/1157906/blog/294416