問題場景
通過微信分享一個H5頁面給用戶,分享時頁面參數拼接在url中。頁面參數不同,頁面內容不同。
由於微信自帶瀏覽器會緩存頁面,當頁面打開次數多了,會發現分享的B參數的頁面,打開後仍是之前的A參數頁面。
在微信開放社區上查找一番,發現有些人也碰到類似問題,故綜合網上及實際開發,總結了以下幾個方案。
解決方案
1、手動清緩存
android清除緩存方式:打開http://debugx5.qq.com,點擊清除緩存。(親測對該問題無效)
ios退出登錄,然後重新登錄。(親測有一定概率效果)
手動清緩存的終極方法是卸載重裝。
這種方案對用戶很不友好
2、URL拼接時間戳
想着增加一個參數,使多個分享鏈接區分度更大,親測無效。
3、代碼頭部添加
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
親測無效
4、每次版本更新,路徑改變
網上看到博客,有人推薦每次修改,path加上時間,這樣頁面路徑也不同。
比如:https://test.com/202003111053/index.html
目測這樣的方案只對版本間有效,對同一版本內的同一頁面不同內容無效。且操作起來麻煩,故也未採用。
5、nginx配置rewrite
據我們多次試驗和觀察,微信對整個H5頁面緩存了,而不是其中的圖片,css等資源,所以對圖片,css加上版本控制可能對該問題無效。
推測微信對H5頁面緩存的判斷標準之一,就是pathname是否相同。
因此解決思路是改變pathname的同時又能不改變頁面的路徑。通過在nginx中配置rewrite,可以實現這樣的效果。具體操作可以查看之前的博客:
需要注意的是,這裏rewrite使用的flag爲last。
舉個例子:
rewrite ^/static/a.html$ /static/b.html last;
6、nginx設置Cache-Control
通過nginx,我們也可以通過cache-Control來配置緩存策略,可以設爲no-store,max-age=0來實現不緩存,每次都請求服務器結果。
風險點:未實測過,可能影響同一項目其他頁面的訪問效率。可以考慮配置二級域名,單獨對分享鏈接進行不緩存,其他頁面保持原配置不動。