Поддерживает ли iOS событие beforeinstallpromp?

2

Chrome в Android и на рабочем столе поддерживает событие "beforeinstallpromp", которое может отображаться в виде баннера на главном экране. Я пытаюсь использовать тот же код JavaScript для моего PWA в iOS, но он не работает.

/**
 * 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.outcome === '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.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

И у меня есть 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": "/"
}

И у меня есть сервисный работник на основе рабочего ящика от Google.

Поддерживает ли iOS событие beforeinstallpromp или нет? На Android и Desktop хром работает отлично.

Обновление 04.04.2019. Наиболее полный ответ дан здесь: https://www.youtube.com/watch?v=s5ASNwnBttQ.

из клипа: "iOS 12.2 не поддерживает beforeinstallprompt" (упоминание о добавлении к поведению на главном экране через "Share Screen")

  • 0
    developer.mozilla.org/en-US/docs/Web/API/...
  • 0
    возможно на Chrome iOS love2dev.com/blog/beforeinstallprompt
Показать ещё 3 комментария
Теги:
progressive-web-apps
workbox
dom-events

1 ответ

3
Лучший ответ

beforeinstallprompt недоступен в iOS Safari
Смотрите список внизу этой страницы
https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent

  • 0
    Я думаю, что это старая информация. Эта страница имеет дату внизу. Последнее обновление: chrisdavidmills, 11 декабря 2018 г.
  • 0
    Я нигде не видел, чтобы это работало с Safari. Поиск Google может помочь вам найти кого-то, кто построил какую-то работу вокруг.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню