Chrome in Android and Desktop supports "beforeinstallprompt" event which can show add to homescreen banner. I'm try to use the same javascript code for my PWA in iOS but it doesn't work.

/**
 * Clear caches
 */
function pwaClearCaches()
{
    //Clear caches
    caches.keys().then(function(names) {
        for (let name of names) {
            caches.delete(name);
        }
    });
}

var pwa_app_installed = false; //PWA is already installed
var deferredPrompt; //Link to show dialog event
$(document).ready(function(){
    if (window.location.protocol === 'http:') { //Если это HTTP протокол, а не HTTPS
        console.log(lang.t('You need HTTPS for work'));
    }

    if ('serviceWorker' in navigator) {
        /**
         * Подвешиваемся на переключение режима правки, чтобы сразу очистить кэш
         */
        $('.debug-mode-switcher').on('click', function () {
            if (!$('.debug-mode-switcher .toggle-switch').hasClass('on')) {
                //Delete service worker
                navigator.serviceWorker.getRegistrations().then(function (registrations) {
                    for (let registration of registrations) {
                        registration.unregister();
                    }
                });

                //Clear caches
                pwaClearCaches();
            }
        });
    }

    if ($.cookie('update_pwa_cache')){ //Update cache if we have cookie на обновление
        pwaClearCaches();
        $.cookie('update_pwa_cache', '', {expires: -1});
    }

    /**
     * Close window with prompt
     */
    function closePWAInstallWindow()
    {
        $("#pwaInstall").hide();
        $.cookie('not_show_pwa', '1');
    }

    let body = $('body');
    /**
     * Add to homescreen event 
     */
    body.on('click', '#pwaAddToHomeScreen', function(){
        deferredPrompt.prompt(); // Show alert to install
        deferredPrompt.userChoice.then((choiceResult) => {//Wait for user choose
            if (choiceResult.oute === 'accepted') { //Accept install
                closePWAInstallWindow();
            } else { //Cansel install
                closePWAInstallWindow();
            }
            deferredPrompt = null;
        });
        return false;
    });
    /**
     * Close intalll window
     */
    body.on('click', '#pwaCloseInstall', function(){
        closePWAInstallWindow();
        return false;
    });
});


console.log('out');

//If we not in webapp and no session that we need to install
if (!(window.matchMedia('(display-mode: standalone)').matches) && !$.cookie('not_show_pwa')) {
    /**
     * Event that app is installed
     */
    $(window).on('appinstalled', (evt) => {
        pwa_app_installed = true;
    });

    console.log('not fired');

    /**
     * Event beforeinstallprompt from browser
     */
    $(window).on('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.originalEvent;
        console.log('fired');

        var is_mobile_android = false;
        var ua = navigator.userAgent;

        if (/Android/i.test(ua) && /Chrome/i.test(ua)){ //If we in Android and it is Chrome prevent native window
            is_mobile_android = true;
        }

        if (!pwa_app_installed && !is_mobile_android){
            let body = $('body');
            body.append('<div id="pwaInstall" class="pwaInstall" style="background-color: #fff">' +
                '<div class="content">Please install our app</div><div class="links">' +
                    '<a href="#" id="pwaAddToHomeScreen" style="background-color: #fff; color: #000;">Add to homescreen</a>' +
                    '<a href="#" id="pwaCloseInstall" style="background-color: yellow; color: black;">No Thanks</a>' +
                '</div>' +
            '</div>');

            setTimeout(function () { //Show our banner
                $("#pwaInstall").addClass('show');
            }, 100);
        }
    });
}

<script src=".2.4/jquery.min.js"></script>

Chrome in Android and Desktop supports "beforeinstallprompt" event which can show add to homescreen banner. I'm try to use the same javascript code for my PWA in iOS but it doesn't work.

/**
 * Clear caches
 */
function pwaClearCaches()
{
    //Clear caches
    caches.keys().then(function(names) {
        for (let name of names) {
            caches.delete(name);
        }
    });
}

