javascriptinstagramprogressive-web-appsbeforeinstallprompt

BeforeInstallPromptEvent inside of built-in instagram web browser


I'm trying to display a PWA install prompt inside of all android browsers, right now I am using the BeforeInstallPromptEvent and it works most of the time but on the instragram built-in browser (for example when you open a link from a profile bio) it doesn't work.

The code that i'm currently using:

function showPWAPrompt() {
    var pwa_prompt = document.getElementById('pwa_android_prompt');
    pwa_prompt.style.display = 'flex';
}

function hidePWAPrompt() {
    var pwa_prompt = document.getElementById('pwa_android_prompt');
    pwa_prompt.style.display = 'none';
}

var pwaIsAndroid = /Android/.test(navigator.userAgent);

if (pwaIsAndroid) 
{
    window.addEventListener('beforeinstallprompt', function (event) {
        event.preventDefault();
        showPWAPrompt();

        var pwa_prompt = document.getElementById('pwa_android_prompt');
        var pwa_close = pwa_prompt.querySelector('.pwa_android_close_btn');
        var pwa_text = pwa_prompt.querySelector('.pwa_android_text');

        pwa_close.addEventListener('click', function () {
            hidePWAPrompt();
        });

        pwa_text.addEventListener('click', function () {
            hidePWAPrompt();
            event.prompt();
        });
    });
}

I know that there are ways to detect when the website is opened inside of the instragram browser but I can't use only this information to display the prompt since it would display it to users that have already installed the pwa or that are not eligible to install it.

There is an high probability that you can't install a pwa app from the instragram browser (I'm not sure though, I didn't find anything regarding this online) but I still want to display a prompt to give the user information on how to install the pwa.

Also, is there any way to access some kind of developer tools inside of the instagram browser? This could help me figure out this problem.


Solution

  • This event is completely dependent on the manifest.json file You may need to pay attention to this Perhaps manifest.json not be supported in this browser