停止在Flutter web Firebase hosting中保存缓存内存。

Question

我使用Flutter Web设计了一个Web应用，并使用Firebase Host进行托管。但是，在部署到Firebase后，它没有显示我代码的更改。它仍然显示我旧版本的Web应用程序。但我可以通过清除浏览器缓存或ctrl+刷新来解决此问题。但我不想每次部署到Firebase时都这样做。如何停止将我的Web应用程序保存在缓存中？

托管链接：https://frcovid19dashboard.web.app

- Faslur Rajah

---

非常感谢您的提问，这正是我正在寻找的。而且这个网站很棒，像渐进式设计和速度一样，真是美丽的工作。 - basudev nayak

Answer 1

在main.dart文件中添加版本号。每次进行需要浏览器清除缓存的更改时，请更改追加的版本号，然后上传更改，以便浏览器知道有更改并需要清除缓存。例如：

第一个版本：

<script src="main.dart.js?version=1" type="application/javascript"></script>

下一次进行更改：

<script src="main.dart.js?version=2" type="application/javascript"></script>

以此类推。查看链接了解更多。

- unbalanced_equation

---

这个方法对我没有用，请问还有其他的方式吗？ - Gustavo Contreiras

@GustavoContreiras 请尝试访问 https://dev59.com/V1IH5IYBdhLWcg3wEYhd#65110613 - iqfareez

我应该把这个放在哪里？因为当我把它部署到服务器上时，它会返回404错误，因为它无法检测到JS文件https://urlname.com/main.dart.js?version=1。 - ali

您可以在index.html文件中添加以下代码：scriptTag.src = 'main.dart.js' + "?version=" + getRelease();。感谢@unbalanced_equation，这个小技巧让我避免了很多麻烦。 getRelease()是一个方法，在应用程序部署时获取发布号码。 - Rinaldi Segecin

如果您正在使用nginx部署，可以添加一个default.conf.template文件，并使用sub_filter从环境变量中获取发布版本号并将其添加到index.html文件的标头中，然后创建一个JavaScript函数来查询标头 document.querySelector('meta[name="RELEASE_NAME"]')，但这是另一个话题。 - Rinaldi Segecin

Answer 2

另一种方法是通过HTTP头来防止缓存。对于Firebase Hosting，可以使用以下方式：https://firebase.google.com/docs/hosting/full-config#headers 我想你可以在firebase.json中的站点条目中设置类似这样的内容：

"headers": [
  {
    "source": "**",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "no-cache"
      }
    ]
  }
]

- klydra

---

对于那些想知道在哪里添加它的人，我也花了一分钟时间，将其添加到您Flutter项目中的firebase.json文件中。感谢@klydra。 - Manish

已添加到帖子中。很高兴它能帮到你，@ManishKumar :D - klydra

这对我没用。 - Frederic

鉴于这里的讨论 https://dev59.com/03VD5IYBdhLWcg3wNY1Z ，值得考虑使用 "value": "no-cache, no-store, must-revalidate" 替换此答案中的行 "value": "no-cache". - CKP78

它对我仍然不起作用。 - Prototype