progressive-web-apps - 确定 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 或浏览器时，可以设置此标志正确再次入库

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

Note that the beforeinstallprompt event is experimental (pretty much like everything in PWA) it does not fire/exist in some browsers that do support the installation of PWA and may not be fully accurate in the others (some may fire it even if the app is already installed) It will also not fire for 90 days if the user has dismissed it

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

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