javascript - 是否可以将渐进式网络应用程序链接到 toast

Question

我有像下面这样的 toast 代码。

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

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

Answer 1

您应该获得对 beforeinstallpromt 事件的引用，稍后您可以在 toast 中调用 promt 函数。您可以通过添加事件监听器来获取此事件，如下所示(来源: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();
}

当然，这是假设您的 list 配置良好并且您的 service worker 也可以注册。如果设备不支持此功能，则不会触发 beforeinstallprompt，并且您对 installPromptEvent 的引用将为 undefined。当 PWA 已安装在设备上时，该事件也不会触发。