我想使用 javascript
在按钮点击时“添加到主屏幕”功能。我的第一个问题是。是否可以使用 javascript
或 html/css
?
我读了太多帖子,但没有找到任何工作代码。我发现用户必须做的是转到 chrome 菜单和“添加到主屏幕”上的选项卡,否则 chrome 会提示用户并询问他们“添加到主屏幕”
最佳答案
下图显示了文件资源管理器中的项目结构。公用文件夹中包含所有文件。 list 文件在公用文件夹之外
接下来创建 Manifest.json 和 service-worker.js 文件,如下所示:
list .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>
现在运行您的项目,等待几分钟并重新加载您的页面。
尽情享受吧!
关于javascript - 使用 javascript 添加到主屏幕功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38826397/