我创建了一个service-worker和manifest.json文件,以便为Chrome浏览器用户显示“添加到主屏幕”的Web App安装横幅.
它没有按预期工作.
这是我的manifest.json文件
{
"name": "MySite","short_name": "Mysite","start_url": "./?utm_source=homescreen","icons": [{
"src": "assets/cacheable/images/shortcut/120x120.png","sizes": "128x128","type": "image/png"
},{
"src": "assets/cacheable/images/shortcut/142x142.png","sizes": "142x142",{
"src": "assets/cacheable/images/shortcut/192x192.png","sizes": "192x192","sizes": "384x384","type": "image/png"
}],"orientation": "portrait","background_color": "#fff","display": "standalone","theme_color": "#fff"
}
解决方法
首先,让我们检查您的清单是否满足显示Web App安装横幅的要求.
要求
显示Web App安装横幅的完整(当前)要求是*：
>拥有一个Web应用程序清单文件：
>一个short_name
>一个名字(用于
横幅提示)
>一个144×144 png图标
>加载的start_url
>通过HTTPS提供服务(使用服务工作者的要求).
>访问至少两次,访问时间至少为五分钟.
好的,现在让我们假设这一切都是有效的.让我们继续测试.
测试
要测试您是否已正确安装,可以尝试以下步骤：
>打开Chrome DevTools,
>转到“应用程序”面板
>转到清单选项卡
>单击“添加到主屏幕”.
现在,您的浏览器会显示一个提示,询问您是否要将网址添加到您的内容中(在Chrome桌面上).
故障排除
如果在测试后您在控制台中收到以下错误：
No matching service worker detected. You may need to reload the page,or check that the service worker for the current page also controls the start URL from the manifest
然后请确保1.您的服务人员运行正常且没有错误,以及2.您的start_url与您加载的网站的实际网址相匹配.否则,你永远不会得到提示！
另外,
请注意,用户(以及您！)也可以通过(Android)Chrome菜单手动添加到主屏幕.不需要等待提示！我在主屏幕上添加了很多我每天都会使用的网站,而且我几乎看不到横幅！
*请注意,这些要求可能会不时发生变化(以前有过！). 2017年即将公布的“添加到主屏幕”的更新已于here公布
**另请注意,这些要求与本机应用安装提示有很大不同.**
