iOS是否支持“beforeinstallpromp”事件?

问题描述 投票:2回答:1

Android和桌面中的Chrome支持“beforeinstallpromp”事件,该事件可以显示添加到主屏幕横幅。我尝试在iOS中使用相同的javascript代码用于我的PWA,但它不起作用。

/**
 * 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和桌面上Chrome工作正常。

更新04.04.2019最完整的答案在这里给出:https://www.youtube.com/watch?v=s5ASNwnBttQ

来自剪辑:“iOS 12.2不支持beforeinstallprompt”(提及通过“共享屏幕”添加到主屏幕行为)

javascript ios progressive-web-apps dom-events workbox
1个回答
3
投票

iOS Safari中没有beforeinstallprompt 请参阅本页底部的列表 https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent

© www.soinside.com 2019 - 2024. All rights reserved.