防止页面缓存?

Era*_*ore 7 browser-cache flutter flutter-web

我注意到,当我使用 nginx 部署我的 flutter web 项目时,在执行“flutter build web”之后,如果我不删除缓存,旧文件仍然在我的 chrome 浏览器中。如果我部署更新,是否有办法强制用户自动刷新?

Moh*_*548 6

每个浏览器都会进行缓存,当您没有立即在客户端浏览器上看到更改时,这是完全正常的。浏览器确实需要一些时间才能意识到服务器上的代码已更改并需要更新其本地缓存。并且完全取决于客户端浏览器设置和客户端的连接速度。

但是,如果您的情况要求客户立即更新网站版本,则有一个解决方法。

main.dart.js文件如下所示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Flutter App</title>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

为了强制浏览器在每次需要时重新加载应用程序,请向 main.dart.js script-src 添加一个唯一参数(例如版本,尽管它可以是任何内容,甚至只是后面的随机数?)。新的index.html将如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Flutter App</title>
  </head>
  <body>
    <script src="main.dart.js?version=1" type="application/javascript"></script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

缺点:

  • 每次要部署时都必须手动添加递增的版本号。也许您可以编写一个脚本来执行此操作。

  • 如果客户端的互联网连接速度较慢,仍然需要时间。Lite当 Chrome 等浏览器显示网站的(缓存)版本直到互联网连接足够快时,就会出现问题。

  • 以前的版本仍然保留在客户端浏览器上直到超时