确定 PWA 安装状态

Question

如何确定我的 PWA 是否已安装？

我知道onbeforeinstallprompt当有机会提示安装时会触发该事件，这意味着该应用程序尚未安装。

我知道这onappinstalled会在安装应用程序的实际操作发生时触发，但在后续页面加载时，此事件不会再次触发。

我不能依赖于将结果存储onappinstalled在 LocalStorage 中，因为可以在安装应用程序时清除 LocalStorage，并且可以在不清除 LocalStorage 的情况下卸载应用程序。

display-mode 也没有用，因为即使在安装应用程序时也可以切换到浏览器模式。

我如何知道我的渐进式 Web 应用程序的安装状态？

Answer 1

我认为您已经知道问题的答案，您列出了所有可用的 API 和事件及其缺点，但您似乎正在寻找确认

所以，是的，没有办法100% 确定是否安装了 PWA，因为没有适用的API

然而，您提到的事件是互补的，因此通过将它们结合起来，您可以非常接近

let isInstalled = localStorage.getItem('pwaInstalled') === '1' || false;

if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
    // User is currently navigating on the PWA so yes it's installed
    localStorage.setItem('pwaInstalled', '1');
    isInstalled = true;
} else {
    //User is navigating in browser
    window.addEventListener('beforeinstallprompt', () => {
        localStorage.setItem('pwaInstalled', '0');
        isInstalled = false;
        //User can get an installation prompt meaning the app is not installed
    });
    window.addEventListener('onappinstalled', () => {
        localStorage.setItem('pwaInstalled', '1');
        isInstalled = true;
    });
}

像这样，你在本地存储中有标志 pwaInstalled ，告诉你应用程序是否安装，如果数据被清除，标志将丢失，但下次用户访问 PWA 或浏览器时，可以设置此标志再次正确进入存储

如果用户删除应用程序并访问浏览器，则该标志将被删除

请注意，这beforeinstallprompt event是实验性的（与 PWA 中的所有内容非常相似），它在某些支持安装 PWA 的浏览器中不会触发/存在，并且在其他浏览器中可能不完全准确（即使应用程序已经安装，有些浏览器也可能会触发它） ) 如果用户关闭它，它也将在 90 天内不会触发

但是，由于要显示 A2HS 模式/按钮，您依赖于beforeinstallprompt event. 如果它不触发也没关系，如果在已经安装了 PWA 的情况下触发，只会留下一个问题（如果您需要确定哪些浏览器不触发，我建议对具有不同 android 版本的所有受支持的浏览器进行测试）

总之，假设事件准确beforeinstallprompt触发，那么您对于应用程序是否安装的准确率应该接近 100%