我想要使用javascript 在按钮单击时“添加到主屏幕”功能。我的第一个问题是。可以使用javascript 或html/css 吗？
我阅读了太多帖子，但没有找到任何工作代码。我发现用户必须做的是转到“添加到主屏幕”上的 chrome 菜单和选项卡，否则 chrome 会提示用户并询问他们“添加到主屏幕”
【问题讨论】：
标签： javascript html google-chrome
下图显示了文件资源管理器中的项目结构。公用文件夹包含所有文件。并且清单文件位于公共文件夹
之外接下来创建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
self.addEventListener("fetch", function(event){
});
现在编辑 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">
在 body 关闭之前的同一文件中，将代码放在下面
<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>
现在运行您的项目，等待几分钟并重新加载您的页面。
尽情享受吧！
【讨论】：
2018 年 6 月，Google 推出了 Chrome 68（2018 年 7 月仍处于 Beta 版），允许您通过捕获事件“beforeinstallprompt”来显示模式添加到主屏幕对话框。
要触发此事件，您需要：
该网络应用尚未安装
满足用户参与启发式（当前，用户已与域交互至少 30 秒）
Web 应用清单必须具有：short_name 或 name、icon、start_url 和 display
必须是 https
已向“fetch”事件处理程序注册了一个服务工作者
更多细节和代码在：https://developers.google.com/web/updates/2018/06/a2hs-updates
添加到主屏幕条件：https://developers.google.com/web/fundamentals/app-install-banners/#criteria
【讨论】：
根据本页的最佳实践部分：https://developer.chrome.com/multidevice/android/installtohomescreen#best-practices
似乎其他开发人员建议您可以简单地提示用户如何添加到主屏幕，而不是直接尝试这样做。
编辑：做更多的挖掘，似乎自 chrome 42 以来，谷歌正在引入应用安装横幅。见：https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
但是，您的网络应用需要满足一系列要求，包括运行 service worker、将您的网站设为 https 以及让用户至少访问您的网站两次。
【讨论】：