HTML5离线应用没法更新的定位与解决

些许前提

最近在制做一个Web应用, 其中用到了HTML5的离线应用功能(offline application), 离线应用的概念就再也不阐述, 能够查看这两篇文章:

http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

http://www.mhtml5.com/2011/02/583.html

这里主要讨论它的更新问题. 首先浏览器是有两部分cache的, browser cache 和app cache, browser cache就是常说的浏览器缓存, app cache是离线应用的缓存.

其中browser cache的机制你们都很清楚了, 其中离线应用的更新是: 除了第一次访问是直接拉取server的, 而后后台更新app cache以外, 其他的状况都是直接访问app cache. 所以, 要若是离线应用的代码更新了, 只有下次打开或者刷新才会生效.

2、找出凶手

OK, 铺垫完毕. 个人应用主要在webkit内核的浏览器使用的, 为了方便起见, 下面的文字都是在chrome的环境下产生的.

在测试机测试离线功能时, 咱们发现, 若是更改了js文件且更新了manifest, 刷新两次(嗯, 你没看错,是两次, 第一次于后台更新app cache, 第二次应用新cache)就会应用上新的代码. 可是, 发布到正式环境以后, 就不能更新了, 把F5按烂了, 也没什么变化. 固然这是删除掉app cache是没问题的, 可是咱们没办法要求用户这样作.

经过抓包发现, 不管哪一个环境, manifest更新了, 浏览器端都能抓取新的, 在chrome的控制台也能看到更新app cache的log, 所以不是manifest自己被缓存了的缘由. 可是在正式环境里面, 拉取了新的manifest以后, 就没有任何更新的请求出去, 太诡异了.

继续对比http的响应头, 发现了不一样之处, 以下:

测试环境                                                            正式环境

HTTP/1.1 200 OK                                                      HTTP/1.1 200 OK

Date: Thu, 05 Jan 2012 05:56:38 GMT                    Date: Thu, 05 Jan 2012 05:56:38                                                                                    GMT

Server: NWS_HY_P91                                              Server: nginx

Last-Modified: Thu, 05 Jan 2012 04:29:52 GMT      Last-Modified: Thu, 05 Jan 2012                                                                                  04:29:52 GMT

Expires: Thu, 05 Jan 2012 05:56:38 GMT                Expires: Thu, 05 Jan 2012 05:56:38 GMT

Connection: close                                                  Connection: keep-alive

Content-Type: application/javascript                    Content-Type:                                                                                                              application/javascript

Vary: Accept-Encoding                                       Cache-Control: max-                                                                                                     age=10368000

能够看到, 两个环境里面有3个不一样, connection, vary, cache-control. 第一眼望去, 感受就多是cache-control的问题. 因而用fildder把响应卡住, 把max-age改为0, 结果呢, 它正常更新了! 所以猜想app cache的更新应该是先去browser cache找, 找到了该文件, 而且没过时, 就再也不访问server了, 所以抓包也看不到任何请求.