[英]Firebase Hosting Flutter Web App not clearing Cache of first deploy
We build a flutter web app and deployed it via firebase hosting.我们构建了一个 flutter web 应用程序并通过 firebase 托管部署了它。 Unfortunately, we didn't configure any caching settings in our initial deploy.
不幸的是,我们没有在初始部署中配置任何缓存设置。
Now we deployed a newer version of our website but people still get the old website shown form the first deploy.现在我们部署了一个更新版本的网站,但人们仍然会看到第一次部署时显示的旧网站。 What we tried so far:
到目前为止我们尝试了什么:
Adding version no.添加版本号to our index.html:
到我们的 index.html:
<"script src="main.dart.js?version=1" type="application/javascript"></script>
Adding meta Data in our header in index.html:在 index.html 的标题中添加元数据:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
In our firebase.json we added the following headers:在我们的 firebase.json 中,我们添加了以下标头:
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=10"
}
]
}
]
All of these attempts were without any luck.所有这些尝试都没有任何运气。 We think that the problem is that the newer version doesn't have those entries in the files.
我们认为问题在于较新版本的文件中没有这些条目。 How can we force this to update to our newest version?
我们如何强制它更新到我们的最新版本? We even consider opening a new firebase project if that might help.
如果可能有帮助,我们甚至会考虑开设一个新的 firebase 项目。
Try this:尝试这个:
In your flutter app, in the index.html within the web folder, add a version number after the src="main.dart.js
在您的 flutter 应用程序中,在 web 文件夹内的 index.html 中,在
src="main.dart.js
之后添加版本号
So your new line will look like this:因此,您的新行将如下所示:
<script src="main.dart.js?version=1" type="application/javascript"></script>
Then increment the version number to 2, etc before you do each build.然后在每次构建之前将版本号增加到 2 等。
update june 2021: add this line in index.html as the last script in the body 2021 年 6 月更新:在 index.html 中添加这一行作为正文中的最后一个脚本
If you do not want to use the server worker caching, you can provide --pwa-strategy=none
.如果您不想使用服务器工作者缓存,您可以提供
--pwa-strategy=none
。 Otherwise, the app will update after the new version has been downloaded and the page revisited.否则,应用程序将在下载新版本并重新访问页面后更新。
flutter build web --release --pwa-strategy=none
It will Generate a service worker with no body.它将生成一个没有身体的服务人员。 This is useful for local testing or in cases where the service worker caching functionality is not desirable
这对于本地测试或不需要服务工作者缓存功能的情况很有用
By default, it is set to offline-first
: Attempt to cache the application shell eagerly and then lazily cache all subsequent assets as they are loaded.默认情况下,它设置为
offline-first
:尝试缓存应用程序 shell,然后在加载所有后续资产时延迟缓存它们。 When making a network request for an asset, the offline cache wil be preferred.在对资产进行网络请求时,将首选离线缓存。
I see Flutter now include this script by default in index.html if project is created recently which has serviceWorkerVersion
element which updates the version when compiling:我看到 Flutter 现在默认情况下在 index.html 中包含此脚本,如果最近创建的项目具有
serviceWorkerVersion
元素,该元素会在编译时更新版本:
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
When you build flutter web then in directory build/web generated a version.json file.当你构建 flutter web 时,然后在目录 build/web 中生成一个 version.json 文件。 just increase build_number and version in this file.
只需增加此文件中的build_number和版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.