[Phonegap+Sencha Touch] 移动开发12 Sencha Touch打包发布网站的离线缓存版本

下文所述的ST即为Sencha touch。

在帖子《Sencha Touch初步使用》中介绍了sencha cmd(编译)打包的4种方式：

>sencha app build production

构建一个需要使用Web服务器来运行的应用程序，支持使用各种设备来访问该应用程序，同时该应用程序也是一个可离线使用的应用程序

>sencha app build testing

用于测试，只是把所有的js打包成一个app.js，而没有压缩js文件，便于测试

>sencha app build package

打包成可以本地运行而不需要服务器环境的版本

>sencha app build native

打包移动平台的安装包

下面主要说下sencha app build production，就是可以离线浏览的版本。

在非production build的模式下是没有缓存的，所以每次访问都会重新下载html, js和css文件等，很耗流量。

而production编译后，浏览器第一次访问的时候，会将app.js, app.css和app.json三个文件缓存在localstorage里；

而图片等其他资源则缓存在了Application Cache中(html5的manifest缓存技术)。

一、首先介绍缓存在localstorage里的几个文件：

在ST创建项目的时候，项目目录下有个文件app.json，这个文件保存了项目如何打包的配置信息。

其中有下面这样一段配置，

app.js、app.css有个update: 'full'

编译打包之后的app.json如下

可以看出来，多了一个version: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'，那一串字符是js或css文件的MD5值。

浏览器访问之后，会在localstorage中，添加几项，如下：

所以以后访问的时候，ST网站程序会首先去服务器下载编译后的app.json，解析其中每个文件的版本，和localstorage存储的进行比较，

如果发现版本没有变化，就无须再下载app.js和app.css了；

否则，才会下载，并在进入程序之后，有如下图的提示：

翻译过来：就是"程序已经升级到最新版. 是否重新加载?"

这样就只会消耗app.json这个文件那点流量了

二、Application Cache(html5的manifest缓存技术)

项目中的app.json里还有这样一段配置：

这段配置在最后编译打包的时候，会生成一个文件cache.appcache，叫做html5 cache manifest，就是html5缓存清单，如下：

上面的指定了index.html文件会被离线缓存，如果有其他文件需要被浏览器缓存，也可以配置进去。

浏览器访问之后，会缓存到Application Cache中，如下图：

打包离线版本须知

1、要缓存在localstorage中的js或者css文件，要设置update: 'full'。

其实还可以设置update: 'delta'，这个是增量修改，也就是ST程序会判断localstorage缓存的app.js和服务端新的app.js有多大的区别，然后根据这个修改一下下localstorage里的代码。

怎么知道这个缓存的文件和服务器新的文件有什么区别呢？

在每次production打包之后，ST会在{STApp}/build/prodution/deltas/app.js，目录下生成一个新版本的文件，文件名就是新文件的版本号，即xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。

举个栗子，比如这次打包新文件的版本是109c46bf45c4f0f3736c8d7c311ad6e845fe6239，那么最后会生成一个文件{STApp}/build/prodution/deltas/app.js/109c46bf45c4f0f3736c8d7c311ad6e845fe6239

此文件就是记录的新版本和旧版本的文件差异，看样子估计是从哪个字符开始到那个字符结束，替换成什么字符串。

不过我测试增量修改没有成功过，第二次打包完，我在用浏览器访问，总是报脚本eval出错，可能是脚本有中文的原因。

只好设置update: 'full'，虽然说的消耗流量有点多，因为一次要读取整个app.js重新写入localstorage，但是，正确的更重要吧。

2、缓存在Application Cache中的文件，要给IIS添加一个MIME类型，即html cache manifest文件的类型。

扩展名：.appcache

MIME类型：text/cache-manifest