pwa能否通过JS主动弹出添加到主屏的提示？

Question

现在PWA的添加到主屏幕的机制比较的被动，希望能在每次打开PWA页面的时候提示添加到主屏幕（前提是没有安装到主屏幕），然后看到这篇文章：

https://blog.nfz.moe/archives...

意思是添加下面的代码就可以：

window.addEventListener('beforeinstallprompt', event => {
  event.userChoice.then(result => {console.log(result.outcome)
  })
})

实际测试结果发现，并没有弹出添加到桌面的提示。

Answer 1

刚在项目里实现完，发现有两个坑。

重点：

• 当用户未安装PWA时，用户点击页面任何位置，会触发PWA安装弹框，引导用户安装PWA。
• 用户点击取消后，该弹框不会二次自动触发，除非用户自己点击浏览器搜索栏的安装按钮，或者刷新页面。
• 用户安装PWA过的话，不会触发该逻辑。
• 实现该功能依赖的浏览器接口（beforeinstallprompt）不是标准特性，意味着以后这个功能以后可能会有改动、废弃。
• 这个功能只有Chrome系（Chrome、Edge）浏览器支持，Safari、Firefox不支持。

代码在这里（TypeScript版本，如果你是JS，去掉代码里的类型就行）：

const PWAInstallationGuide = () => {
  // @ts-ignore
  let deferredPrompt: BeforeInstallPromptEvent = 'init';

  // P.S. Cancel WPA installation dialog will trigger beforeinstallprompt
  window.addEventListener('beforeinstallprompt', function (e) {
    e.preventDefault();
    if (deferredPrompt === 'init') {
      deferredPrompt = e;
    }

    window.addEventListener('click', () => {
      if (!deferredPrompt) return;

      deferredPrompt.prompt();
      deferredPrompt = null;
    });
  });
};

PWAInstallationGuide();

这里有一个坑就是：在通过prompt()触发PWA安装弹框后，用户点击取消（不安装）后，会再次触发beforeinstallprompt。一定要记住这点。

Chrome版本：103.0.5060.134（正式版本） (x86_64)
不确定以后Chrome会不会改动这个逻辑

所以一开始我没有'init'的逻辑，就会导致每次用户点击页面，都会触发安装弹框，每次都会。

就是因为走完click事件之后，虽然执行了deferredPrompt = null;，但用户取消安装，就又走到了deferredPrompt = e;，然后用户点击页面，又会触发prompt()。

第二个坑： 浏览器触发beforeinstallprompt的时机很早，所以这段代码不能放在很后面，比如放在页面某个接口返回后就不行，因为浏览器已经触发过了，再写listener 晚了。

尽量放在index.html里，或者index.html下的某个js的顶层。

什么是顶层？

// 比如这是一个index.js文件

// 这算是在顶层执行
PWAInstallationGuide()

// 这不算
const a = ()=>{
    // ... 一大段业务代码
    fetch(`https://xxxxx`).then(()=>{
        // 这样就不行
        PWAInstallationGuide() 
    })
}

Answer 2

什么浏览器？目前这一事件只有Chrome浏览器支持：