Javascript 是否可以将渐进式web应用程序链接到toast

我有下面这样的祝酒词

html

js

---

我想知道如何将此代码链接到我的渐进式web应用程序，以便用户能够在单击时下载PWA。My.

您应该获得对安装前promt事件的引用，稍后您可以在toast中调用

promt

函数。您可以通过添加事件侦听器来获取此事件，如下所示（源：）：

---

当然，这是假设您的清单配置良好，并且您的服务工作者也可以注册。如果设备不支持此操作，则不会触发

beforestinstallprompt

，并且您对

installPromptEvent

的引用将

未定义。当PWA已经安装在设备上时，事件也不会触发。
您检查过吗？它使用一个弹出的本地toast并在PWA中的Action Center中显示通知。我认为在main.js文件中显示它是有意义的。您的清单和服务工作人员配置是否正确？那么我的答案中的代码应该可以用了为什么你要禁用这个按钮？这似乎是另一个问题。如果您只保留与问题中相同的按钮，代码应该可以工作。@JustineChacko浏览器支持可以找到，但我不知道。希望这种支持能很快得到改善。
<button onclick="launch_toast()">Show Toast</button>

<div id="toast"><div id="img">Icon</div><div id="desc">A notification message..</div></div>

#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;}
}

function launch_toast() {    
  var x = document.getElementById("toast");   
  x.className = "show";    
  setTimeout(function(){ 
    x.className = x.className.replace("show", ""); 
  }, 5000); 
}

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;
});

function launch_toast(){
  installPromptEvent.prompt();
}