var pwa_app_installed = false; //PWA is already installed
var deferredPrompt; //Link to show dialog event
$(document).ready(function(){
    if (window.location.protocol === 'http:') { //Если это HTTP протокол, а не HTTPS
        console.log(lang.t('You need HTTPS for work'));
    }

    if ('serviceWorker' in navigator) {
        /**
         * Подвешиваемся на переключение режима правки, чтобы сразу очистить кэш
         */
        $('.debug-mode-switcher').on('click', function () {
            if (!$('.debug-mode-switcher .toggle-switch').hasClass('on')) {
                //Delete service worker
                navigator.serviceWorker.getRegistrations().then(function (registrations) {
                    for (let registration of registrations) {
                        registration.unregister();
                    }
                });

                //Clear caches
                pwaClearCaches();
            }
        });
    }

    if ($.cookie('update_pwa_cache')){ //Update cache if we have cookie на обновление
        pwaClearCaches();
        $.cookie('update_pwa_cache', '', {expires: -1});
    }

    /**
     * Close window with prompt
     */
    function closePWAInstallWindow()
    {
        $("#pwaInstall").hide();
        $.cookie('not_show_pwa', '1');
    }

    let body = $('body');
    /**
     * Add to homescreen event 
     */
    body.on('click', '#pwaAddToHomeScreen', function(){
        deferredPrompt.prompt(); // Show alert to install
        deferredPrompt.userChoice.then((choiceResult) => {//Wait for user choose
            if (choiceResult.oute === 'accepted') { //Accept install
                closePWAInstallWindow();
            } else { //Cansel install
                closePWAInstallWindow();
            }
            deferredPrompt = null;
        });
        return false;
    });
    /**
     * Close intalll window
     */
    body.on('click', '#pwaCloseInstall', function(){
        closePWAInstallWindow();
        return false;
    });
});


console.log('out');

//If we not in webapp and no session that we need to install
if (!(window.matchMedia('(display-mode: standalone)').matches) && !$.cookie('not_show_pwa')) {
    /**
     * Event that app is installed
     */
    $(window).on('appinstalled', (evt) => {
        pwa_app_installed = true;
    });

    console.log('not fired');

    /**
     * Event beforeinstallprompt from browser
     */
    $(window).on('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.originalEvent;
        console.log('fired');

        var is_mobile_android = false;
        var ua = navigator.userAgent;

        if (/Android/i.test(ua) && /Chrome/i.test(ua)){ //If we in Android and it is Chrome prevent native window
            is_mobile_android = true;
        }

        if (!pwa_app_installed && !is_mobile_android){
            let body = $('body');
            body.append('<div id="pwaInstall" class="pwaInstall" style="background-color: #fff">' +
                '<div class="content">Please install our app</div><div class="links">' +
                    '<a href="#" id="pwaAddToHomeScreen" style="background-color: #fff; color: #000;">Add to homescreen</a>' +
                    '<a href="#" id="pwaCloseInstall" style="background-color: yellow; color: black;">No Thanks</a>' +
                '</div>' +
            '</div>');

            setTimeout(function () { //Show our banner
                $("#pwaInstall").addClass('show');
            }, 100);
        }
    });
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.4/jquery.min.js"></script>

And I have manifest.json

{
    "short_name": "VaporStore",
    "name": "VaporStore & FreeVape",
    "description": "Магазин свободного пара",
    "icons": [
        {
            "src": "/storage/system/resized/xy_64x64/0f08cd435767735a778ea63fea5b5efd_e2f1b76.png",
            "type": "image/png",
            "sizes": "64x64"
        },
        {
            "src": "/storage/system/resized/xy_128x128/0f08cd435767735a778ea63fea5b5efd_b510eb77.png",
            "type": "image/png",
            "sizes": "128x128"
        },
        {
            "src": "/storage/system/original/0f08cd435767735a778ea63fea5b5efd.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/storage/system/original/272d68dfbb5e80ef67f6c7abcb2391cb.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "background_color": "#ffffff",
    "theme_color": "#ff9800",
    "display": "standalone",
    "orientation": "portrait",
    "start_url": "/",
    "scope": "/"
}

And I have service worker based on workbox from Google.

Does iOS support the "beforeinstallprompt" event or not? On Android and Desktop chrome works fine.

Update 04.04.2019 The most full answer is given here: https://www.youtube./watch?v=s5ASNwnBttQ

from the clip: "iOS 12.2 does not support beforeinstallprompt" (mention is made of add to home screen behavior via 'Share Screen')

• javascript
• ios
• progressive-web-apps
• dom-events
• workbox

• developer.mozilla/en-US/docs/Web/API/… – Mathias Commented Mar 22, 2019 at 15:59
• perhaps on Chrome iOS love2dev./blog/beforeinstallprompt – Mathias Commented Mar 22, 2019 at 16:01
• I have made all the same. But it is not working my domain is vaporstore.kz . Service worker vaporstore.kz/serviceworker.js – Alexander Zakusilo Commented Mar 22, 2019 at 19:15
• Are you sure you are totally uninstalling and clearing out the browser's cache for each test? Perhaps have someone new with the latest version of Chrome iOS test for you. – Mathias Commented Mar 23, 2019 at 11:06
• 1 @AlexanderZakusilo BeforeInstallPromptEvent is not supported in Safari iOS – ulu Commented Oct 5, 2019 at 12:41

1 Answer 1

beforeinstallprompt is not available in iOS Safari
See list at the bottom of this page
https://developer.mozilla/en-US/docs/Web/API/BeforeInstallPromptEvent