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
 页面本来就是不会动的,所以没有什么问题。

那如果你的页面是一个动态网页怎么办?

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

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

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应用缓存

    时间: 2024-08-30 02:50:59

    PhoneGap 与 Application Cache应用缓存的相关文章

    application cache 应用缓存

    这些应用还是要自己实现一遍,否则真不知道哪里会出问题. 客户端: <!DOCTYPE html> <html manifest = 'demo.appcache'> <head> <title>H5 application cache</title> <Meta http-equiv="Content-Type" Content="text/cache-manifest"> <link h

    HTML5应用程序缓存Application Cache详解.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application

    HTML5离线缓存(Application Cache)

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. Manifest 文件 manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓

    HTML5应用程序缓存Application Cache

    HTML5应用程序缓存Application Cache 什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存

    HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application

    HTML5应用程序缓存Application Cache.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application

    html5离线储存,application cache,manifest使用体验

    最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1. 一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所引用的css,js,img,但抱歉,这个没有办法做到.我

    Webkit关于HTML 5的Application Cache实现之研究

    因为工作关系,研究了一段时间的ApplicationCache.首先介绍一下与它相关的SQL DB Table的几个基本概念, CacheGroups : 就是一组资源,例如html, css, js, image,他们与一个cache的manifest关联,CacheGroups表包含的每个cache项有自己的ID以及相应的manifest的URL. CacheEntries, CacheResources : 这俩个表存储一些资源的元数据(metadta),例如HTTP header, mi

    转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1.  一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所