【发布时间】:2020-05-27 08:27:52
【问题描述】:
我注意到,当我使用 nginx 部署我的 Flutter Web 项目时,在执行“flutter build web”之后,如果我不删除缓存,旧文件仍然在我的 chrome 浏览器中。如果我部署更新,有没有办法自动强制用户刷新?
【问题讨论】:
标签: flutter browser-cache flutter-web
我注意到,当我使用 nginx 部署我的 Flutter Web 项目时,在执行“flutter build web”之后,如果我不删除缓存,旧文件仍然在我的 chrome 浏览器中。如果我部署更新,有没有办法自动强制用户刷新?
【问题讨论】:
标签: flutter browser-cache flutter-web
每个浏览器都会进行缓存,当您没有立即在客户端浏览器上看到更改时,这是完全正常的。浏览器确实需要一些时间才能意识到服务器上的代码已更改并且需要更新其本地缓存。并且完全取决于客户端的浏览器设置和客户端的连接速度。
但是,如果您的情况要求客户立即获得网站的更新版本,则有一种解决方法。
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>
为了强制浏览器在每次我们需要时重新加载应用程序,向 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>
缺点:
您必须在每次要部署时手动添加递增的版本号。也许你可以为此编写一个脚本。
如果客户端的 Internet 连接速度较慢,它仍然需要一些时间。当 Chrome 等浏览器显示网站的 Lite(cached) 版本直到互联网连接足够快时,就会出现问题。
以前的版本在客户端浏览器上仍然存在直到超时
【讨论】: