How to add progressive web app to website with a conditional install button

The advantage of this method is to allow the end user to install the app more on their terms (being pushy isn’t cool now days). Also, once installed, unlike other plugins you don’t want to bother users with a button or prompt to install the app again. I’ve tested it with the latest versions of WordPress and more than 50 common plugins, including W3 Total Cache and Cloudflare.

NOTE: Script loading and running on a mobile device can take several seconds, so if it doesn’t happen immediately give it a bit.

<br>
1.) Make a call to action link targeting another page where instructions are given (and specify it to be hidden by default). Rather than installing directly I recommend telling the user that your webpage will be installed as if it were an app, since PWA is new and it’s not coming from the Play Store or the Apple Store. It increases the adoption rate.

Example:
<div id="pwa_redirect" style="display: none;"><a href="/your-pwa-install-page/"><button>Install this page as an app</button></a></div>

<br>
2.) Make the install link on your application page.

Example:
<div id="pwainstall" style="display: block;"><button id="pwainstall_button">Let’s do it</button></div>

<br>
3.) Load a little javascript on pages where your redirect button appears to act as a switch as to whether or not the PWA is already installed.

I really recommend using the nifty plugin Header Footer Code Manager to insert the snippet. With this you can target specific pages and of course load it only for mobile devices. I put my call to action in the footer so it’s on the majority of pages, and loaded the snippet in the footer section.

What the snippet will ingeniously do is check to see if the PWA is already installed, and if not allow your call to action link to be displayed. This is the missing piece in all other applications of this at present, as once installed you do not want to keep showing the CTA.

Example:

<script>
window.addEventListener('beforeinstallprompt', (e) => {
	e.preventDefault();
	deferredPrompt = e;
	pwa_redirect.style.display = 'block';
});
</script>

<br>
4.) Load the PWA installation javascript on mobile devices where you have the install button/link. Again it’s quite easy with the Header Footer Code Manager plugin.

Example:

<script>
var pwa4wp_open_install = function(){
    console.log("install button show");
};
document.getElementById("pwainstall_button").addEventListener("click",function(){
	if(window.pwa4wp_installevent !== undefined ){
		window.pwa4wp_installevent.prompt();
		window.pwa4wp_installevent.userChoice.then(function(choiceResult){
			if(choiceResult === 'accepted'){
				console.log('pwa installation accepted.')
			} else {
				console.log('pwa installation refused.')
			}
		});
		window.pwa4wp_installevent = null;
	} else {
		console.log("install event is undefined");
	}
});
</script>

<br>
5.) What should happen is that your CTA link appears only when the application is not installed, and you have a page explaining the process which makes the user pause, giving the system a few seconds to load and run the scripts.

• This topic was modified 5 years, 2 months ago by Dr. Flow.
• This topic was modified 5 years, 2 months ago by Dr. Flow.