如何使通过Azure app Service托管的React应用程序的浏览器缓存无效



我有一个通过Azure应用程序服务托管的react web应用程序,它会非常频繁地更新,但访问该应用程序的浏览器似乎会非常积极地缓存javascript/html文件,因此我必须不断地硬刷新/清空缓存,并告诉应用程序的用户也这样做。我想避免最终用户在发生更改时必须手动清除缓存,App Service有没有办法告诉客户端使其缓存无效?我试着查找如何设置应用程序服务的缓存控制标头,但似乎不可能,应用程序是否需要位于应用程序网关或Azure CDN实例后面才能做到这一点?是否有一种建议的方法可以在部署完成时强制客户端删除最新的更改?

虽然您可以通过在部署时清除缓存来控制CDN缓存,但这不会清除任何本地浏览器缓存。

为了在不完全禁用缓存的情况下解决这个问题,您需要在前端实现一些逻辑来缓存本地缓存。

基本原理如下:

  • 部署一个可公开访问的文件,该文件包含最新部署版本的版本号
  • 在前端代码(例如javascript(中获取此文件,并将版本号与嵌入前端文件中的版本进行比较。如果版本不同,请删除本地缓存并强制重新加载页面

很少有库可以提供帮助。例如,如果你的前端是React应用程序,你可以考虑使用React缓存拦截器

最新更新