通过添加一点蛮力方法,我设法解决了我的部署后完整性错误。这可能不是最好的解决方案,但适用于我的情况。
首先,在 service.worker.js 中,我将文件 index.html 标记为不被缓存:
const offlineAssetsExclude = [/^service-worker\.js$/, /^index\.html$/];
然后我将 service-worker-assets.js 包含到加载的脚本中。我需要它来访问每次构建时自动生成的assetsManifest.version。然后我将它与保存在 localstorage 中的版本进行比较,清除所有应用程序缓存,将新版本保存到 localstorage 并强制重新加载。
请注意,这种方法将在检测到新版本时强制下载完整的应用程序,从而避免完整性错误,但代价是可能会重新下载不需要的文件。
<script src="service-worker-assets.js?s=v1.12"></script>
<script>
if (localStorage.getItem('currentVersion') != self.assetsManifest.version) {
window.caches.keys().then(function (keyList) {
keyList.forEach(key => window.caches.delete(key));
});
localStorage.setItem('currentVersion', self.assetsManifest.version)
document.location.reload(true);
}
</script>
另请注意,资产列表文件中添加了 ?s=v1.12 后缀。该值必须在每次部署期间递增。它确保浏览器不会缓存旧文件,并且我们拥有最新版本。
由于我是个偏执狂,我为许多其他我不想在部署后保持缓存的文件添加了相同的后缀
<link href="Project.Client.styles.css?s=v1.12" rel="stylesheet" />
...
<script src="javascript/site.js?s=v1.12"></script>
<script src="_framework/blazor.webassembly.js?s=v1.12"></script>