Html 为什么我的“添加到主屏幕”Web 应用安装横幅没有显示在我的 Web 应用中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43003424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my 'add to home screen' Web App Install Banner not showing up in my web app
提问by PPShein
I've created a service-worker and manifest.jsonfile in order to display an 'add to home screen' Web App Install Banner for Chrome Browser Users.
我创建了一个 service-worker 和manifest.json文件，以便为 Chrome 浏览器用户显示“添加到主屏幕”Web 应用程序安装横幅。
It is not working as intended.
它没有按预期工作。
Here is my manifest.jsonfile
这是我的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"
}
Please let me know if I forgot to add anything?
如果我忘记添加任何内容，请告诉我？
回答by Extricate
First, let's check if your manifest fulfills the requirements for showing Web App Install Banners.
首先，让我们检查您的清单是否满足显示 Web 应用安装横幅的要求。
Requirements
要求
Full (current) requirements for showing Web App Install Banners are*:
显示 Web 应用安装横幅的完整（当前）要求是*：
- Have a web app manifest file with:
- a short_name
- a name (used in the banner prompt)
- a 144x144 png icon
- a start_url that loads
- Is served over HTTPS (a requirement for using service worker).
Is visited at least twice, with at least five minutes between visits.
- 拥有一个包含以下内容的 Web 应用清单文件：
- 短名称
- 名称（在横幅提示中使用）
- 一个 144x144 的 png 图标
- 加载的 start_url
- 通过 HTTPS 提供服务（使用 Service Worker 的要求）。
至少被访问过两次，两次访问之间至少间隔五分钟。
Okay, so for now let's assume this is all valid. Let's move on to testing.
好的，现在让我们假设这都是有效的。让我们继续进行测试。
Testing
测试
To test if you've installed it correctly, you can try the following steps:
要测试您是否正确安装了它，您可以尝试以下步骤：
- Open Chrome DevTools,
- Go to the Applicationpanel
- Go to the Manifesttab
- Click Add to homescreen.
- 打开 Chrome 开发者工具，
- 转到应用程序面板
- 转到清单选项卡
- 单击添加到主屏幕。
A prompt should now show on top of your browser asking if you want to add the url to your things (on Chrome desktop).
现在应该会在您的浏览器顶部显示一个提示，询问您是否要将 url 添加到您的东西中（在 Chrome 桌面上）。
Troubleshooting
故障排除
If after testing you are getting the following error in your console:
如果在测试后您在控制台中收到以下错误：
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
未检测到匹配的 Service Worker。您可能需要重新加载页面，或者检查当前页面的 service worker 是否还控制清单中的起始 URL
Then please make sure that 1. Your service worker is functioning properly and without errors, and 2. Your start_urlmatches an actual url of your website that loads. Else, you will never get the prompt to show!
然后请确保 1. 您的服务人员运行正常且没有错误，以及 2. 您start_url的网站与加载. 否则，您将永远不会得到提示显示！
Additionally,
此外，
Do note that users (and you!) can also add to the home screen manually through the the (Android) Chrome menu. It is not required to wait for the prompt! I add a lot of websites I tend to use daily to my homescreen, and I hardly ever see a banner!
请注意，用户（和您！）也可以通过 (Android) Chrome 菜单手动添加到主屏幕。不需要等待提示！我在主屏幕上添加了很多我每天都会使用的网站，但我几乎看不到横幅！
* Do note that these requirements could change from time to time (they have before!). An update to 'Add to home screen' coming in 2017 has already been announced here
* 请注意，这些要求可能会不时发生变化（他们以前有过！）。2017 年“添加到主屏幕”的更新已经在这里宣布
** Also note that these requirements differ significantly from native app install prompts.**
** 另请注意，这些要求与原生应用安装提示有很大不同。**
回答by Parth Mistry
your manifest.json seems good enough. and the above mentioned points by @Extricate are correct and perfect.
你的 manifest.json 看起来已经足够好了。@Extricate 的上述观点是正确和完美的。
So the next question is have you implemented service-worker for your app?
I read somewhere that an empty service-worker file would work but when I tried an empty implementation of service-worker, it said that
那么下一个问题是您是否为您的应用程序实现了 service-worker？
我在某处读到一个空的 service-worker 文件可以工作，但是当我尝试一个空的 service-worker 实现时，它说
'Site cannot be installed: the page does not work offline'
So I suppose that latest chrome version would not be supporting the A2HS prompt for APP INSTALL BANNERS if you service-worker dont support offline working.
所以我想，如果您的服务工作者不支持离线工作，那么最新的 chrome 版本将不支持 A2HS 提示 APP INSTALL BANNERS。
You can try going to Basic web app prompt, go to devtools in chrome, navigate to Application tab. There you will find manifest.json. On LHS of the manifest file, you can see the ADD TO HOME SCREEN. When you click, it will print
您可以尝试转到Basic web app prompt，转到 chrome 中的 devtools，导航到 Application 选项卡。在那里你会找到 manifest.json。在清单文件的 LHS 上，您可以看到添加到主屏幕。点击后会打印
'Site cannot be installed: the page does not work offline'
回答by imsinu9
In your service worker js file add this one line of code:
在您的 service worker js 文件中添加这一行代码：
self.addEventListener('fetch', function(event) {});
回答by the_man
May be usefull, as had similar issue. The Install infobar appeared once and never again.
可能有用，因为有类似的问题。安装信息栏出现一次，再也没有出现。
From Developers Google
The mini-infobar will appear when the site meets the criteria, and once dismissed by the user, it will not appear again until a sufficient amount of time has passed (currently 3 months).
迷你信息栏会在网站符合条件时出现，一旦被用户关闭，它就会在足够长的时间（目前为 3 个月）过后才会再次出现。
