解决小程序 H5 缓存问题

解决小程序 H5 缓存问题

最近有用户反馈某个功能在小程序上找不到,经过排查发现这个功能通过 web-view 嵌入到小程序中的,有部分用户的 H5 页面不是最新版本的。

第一反应认为有可能是缓存问题,于是提议用户尝试以下方式:

  • 退出小程序同时移除小程序再打开
  • 关闭微信重新打开再进入小程序
  • 手动清除浏览器缓存

后续用户反馈问题已解决。但这只是治标不治本,需要从根源上解决问题。

上面的问题很明显是 web-view 由于某种原因没有及时更新缓存导致的,在这就不深入强缓存、协商缓存等知识点了。

解决思路

后端存储相应的版本信息,在小程序加载时获取最新的版本信息。

1
2
3
4
5
onshow: () => {
this.fetchVersionInfo();
},

fetchVersion: () => {}

每次更新时,同时更新对应 web-view 的地址,可以在 URL 中增加版本号。

1
https://demo.com/page/${version}/activity

在 Nginx 中对改 URL 进行路由匹配

1
2
3
4
location ~* /page/\d/activity {
root $root_proj/activity;
access_log off;
}