Angular - 可安装性“未检测到匹配的服务人员”

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 保护。 所以，一切都应该可以安装了。

但没有给出可安装性。清单视图中的消息。 ：

未检测到匹配的服务人员

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

有没有什么方法可以获取更多信息/调试输出，说明什么是错误的或没有完全满足可安装性？

manifest.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 相同的值。所以你的清单将采用这种形式：

{
"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。