H5:微信分享頁面緩存嚴重的解決方案

問題場景

通過微信分享一個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來實現不緩存,每次都請求服務器結果。

風險點:未實測過,可能影響同一項目其他頁面的訪問效率。可以考慮配置二級域名,單獨對分享鏈接進行不緩存,其他頁面保持原配置不動。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章