检查用户是否已经在Chrome的主屏幕上安装了PWA？

编程入门行业动态更新时间:2024-10-27 18:25:33

本文介绍了检查用户是否已经在Chrome的主屏幕上安装了PWA？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在尝试在渐进式Web应用程序上创建添加到主屏幕按钮，如 Chrome的文档。

I'm trying to create an "Add To Home Screen" button on my progressive web app, as described in Chrome's documentation.

我通常遵循规定的模式，其中有一些隐藏按钮，当Chrome的 beforeinstallprompt 事件显示时火灾。一旦事件触发，我将捕获该事件，然后单击我自己的安装按钮后，使用该事件开始本机安装对话框。示例代码如下：

I'm generally following the prescribed pattern, where I have some hidden button which is displayed when Chrome's beforeinstallprompt event fires. I capture the event once it fires, and then use the event to begin the native install dialogue once my own install button is clicked. The sample code is below:

let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { // Prevent Chrome 67 and earlier from automatically showing the prompt e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; // Update UI notify the user they can add to home screen btnAdd.style.display = 'block'; }); btnAdd.addEventListener('click', (e) => { // hide our user interface that shows our A2HS button btnAdd.style.display = 'none'; // Show the prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt deferredPrompt.userChoice .then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } deferredPrompt = null; }); });

我遇到的问题是我不想显示我的安装按钮（ btnAdd ），如果用户已经将Web应用程序安装到其主屏幕上，并且我在确定如何检查该情况下遇到麻烦。

The issue I'm running into is that I don't want to show my install button (btnAdd) if the user has already installed the web app to thier home screen, and I'm having trouble figuring out how to check for that scenario.

我希望修改以下代码：

因此，如果用户已经安装，则不会显示安装按钮。但这似乎不起作用。看来，如果他们还没有做出选择，则访问 userChoice 只会直接用本机对话提示用户。

So that the install button won't be displayed if the user has already installed. But this doesn't seem to work. It appears that if they haven't made a choice already, accessing userChoice just prompts the user directly with the native dialogue.

我不太确定 beforeinstallevent 的工作方式，因此，这甚至不是一个好的策略。理想情况下，我希望它可以像 navigator.serviceWorker.ready（）这样工作，它返回一个Promise而不是使用浏览器事件来尝试确定何时准备就绪。

I'm not really sure how the beforeinstallevent works, so this might not even be a good strategy. Ideally I was hoping this would work something like something like navigator.serviceWorker.ready(), which returns a Promise rather than using browser events to try and figure out when stuff is ready.

无论如何，在我显示自己的主屏幕安装按钮之前，是否有任何想法可以检查用户是否已安装到主屏幕？

In any case, are there any ideas on how I can check that the user has installed to home screen before I show my own home screen install button?

编辑：正如Mathias所说，在显示按钮之前检查事件就足够了。我相信我遇到的问题是使用本地主机的结果，即使在安装后，该主机似乎仍不断触发 beforeinstallprompt 事件，这不是预期的行为。托管代码解决了该问题。

As Mathias has commented, checking for the event before showing the button should be sufficient. I believe the issue I was having is a result of using localhost, which appears to continually fire the beforeinstallprompt event even after installation, which is not the intended behavior. Hosting the code solved the issue.

推荐答案

也许，在拦截自动弹出窗口之前，不显示按钮？

Perhaps, don't show the button until you intercept the automatic pop-up?

或在您的代码中，检查窗口是否是独立的如果是，则无需显示按钮

or In your code, check to see if the window is standalone If it is, you need not show the button

if (window.matchMedia('(display-mode: standalone)').matches) { // do things here // set a variable to be used when calling something // e.g. call Google Analytics to track standalone use }

我的示例测试器在这里 a2hs.glitch.me