I have a popup on my webpage prompting users to install our PWA. However, once it is installed I don't want to ask them again.
How can I check to see if the PWA is already installed?
I have a popup on my webpage prompting users to install our PWA. However, once it is installed I don't want to ask them again.
How can I check to see if the PWA is already installed?
Share Improve this question asked Jun 25, 2019 at 13:24 A. HasemeyerA. Hasemeyer 1,7344 gold badges25 silver badges59 bronze badges 2- Isn't this handled by the phone's software? developers.google./web/fundamentals/app-install-banners/… – evolutionxbox Commented Jun 25, 2019 at 13:33
- Yes it is, however, in newer versions of Chrome the banner does not pop-up automatically. I am actually using that page as a reference and capturing the prompt so display it myself. The issue is my system has untechy people using it and they will have problems finding the option to install themselves. – A. Hasemeyer Commented Jun 25, 2019 at 13:38
3 Answers
Reset to default 7The following code fixed this issue. First I have my button with id="downloadli"
and by default it is hidden or style="display:none"
Since you have to add a listener to the beforeinstallprompt
to trigger the install if you piggy back off that action to display the download button it will only work when install is possible.
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;
$('#downloadli').css('display', 'block');
});
This way if the app is already installed the beforeinstallprompt
is not added to the page and the inside of this block is not run.
You can't check if current user install PWA, But you can check if user is with pwa now with standalone display.
if (window.matchMedia('(display-mode: standalone)').matches) {
// your code here
}
One solution is the track which users get the click on your button by listening for the beforeinstallprompt event.
This is the right solution:
window.addEventListener('appinstalled', () => {
setAppInstalled(true)
})