How to make your own PWA installation button - ryu-compin/pwa4wp GitHub Wiki

To make this, you need very advanced skill.

PWA for WordPress (PWA4WP) can defer PWA installarion by "Defer PWA installation" setting.

In Japanese, read this blog entry.
日本語での説明はこちらのブログエントリをご覧ください。
https://www.compin.jp/wp/2018/12/pwa-for-wordpress-update-112/

When you set "Defer PWA install" mode and PWA installation event is activated by browser, PWA4WP cancels this installation and saves this event object into the global variable "pwa4wp_installevent".
And after, PWA4WP calls function "pwa4wp_open_install".
To use your own PWA installation button, make the function named "pwa4wp_open_install" and use the variable "pwa4wp_installevent" to activate PWA installarion ( Add to Home Screen ).

Even you can stop installation popup showing by this setting.
Then just set to "Defer PWA install" and do nothing.

Sample

HTML/CSS

Make a button only be shown when "Add to home scree" is active.

<div id="pwainstall">
    <button id="pwainstall_button" class="square_btn">Add to Home Screen</button>
</div>

#pwainstall {
    display: none;
}

javascript

var pwa4wp_open_install = function(){
    console.log("install button show");
    //jQuery('#pwainstall').css('display','block');
};
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'){
                // insert actions for installation accepted here
                console.log('pwa installation accepted.')
            }else{
                // insert actions for installation refused here
                console.log('pwa installation refused.')
            }
        });
        window.pwa4wp_installevent = null;
    }else{
        console.log("install event is undefined");
    }
});

Reference

Google Developer
https://developers.google.com/web/fundamentals/app-install-banners/

gist of this sample
https://gist.github.com/ryu-compin/f2eea606f6a3db7fe9681cf7695e3c08

⚠️ **GitHub.com Fallback** ⚠️