我创建了一个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",
"type": "image/png"
}, {
"src": "assets/cacheable/images/shortcut/192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "assets/cacheable/images/shortcut/192x192.png",
"sizes": "384x384",
"type": "image/png"
}],
"orientation": "portrait" ,
"background_color": "#fff",
"display": "standalone",
"theme_color": "#fff"
}
请让我知道如果我忘记添加任何东西。
4条答案
按热度按时间ffscu2ro1#
首先,让我们检查您的清单是否满足显示Web App安装横幅的要求。
显示Web App安装横幅的完整(* 当前 *)要求为:
Reference
好吧,现在我们假设这些都是有效的。让我们继续测试。
要测试是否已正确安装,可以尝试以下步骤:
1.打开Chrome DevTools,
1.进入应用面板
1.进入清单页签
1.单击【添加到主屏幕】。
现在,您的浏览器顶部会显示一个提示,询问您是否要将URL添加到您的内容(在Chrome桌面上)。
如果在测试后,您在控制台中出现以下错误:
未检测到匹配的服务工作程序。您可能需要重新加载页面,或者检查当前页面的服务工作线程是否也控制清单中的起始URL
那么请确保:
1.您的Service Worker工作正常且没有错误,并且
1.您的
start_url
与您的网站的实际URL匹配 * 加载 *。否则,你永远不会得到提示显示!
请注意,用户(和你!)也可以通过(Android)Chrome菜单手动添加到主屏幕。不需要等待提示!我在我的主屏幕上添加了很多我每天都要使用的网站,我几乎从来没有看到过横幅!
8yoxcaq72#
你的manifest.json看起来足够好了。@Extricate的上述观点是正确和完美的。
那么下一个问题是,您是否为您的应用实现了service-worker?
我在某个地方读到空的service-worker文件可以工作,但是当我尝试一个空的service-worker实现时,它说
所以我想,最新的 chrome 版本将不支持A2 HS提示应用程序安装横幅,如果你的服务工人不支持离线工作。
你可以尝试去Basic web app prompt,去chrome中的devtools,导航到应用程序选项卡。在那里你会找到manifest.json。在清单文件的LHS上,您可以看到“添加到主屏幕”。当你点击时,它会打印出来
PFA screenshot for same
rqenqsqc3#
在service worker js文件中添加以下代码:
gtlvzcf84#
可能是有用的,因为有类似的问题。安装信息栏出现了一次,再也没有出现过。
从Developers Google
当网站符合标准时,迷你信息栏将出现,一旦用户关闭,它将不会再次出现,直到足够的时间已经过去(目前为3个月)。