PhoneGap 与 Application Cache应用缓存(转)

爱技术爱生活TAO 2016-01-07

一个想法
      在研究 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 页面本来就是不会动的,所以没有什么问题。
那如果你的页面是一个动态网页怎么办?

网上有这么几种方案,但感觉都不是很可取:


具体怎么选,到底用不用,就需要你自己去抉择了。

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 。
其实这个问题也是有办法解决的,因为缓存更新完毕后会触发一个事件,可以在这个事件里提醒用户是否要刷新页面?或者直接强制刷新?总之这里的问题其实不会很大。

相关推荐

malonely / 0评论 2013-03-07