Angular - 可安装性 "No matching service worker detected"

Question

我在目前维护的 PWA 中遇到了一个主要问题:

问题是，PWA 无法安装在生产环境中。而在我的本地机器上，它工作正常(在本地主机上使用 http-server 测试)

PWA 由一个 Angular 8 应用程序组成。ServiceWorker 设置为 @angular/pwa package .

生产环境的特点是，应用程序在反向代理后面运行。因此，应用程序本身托管在内部公司机器上(无法从公司网络外部访问)。反向代理提供从外部访问应用程序并添加 HTTPS(在内部机器上，只有 http)。使用此 url 从外部调用该应用程序:https://example-corp.com/appname内部应用程序由 http://<internal-ip>/ 访问

angular 应用程序的 Base-href 是 <base href="/appname/">

根据 chrome 开发工具，通过外部地址访问，service worker 运行正常。manifest.webmanifest 文件也被加载。 webmanifest 提供的应用程序图标在 chrome 开发工具中正确显示。开发工具还声明该页面受 https 保护。因此，一切都应该可以安装。

但是没有给出可安装性。 list View 中的消息。 :

No matching service worker detected

我将 list 中的 start_url 更改为“appname”，但没有成功。ngsw-worker.json 和 webmanifest 存储在应用程序的根目录中。

有什么方法可以获取更多信息/调试输出，了解安装时出现的问题或未完成的问题？

list .webmanifest:

{
"name": "App-Name",
"short_name": "App",
"theme_color": "#fafafa",
"background_color": "#824CFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [ <omitted> ]
}

我认为问题出在应用程序或 base-href 前面使用反向代理，但我无法将其本地化...

Answer 1

将 scope 属性更改为与 start_url 相同的值。所以你的 list 将采用这种形式:

{
"name": "App-Name",
"short_name": "App",
"theme_color": "#fafafa",
"background_color": "#824CFF",
"display": "standalone",
"scope": "/appname/",
"start_url": "/appname/",
"icons": [ <omitted> ]
}

省略 scope 属性也可以完成这项工作。

参见 https://developers.google.com/web/fundamentals/web-app-manifest?hl=en .