一个想法
在研究 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 。
其实这个问题也是有办法解决的,因为缓存更新完毕后会触发一个事件,可以在这个事件里提醒用户是否要刷新页面?或者直接强制刷新?总之这里的问题其实不会很大。
相关推荐
phonegap离线缓存
PhoneGap Mobile Application Development Cookbook Preface 1 Chapter 1: Movement and Location: Using the Accelerometer and Geolocation Sensors 7 Introduction 7 Detecting device movement using the ...
This book will guide you through the process of creating a complex data-driven hybrid mobile application using PhoneGap, web technologies, and third-party plugins. A good foundation is critical, so ...
这是寒假时,做的一个使用phoneGap的跨平台手机应用App,使用绑定的新浪微博,希望大家喜欢,后期会添加,node.js 作为支持后台,在此跟大家分享一下。
第一讲 HTML5+PhoneGap跨平台移动应用软件开发 概述
html5+phonegap跨平台移动应用开发
提供了一系列丰富的API供开发者调用,只要你会HTML和Javascript或者Java语言,就可以利用PhoneGap提供的API去调用各种功能,PhoneGap就能让你可以制作出在各种手机平台上运行的应用,这对移动应用开发者来说无疑是个...
grunt-phonegap, 为Phonegap应用程序提供本地构建任务的Grunt插件 : Phonegap提供为 Phonegap应用程序提供构建任务的插件插件 grunt-phonegap 通过包装 Phonegap 3.0 命令行 接口,将Phonegap开发与 Grunt -based...
基于android ,phonegap调用照相机拍照,图片保存
基于PhoneGap的Android应用开发,转自网络,希望对phonegap环境搭建的朋友有些帮助
This book gives you practical lessons on how to build a world class mobile application using PhoneGap. Whether you are a brand new to mobile application development, a web developer expert, or a ...
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器...
构建跨平台APP HTML 5+PhoneGap移动应用实战
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速...使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。
App42-Android-Push-Sample-Using-PhoneGap关于申请此应用程序展示了如何在 PhoneGap Android 应用程序中使用 App42 JavaScript API 集成 PushNotification。 我们如何使用 App42 JavaScript PushNotification API ...
用于搭建跨平台应用,使用它中以创建出HTML5的本地化应用。 支持传感器,摄像头,获得联系人等功能。。。
实现android平台phonegap实例,新闻客户端。 连接mysql数据库 附带web project 导入eclipse,把数据库连接改下就OK,数据库连接在config里面配置
介绍PhoneGap的原理,优势,以及和其他平台的对比
iOS与web 开发结合, 利用phonegap ,大部分用到的插件的demo