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了, 所以抓包也看不到任何請求.