HTML5遊戲和APP緩衝與版本更新

標籤：

概述

瀏覽器的緩衝可以說是一把雙刃劍，一方面可以大大加速使用者訪問的速度，節約頻寬；另一方面在版本更新時，緩衝又是一個頭疼的問題，瀏覽器有可能使用緩衝而非最新發行的資源。資源套件括js指令碼、CSS、圖片資源等。

使用HTML5開發App或者遊戲時，理想狀態應該是這樣的：使用者第一次訪問，下載和緩衝資源；再次訪問時，如果伺服器版本沒有更新，繼續使用緩衝的資源，不用重新下載；如果伺服器版本有更新，則下載更新的資源，然後進入App/遊戲。

HTTP的If-Modified-Since Header可以方便的檢查檔案是否有更新，我們只需要在伺服器配置支援If-Modified-Since Header。nginx預設開啟，apache需要手動設定一下。沒有更新的檔案，伺服器返回304，但不會傳輸檔案內容，所以請求返回會非常快；有更新的檔案，返回200，並傳輸檔案內容。

實際上，對於js指令碼、CSS、文本、JSON等檔案，可以使用XMLHTTPRequest下載，大部分瀏覽器會自動進行If-Modified-Since判斷，所以這一部分的版本更新和緩衝通常是沒有問題的；而對於圖片資源，XMLHTTPRequest不能載入Cross-domain的圖片，而且只能載入Base64格式圖片，會使圖片尺寸大幅增加。當然，也可以考慮使用XHR2，或者其他XHR的增強，但是相容性都還不是特別的好。通常情況下我們使用HTML5的Image元素，設定src屬性的方式下載圖片資源，但會直接使用緩衝的資源。

那麼問題來了，怎麼確保圖片資源的緩衝和版本更新沒有問題呢？（我使用的測試瀏覽器包括PC端的Chrome/Firefox/Safari，移動端的Safari/Chrome/瀏覽器/QQ瀏覽器，其餘平台未經測試，本文給出方案在其餘瀏覽器仍需測實驗證。）

方案1：直接更改圖片資源的訪問地址

簡單粗暴但是十分有效方法，每次版本更新之後將更新圖片的訪問地址直接改變。可以在訪問地址後加參數，也可以根據檔案的MD5值變更檔名，推薦直接改檔案名稱。需要做的工作就是寫指令碼自動計算MD5值，變更檔名，在js/html等檔案裡訪問地址也需要自動搜尋替換，一鍵發布，搞定。

不足之處：某些js指令碼可能有拼接組建檔案訪問地址的，例如某個特效序列幀，訪問地址為"assets/effect_{0}.png".format(index)，這種情況替換就會比較麻煩，需要特殊考慮。（此處我修改了String.prototype.format）

方案2. 使用HTML5的ApplicationCache

 ApplicationCache我在之前的博文也有介紹，版本更新時我們只需要對應manifest檔案的版本號碼和CACHE列表即可，瀏覽器會自動根據manifest檔案清單更新檔案，始終能保證使用者訪問到的資源都是最新的。寫指令碼自動產生manifest檔案，一鍵發布，搞定。

不足之處：如果圖片資源很大，我們不希望使用者下載所有的圖片才進入App/遊戲，有很多圖片資源可以進入後按需載入。那麼這部分按需載入圖片就要列入NETWORK列表，或者為了簡便直接設定NETWORK: *。問題在於，HTML5規範中NETWORK段是從來不進行緩衝的，那麼使用者再次訪問時，按需載入圖片資源需要重新下載。所以如果存在按需載入的圖片資源，ApplicationCache效果就差很多。

實際測試中，瀏覽器/QQ瀏覽器對於NETWORK段的資源並沒有遵循規範，也進行了緩衝，即使使用者退出再次訪問，按需也會使用緩衝的圖片，載入速度很快。所以ApplicationCache方案在這兩個瀏覽器就非常適合。Safari/Chrome則不會對NETWORK段資源緩衝。

方案3：在伺服器配置圖片資源的expire時間

第三種思路則是在伺服器返回請求時控製圖片資源的expire時間，大部分瀏覽器在檔案expire時間到了之後重新從伺服器請求下載檔案（瀏覽器/QQ瀏覽器例外，經測試即使expire之後依然會使用緩衝圖片。。）。我們的App/遊戲依然使用瀏覽器的普通緩衝而非ApplicationCache，測試中發現expire後瀏覽器請求下載檔案支援If-Modified-Since，所以只要始終標記圖片資源為expired，瀏覽器就可以自動檢查圖片是否需要更新。這種方案設定簡單，但是非常有效。

比如nginx設定：

location ~* \.(jpg|jpeg|png|ico)$ {　　expires -1;}

 

不足之處：在Safari/Chrome的效果非常好，但在對於部分緩衝機制比較強的瀏覽器（/QQ瀏覽器等），這種方案不可行。

總結

以上的方案是我在不停的摸索中總結出來的，但概括來說，緩衝和版本更新問題，並沒有找到一個完美的通用解決方案，瀏覽器實現和支援HTML5程度千差萬別，還是需要根據發布的平台對應選擇方案。如果您有更好的方案，歡迎交流和分享！

 

HTML5遊戲和APP緩衝與版本更新