Heroku部署的应用在Chrome中不显示更新但Safari中正常如何解决？

根因分析 #

该问题是Chrome静态资源强缓存导致的：Chrome默认会把加载过的HTML、CSS、JS等静态资源存在本地，缓存没到期之前不会主动找服务端要最新内容。手机端Safari的缓存规则和Chrome不一样，所以能正常展示更新后的内容，和你Heroku的部署流程没关系。

解决方法 #

• 先做快速验证：在Chrome打开的Heroku页面上，按Ctrl+Shift+R（Windows）或者Cmd+Shift+R（Mac）强制刷新，直接跳过本地缓存拉取服务端最新资源，如果这时候页面更新了，就100%是缓存问题。
• 永久解决1：给所有静态资源加版本号后缀，比如把main.css改成main.css?v=20240520，每次更新代码就改一次后面的版本号，Chrome识别到参数变了就会自动拉新资源。
• 永久解决2：在Heroku的服务端配置响应头，加上Cache-Control: no-cache的配置，要求浏览器每次请求都先去服务端核对资源有没有更新，不会直接用本地缓存。
• 永久解决3：如果你用了CDN服务，部署完之后手动刷一遍CDN的缓存，避免CDN节点还在返回旧的资源。

内容的提问来源于stack exchange，提问作者Richard Hart