内嵌网页缓存问题

MuYan2021-11-26web微信公众号钉钉微应用

开发公众号、APP 内嵌网页、微应用时难免会遇到服务器上的网页文件更新了，而用户手机访问的信息还是老的文件信息问题。

缓存问题也不可能让用户自己操作解决，所以还是需要程序兼容。

可以通过配置以下几步，改善缓存情况（能解决大部分场景下的缓存问题，如公众号\微应用）。

配置了以下几步后，也不是更新服务器文件后就能马上生效，一般需要用户进入网页后 5-10 分钟再重新进入该网页会显示新内容。（有时直接进入也可能已经更新了）

设置 Meta 标签清除页面缓存。（这个办法可以清除一般内嵌网页的缓存，但如公众号、微应用等内嵌还是有点欠缺）

<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" />

网页更新时，在 js、css 等资源文件后面加上时间戳 or 版本（普通静态网页），如是 Vue、React、Angular 等项目建议再加上哈希值（hash）。

例：html 引入了一个 test.js

// 原始引入方式的 url 路径
/test.js;
// 加上时间戳后 or 版本号后的 url 路径
/test.js?time=xxxxxxxx;
/test.js?v=1;

vue 项目：配置 filename、chunkFilename。（React、Angular 项目自行百度配置方法）

// vue.config.js
const Timestamp = new Date().getTime();

module.exports = {
  configureWebpack: (config) => {
    Object.assign(config.output, {
      filename: `static/js/[name].[contenthash:8].js?time=${Timestamp}`,
      chunkFilename: `static/js/[name].[contenthash:8].js?time=${Timestamp}`,
    });
  },
};

服务端配置 Cache-Control

Cache-Control参数：

no-cache: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有 max-age, 则缓存期间不访问服务器.
no-store: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源).
private(默认): 只能在浏览器中缓存, 只有在第一次请求的时候才访问服务器, 若有 max-age, 则缓存期间不访问服务器.
public: 可以被任何缓存区缓存, 如: 浏览器、服务器、代理服务器等.
max-age: 相对过期时间, 即以秒为单位的缓存时间.
no-cache, private: 打开新窗口时候重新访问服务器, 若设置 max-age, 则缓存期间不访问服务器.

- private, 正数的 max-age: 后退时候不会访问服务器.
- no-cache, 正数的 max-age: 后退时会访问服务器.

昵称

邮箱

网址

按正序
按倒序
按热度

内嵌网页缓存问题

预览: