Angular 10 PWA 中 Chrome 更新后的新警告“无法安装站点：页面无法脱机工作。从 Chrome 93 开始...”

Posted 2023-02-27

【中文标题】Angular 10 PWA 中 Chrome 更新后的新警告“无法安装站点：页面无法脱机工作。从 Chrome 93 开始...”

【英文标题】：New warning "Site cannot be installed: Page does not work offline. Starting in Chrome 93..." after Chrome update in Angular 10 PWA

【发布时间】：2021-06-03 23:09:26

【问题描述】：

Angular 10.2.4 Progressive Web App 在 Apache Tomcat 9.0.41 上通过 HTTPS 提供服务，并且可以离线工作。 更新到 Google Chrome 版本 89.0.4389.72（64 位）后，我们在首次加载时在 DevTools 中收到警告：

无法安装站点：页面无法脱机工作。开始于 Chrome 93，可安装性标准正在改变，本站将 不可安装。见https://goo.gle/improved-pwa-offline-detection 了解更多信息。

另外，在网络选项卡中，我看到两个失败的提取：

Name	Path	Url	Status	Type	Initiator
example.com	/	https://example.com	(failed) net:ERR_INTERNET_DISCONNECTED	fetch	ngsw-worker.js:2795
ngsw.json?ngsw-cace-bust=0.8890368493450784	/ngsw.json	https://example.com/ngsw.json?ngsw-cache-bust=0.8890368493450784	(failed)	fetch	ngsw-worker.js:2795

PWA 仍然可以毫无问题地安装。

从头开始创建新的 Angular 项目时也会显示此警告（对于 Angular 版本 10.2.4）：

ng new
ng add @angular/pwa

关于导致此警告和失败的网络获取...的任何想法？

【问题讨论】：

我在边缘 89 有同样的错误

嗨。我在 angular github 中发现了这个关于这个警告的问题 github.com/angular/angular/issues/41085

【参考方案1】：

将 'manifest.webmanifest' 中的 'start_url' 更改为 '/index.html' 是我的解决方案 (see issue on Github)：

"start_url": "/index.html",

DevTools 中的警告不再出现，我仍然能够安装 PWA。在正式修复之前，我将使用此解决方案作为解决方法。

更新 (17/04/2021)：Google 刚刚更新了 blog post 并撤回了更改。该警告将在 Google Chrome v90 周围删除。所以我们可以撤消对 service worker 的更改（因为 Angular service worker 已经离线工作了）。

【讨论】：

我不确定“./index.html”是否应该是正确的值，有人抱怨它。我将它设置为绝对值“/index.html”并且它起作用了。

你完全正确。我把它改成了绝对值。非常感谢！