使用 javascript 添加到主屏幕功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38826397/
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
Add to home screen functionality using javascript
提问by Carlos
I want "add to home screen" functionality on button click using javascript. My first question is. Is that possible using javascriptor html/css?
我想使用javascript. 我的第一个问题是。可以使用javascript或html/css吗？
I have read too many post but did not find any working code. what I found is user have to do is to go to chrome menu and tab on "add to home screen" or chrome will prompt the user and ask them "add to home screen"
我读了太多帖子，但没有找到任何有效的代码。我发现用户必须做的是转到 chrome 菜单和选项卡上的“添加到主屏幕”或 chrome 会提示用户并询问他们“添加到主屏幕”
回答by Rishi
Image below shows the project structure in file explorer. A public folder has all the file is inside it. And the manifest file is outside the public folder 
下图显示了文件资源管理器中的项目结构。公用文件夹包含所有文件。并且清单文件在公共文件夹之外
Next create Manifest.json and service-worker.js files as shown below:
接下来创建 Manifest.json 和 service-worker.js 文件，如下所示：
Manifest.json
清单文件
{
"short_name": "BetaPage",
"name": "BetaPage",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
"src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"start_url": "/index.html"
}
service-worker.js
service-worker.js
self.addEventListener("fetch", function(event){
});
Now edit index.htmland add following code in head section
现在编辑index.html并在head 部分添加以下代码
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
In the same file put below code right before bodyclosing
在同一个文件中，在正文关闭之前放在下面的代码中
<script type="text/javascript">
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
Now Run your project, wait for few minute and reload your page.
现在运行您的项目，等待几分钟并重新加载您的页面。
ENJOY !
请享用 ！
回答by Kien Nguyen Ngoc
in June 2018, Google introduce Chrome 68 (still in Beta at July 2018) that allow you show a modal add to home screen dialog by catching event "beforeinstallprompt".
2018 年 6 月，Google 推出了 Chrome 68（2018 年 7 月仍处于 Beta 版），允许您通过捕获事件“beforeinstallprompt”来显示模式添加到主屏幕对话框。
To triggle this event, you need:
要触发此事件，您需要：
The web app is not already installed
Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
web app manifest must have: short_name or name, icon, start_url, display
https
Has registered a service worker with a "fetch" event handler
网络应用程序尚未安装
满足用户参与启发式（当前，用户与域交互至少 30 秒）
Web 应用清单必须具有：short_name 或名称、图标、start_url、显示
https
已使用“获取”事件处理程序注册了服务工作者
More detail and code at: https://developers.google.com/web/updates/2018/06/a2hs-updates
更多细节和代码：https: //developers.google.com/web/updates/2018/06/a2hs-updates
Add to home screen criteria: https://developers.google.com/web/fundamentals/app-install-banners/#criteria
添加到主屏幕标准：https: //developers.google.com/web/fundamentals/app-install-banners/#criteria
回答by Matt Way
According to the Best Practicessection of this page: https://developer.chrome.com/multidevice/android/installtohomescreen#best-practices
根据本页的最佳实践部分：https: //developer.chrome.com/multidevice/android/installtohomescreen#best-practices
- Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.
- 不要提示用户将您的应用添加到主屏幕。无法检测应用程序是否已安装运行。
It looks like other developers have suggested that you can simply prompt the user with instructions for how to add to the homescreen, rather than try and do it directly.
看起来其他开发人员建议您可以简单地提示用户如何添加到主屏幕，而不是尝试直接执行。
EDIT: Doing more digging, it seems that since chrome 42, google is introducing app install banners. See: https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
编辑：做更多的挖掘，似乎自 chrome 42 以来，谷歌正在引入应用安装横幅。请参阅：https: //developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
Your web app will need to meet a bunch of requirements however, including running a service worker, having your site as https, and having the user visit your site at least twice.
但是，您的 Web 应用程序需要满足一系列要求，包括运行Service Worker、将您的网站设为 https 以及让用户至少访问您的网站两次。
