PhoneGap 与 Application Cache应用缓存

一个想法
      在研究 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

复制代码
既然没有标准的后缀名，那我就偷懒了，一开始尝试的时候我直接用了  .txt  格式。
Chrome 正常，iPhone 上的浏览器正常，可是 Android 手机上的浏览器不正常！
一开始我折腾了大半天，后来感受会不会是 mime type 的问题？因而我设置了一下，后来就正常了！看上去必定要设置一下 mime type，不要偷懒！
那后缀名究竟是什么呢？虽说没有标准，可是我发现 tomcat 的配置中默认已经有了，默认是  .appcache  ，而后看到网上的教程也都是它，因此基本上已经达成共识了。

请注意引用缓存清单的页面：

在折腾的过程当中，发现了一个很纠结的问题。
       个人  index.html  页面引用了一个  .css  文件，和一个  .appcache  文件，并把  .css  文件加入了缓存清单中。诡异的是， index.html  明明不在缓存清单中，却被缓存了起来。
那若是个人页面是一个动态网页怎么办？
查找相关资料后发现，这个页面必定要被缓存起来的，这不是 BUG，这是标准。
为什么？由于这个功能是用来作离线应用的，不把这个页面缓存起来就不能离线了。
还好咱们想作的是单页面应用程序， index  页面原本就是不会动的，因此没有什么问题。
那若是你的页面是一个动态网页怎么办？

网上有这么几种方案，但感受都不是很可取：

• 动态输出 .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 。
其实这个问题也是有办法解决的，由于缓存更新完毕后会触发一个事件，能够在这个事件里提醒用户是否要刷新页面？或者直接强制刷新？总之这里的问题其实不会很大。