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 开发工具，服务工作者运行正确。 manifest.webmanifest 文件也被加载。 webmanifest 中提供的应用程序图标在 chrome 开发工具中正确显示。开发工具还声明该页面受 https 保护。所以，一切都应该可以安装。

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

No matching service worker detected

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

有什么方法可以获取更多关于可安装性错误或未填写内容的 information/debug 输出吗？

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。

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

Angular - Installability "No matching service worker detected"

service-worker

progressive-web-apps

manifest.json