Question

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

问题是PWA无法在生产环境中安装。而在我的本地计算机上，它可以正常工作（在localhost上的http-server上测试）

PWA由一个角度为8的应用程序组成。已使用@angular/pwa package设置ServiceWorker。

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

访问该应用

角度应用的基准高度为<base href="/appname/">

根据chrome dev工具，通过外部地址访问的服务工作者正在正常运行。 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。

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

1 个答案: