Javascript PWA-提示输入;“添加到主屏幕”;我想什么时候?

Javascript PWA-提示输入;“添加到主屏幕”;我想什么时候?,javascript,progressive-web-apps,Javascript,Progressive Web Apps,我有一个PWA应用程序,可以正确地提示用户将该应用程序添加到主屏幕。问题是,这种自动行为是糟糕的用户体验,因为90%的时候,提示被认为是一个恼人的弹出窗口,用户只是关闭它 我认为更好的用户体验是,用户可以寻找一种“安装应用程序”的方式,比如在任何页面的页脚,你通常会看到“在Android上下载”或“在应用商店中获取应用程序”,或者,在一些特定的交互之后,当我觉得用户对我的应用程序有足够的兴趣并且可能有兴趣将其保存到主屏幕时,会出现一些弹出控件 我已经做了一些搜索,但我没有找到任何方法在需要时触发

我有一个PWA应用程序,可以正确地提示用户将该应用程序添加到主屏幕。问题是,这种自动行为是糟糕的用户体验,因为90%的时候,提示被认为是一个恼人的弹出窗口,用户只是关闭它

我认为更好的用户体验是,用户可以寻找一种“安装应用程序”的方式,比如在任何页面的页脚,你通常会看到“在Android上下载”或“在应用商店中获取应用程序”,或者,在一些特定的交互之后,当我觉得用户对我的应用程序有足够的兴趣并且可能有兴趣将其保存到主屏幕时,会出现一些弹出控件

我已经做了一些搜索,但我没有找到任何方法在需要时触发“添加到主屏幕”弹出窗口。我错过什么了吗?如何第二次或第三次提示“添加到主屏幕”

正在寻找Android和iPhone上的任何解决方案。

来自:

要指示渐进式Web应用可安装,并提供自定义的应用内安装流程,请执行以下操作:

  • 侦听安装前提示事件的
    beforestinstallprompt
  • 保存
    beforestinstallprompt
    事件,以便以后可以使用它触发安装流
  • 提醒用户您的PWA是可安装的,并提供按钮或其他元素来启动应用程序内安装流程
  • 让延迟提示;
    window.addEventListener('beforeinstallprompt',(e)=>{
    //防止迷你信息栏出现在手机上
    e、 预防默认值();
    //隐藏事件,以便稍后触发。
    延迟提示=e;
    //更新UI通知用户他们可以安装PWA
    showInstallPromotion();
    });
    
    然后标记安装选项并处理用户事件以返回延迟提示

    buttonInstall.addEventListener('click',(e)=>{
    //隐藏应用程序提供的安装升级
    hideMyInstallPromotion();
    //显示安装提示
    deferredPrompt.prompt();
    //等待用户响应提示
    deferredPrompt.userChoice.then((choiceResult)=>{
    如果(choiceResult.Output==‘已接受’){
    log('用户接受了安装提示');
    }否则{
    log('用户取消了安装提示');
    }
    })
    });
    
    谢谢,我没有意识到这一点,对于第一次打开应用程序的新用户来说,这是正确的答案。然而,我认为它部分地回答了这个问题,原因之一是:我应该如何处理已经拒绝安装的当前用户?我的理解是,提示只发生一次,如果一个人没有捕捉到它,它将永远被捕捉到。。。我想要的是为那些无意中关闭弹出窗口的用户重新配置安装提示。这有意义吗?它应该在以后的某个日期(一两个月)再次出现。如果用户说不,浏览器会尊重这一点。如果他们最近说不,你就没有能力再打扰他们了。如果他们清除你网站上所有信息的缓存,他们可能会很快看到。是的,我相信如果用户真的拒绝了权限,他们将永远也不会再被浏览器提示-这是一个不提前或断章取义请求的好理由。我不确定“为以后保存”这篇文章是如何在整个会话中起作用的。我可以想象,如果你捕获了事件,却从未向用户显示过,那么如果浏览器认为合适的话,它会在后续访问中再次出现——你可以捕获并再次返回。如果您没有保存的事件,您可以在每个浏览器中提供如何手动将PWA添加到主屏幕的演练(通常是加号图标)