Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 角度-可安装性“;未检测到匹配的服务工作人员“;_Angular_Service Worker_Progressive Web Apps_Manifest.json - Fatal编程技术网

Angular 角度-可安装性“;未检测到匹配的服务工作人员“;

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从外部调用应用程序:

我在目前维护的PWA中遇到了一个重大问题:

问题是,PWA不能在生产环境中安装。 而在我的本地机器上,它工作正常(在本地主机上使用http服务器进行测试)

PWA由一个角度为8的应用程序组成。 ServiceWorker是使用
@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/但不能同时尝试这两种方法)。