HTML5離線應用無法更新的定位與解決

2021-06-18 17:19:43 字數 1644 閱讀 8450

一、些許前提

browser cache

ok, 鋪墊完畢. 我的應用主要在webkit核心的瀏覽器使用的, 為了方便起見, 下面的文字都是在chrome的環境下產生的.

繼續對比http的響應頭, 發現了不同之處, 如下:

測試環境

正式環境

於是我本地搭了乙個apache驗證, 把js的max-age設定為30秒, 果然在30秒內, 無論怎麼修改manifest和js, 都不會有對js的新請求, 它一直在向browser cache拉取, 而30秒之後, 就能去server拉去新的js了.

理論上這件事就應該到此為止了, 只要把正式環境的cdn都去掉cache-control就大功告成啦. 但是,去掉cache-control將大大浪費公司的頻寬! 而且deewii童鞋發現, 有一台放置vm(應用用到的乙個介面層, 是乙個頁面)的機器, 也設定了cache-control, 但是卻能正常更新, 這下又變得撲朔迷離了.

剛才我們對比響應頭發現了三個不同, 繼續看connection這東西, keep-alive是用來保持長連線的, 莫非是它的影響? 但是抓了幾個包, 卻發現vm所在機器返回的響應頭裡面是connection: keep-alive, 因此排除了這個影響.

最後只能把希望放在vary: accept-encoding 裡面了, 還是剛剛搭apache, 加上max-age=10368000, 加上keep-alive, 加上vary: accept-encoding, 修改manifest, 重新整理… 天, 竟然發起更新請求了! 原來你(accept-encoding)才是真正的**! 有沒有可能是本地才會這樣呢, 繼續用fiddler卡住正式環境的響應, 加上vary: accept-encoding, 果然重新整理之後也能正常更新了.

花了乙個晚上+乙個上午, 總算把這個無法更新的問題解決了. 雖然最後得到的結論很簡單, 只要在伺服器配個返回頭就行了, 但是找問題的時候相當痛苦. 歸根到底還是對http協議不夠了解, 學藝不精還得繼續努力.

ps: 在用firefox測試的時候, 發現它只有第一次開啟(或者刪掉離線資料之後)的時候會去請求manifest和其他離線資源, 之後它竟然完全不訪問manifest, 導致沒辦法更新, 網上也沒找到什麼好資料(網上也有遇到相同狀況的童鞋: ), 不知道有沒有童鞋了解的.

vary: accept-encoding

HTML5離線應用總結

html5離線應用總結 1 demo.js檔案編寫 2 demo.css檔案編寫 3 demo.htm檔案編寫,格式如下 4 manifest檔案編寫,命名為demo.foo。格式如下 cache manifest version 1.0.0.0 demo.html demo.js demo.css...

HTML5 儲存 離線web應用

cookie儲存 每次http請求都會傳送cookie資訊,會使web變慢 每次http請求的cookie資訊不加密傳輸,不安全 cookie資訊量最大不能超過4kb 檢測瀏覽器是否支援該特性 function supports html5 storage html5儲存是基於鍵值對的 方法 set...

HTML5 離線儲存

首先來講解下離線儲存的使用方法,說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。然後cache.manifest檔案的書寫方式,就像下面這樣 cache manifest v0.11 cache css style.css network resourse log...