Angular 角度-可安装性“;未检测到匹配的服务工作人员“;
我在目前维护的PWA中遇到了一个重大问题: 问题是,PWA不能在生产环境中安装。 而在我的本地机器上,它工作正常(在本地主机上使用http服务器进行测试) PWA由一个角度为8的应用程序组成。 ServiceWorker是使用Angular 角度-可安装性“;未检测到匹配的服务工作人员“;,angular,service-worker,progressive-web-apps,manifest.json,Angular,Service Worker,Progressive Web Apps,Manifest.json,我在目前维护的PWA中遇到了一个重大问题: 问题是,PWA不能在生产环境中安装。 而在我的本地机器上,它工作正常(在本地主机上使用http服务器进行测试) PWA由一个角度为8的应用程序组成。 ServiceWorker是使用@angular/pwa包设置的 生产环境的特点是,应用程序运行在反向代理之后。 因此,应用程序本身托管在内部公司机器上(无法从公司网络外部访问)。 反向代理提供了从外部对应用程序的访问,还添加了HTTPS(在内部机器上,只有http)。 使用以下url从外部调用应用程序:
@angular/pwa包设置的
生产环境的特点是,应用程序运行在反向代理之后。
因此,应用程序本身托管在内部公司机器上(无法从公司网络外部访问)。
反向代理提供了从外部对应用程序的访问,还添加了HTTPS(在内部机器上,只有http)。
使用以下url从外部调用应用程序:https://example-corp.com/appname
通过http://
angular应用程序的基本href是
根据chrome开发工具,通过外部地址访问,服务人员运行正常。
还将加载manifest.webmanifest文件。webmanifest中提供的应用程序图标在chrome开发工具中正确显示。
开发工具还声明该页面由https保护。
所以,安装时一切正常
但并没有给出可安装性。清单视图中的消息:
未检测到匹配的服务工作人员
我将清单中的开始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> ]
}
{
“名称”:“应用程序名称”,
“短名称”:“应用程序”,
“主题颜色”:“fafafa”,
“背景颜色”:“824CFF”,
“显示”:“独立”,
“范围”:“/”,
“开始url”:“/”,
“图标”:[]
}
我假设问题在于在应用程序或基本href前面使用反向代理,但我无法对其进行本地化…将范围
属性更改为与开始url
相同的值。因此,您的舱单将采用以下形式:
{
"name": "App-Name",
"short_name": "App",
"theme_color": "#fafafa",
"background_color": "#824CFF",
"display": "standalone",
"scope": "/appname/",
"start_url": "/appname/",
"icons": [ <omitted> ]
}
{
“名称”:“应用程序名称”,
“短名称”:“应用程序”,
“主题颜色”:“fafafa”,
“背景颜色”:“824CFF”,
“显示”:“独立”,
“范围”:“/appname/”,
“开始url”:“/appname/”,
“图标”:[]
}
省略范围
属性也可以完成此任务
请参阅。使用HTTPS URL运行时,您的PWA是否作为Chrome Lighthouse工具的有效PWA通过?运行它将提示您可能需要修复的内容(如果有)。好的,请尝试Lighthouse。发现有关可安装性的一些错误。清单中的起始url不正确。应为/appname/而不是“/”。更改了起始url。灯塔现在声明,应提供可安装性。开发工具的清单视图仍然会显示未检测到匹配服务工作人员的消息,就是这样!省略范围确实有效。以前应该尝试过此操作(仅尝试了start\u url:/appname/或scope:/appname/但不能同时尝试这两种方法)。