时间戳

首页 > 解决方案 > Angular - 可安装性“未检测到匹配的服务人员”

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

问题描述

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

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

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

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

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

根据 chrome 开发工具，通过外部地址访问，服务人员运行正常。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 前面使用了反向代理，但我无法本地化它......

标签： angularservice-workerprogressive-web-appsmanifest.json

解决方案

将您的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。

推荐阅读