文档章节

PhoneGap 与 Application Cache应用缓存

J
 Java编程思想
发布于 2014/07/24 11:22
字数 1981
阅读 489
收藏 6

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


本文转载自:http://www.html5cn.org/forum.php?mod=viewthread&tid=40272

共有 人打赏支持
J
粉丝 26
博文 164
码字总数 9502
作品 0
广州
程序员
私信 提问
让我用图示的方式来讲解下PhoneGap

我在很多技术大会,技术讨论研讨会,甚至就是与一些开发者在他们的办公室内都讨论过移动开发与PhoneGap。我发现有很多相同的问题总是被大家提到,所以我写下这篇文章来让所有开发者更好的理解...

彭博
2012/11/27
455
0
让我用图示的方式来讲解下PhoneGap

我在很多技术大会,技术讨论研讨会,甚至就是与一些开发者在他们的办公室内都讨论过移动开发与PhoneGap。我发现有很多相同的问题总是被大家提到,所以我写下这篇文章来让所有开发者更好的理解...

junwong
2012/03/30
15.7K
14
Phonegap:快速开发跨平台HTML5应用的胶水层

在开发移动应用的过程当中,如果你的应用只定位在一种平台上,这可不是一个好主意,但是为许多不同的平台 Building应用又是一件非常麻烦和非常不爽的事情,因为你会发现每一种手机平台都有自...

红薯
2011/07/12
2.2K
3
基于PhoneGap的Android应用开发-Get started

PhoneGap是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化,提供了一系列...

无鸯
2011/09/09
1K
1
PhoneGap的由来

2008年8月,PhoneGap在旧金山举办的iPhoneDevCamp上初次崭露头角。起名为PhoneGap是创始人的想法:“为跨越Web技术和iPhone之间的鸿沟牵线搭桥。”(Bridging the gap between the web and ...

生气的散人
2012/11/21
671
2

没有更多内容

加载失败,请刷新页面

加载更多

高度可配置的 Linux 内存守护程序 Nohang!

Nohang 是一个 Linux 守护程序,也是一个高度可配置的 OOM(内存溢出)阻止工具,适用于 Linux 系统,能够有效地防止内存不足的情况。 部分功能特性 具有良好注释的配置文件,配置方面(配置...

linux-tao
14分钟前
3
0
Java B2B2C多用户商城 springcloud架构(十六)用restTemplate消费服务

构架工程 创建一个springboot工程,去消费RESTFUL的服务。这个服务是 http:///gturnquist-quoters.cfapps.io/api/random ,它会随机返回Json字符串。 在Spring项目中,它提供了一个非常简便的...

itcloud
14分钟前
0
0
Linux 用户和用户组管理

Linux 用户和用户组管理 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统。 用户的账号一方...

城市之雾
23分钟前
2
0
[activiti]activiti6.x调用RESTful服务例子

package com.activiti6.demo;import org.activiti.spring.boot.SecurityAutoConfiguration;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoco......

Danni3
28分钟前
0
0
高度可配置的 Linux 内存守护程序 Nohang!

部分功能特性 具有良好注释的配置文件,配置方面(配置中有 38 个参数) 可以将 SIGKILL 和 SIGTERM 作为发送给 victim 的信号 支持 zram(使用 mem_used_total 作为触发器) 可定制的监控强...

linuxCool
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部