javascript - Is it possible to link progressive web app to toast
问题描述
I have code for a toast like below.
html
<button onclick="launch_toast()">Show Toast</button>
<div id="toast"><div id="img">Icon</div><div id="desc">A notification message..</div></div>
css
#toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
background-color: #111;
color: #fff;
}
#toast #desc{
color: #fff;
padding: 16px;
overflow: hidden;
white-space: nowrap;
}
#toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 350px}
}
@keyframes expand {
from {min-width: 50px}
to {min-width: 350px}
}
@-webkit-keyframes stay {
from {min-width: 350px}
to {min-width: 350px}
}
@keyframes stay {
from {min-width: 350px}
to {min-width: 350px}
}
@-webkit-keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
@keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
js
function launch_toast() {
var x = document.getElementById("toast");
x.className = "show";
setTimeout(function(){
x.className = x.className.replace("show", "");
}, 5000);
}
I want to know how to link this code to my progressive web app so that on clicking the user is able to download the PWA. My site.
解决方案
您应该获得对该beforeinstallpromt
事件的引用,您可以promt
稍后在 toast 中调用该函数。您可以通过添加事件侦听器来获取此事件,如下所示(来源:Google):
let installPromptEvent;
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
因此,在您的launch_toast
函数中,您可以启动提示:
function launch_toast(){
installPromptEvent.prompt();
}
当然,这是假设您的清单配置良好并且您的服务工作者也可以注册。如果设备不支持这一点,beforeinstallprompt
则不会触发,您对的引用installPromptEvent
将是undefined
. 当 PWA 已安装在设备上时,该事件也不会触发。
推荐阅读
- redux - Flutter 小部件不是使用 redux 状态更改构建的
- c# - 如何修复 .net core 2.2 应用程序中未找到的 swagger.json
- ldap - Websphere 应用服务器 8.5。通过联合存储库上的自定义代码加载角色
- list - 使用 Prolog 读取记录列表并执行有关先前记录的持续计算
- c++ - 如何使用 clang-format 检查某些规则并返回有关偏差的信息?
- java - 在 javafx 的菜单栏中查找菜单项
- java - 计算均值和偏差的几乎完整代码
- sql - 使用密码和智能卡时处理多种登录类型的最佳数据库模式是什么?
- html - 引导轮播图像大小
- r - 如何计算数据框列中包含某些数字的单元格