Блог

У меня проблема с установкой моего приложения в Firefox (добавить на главный экран). В Chrome все работает нормально, но в Firefox моя кнопка не может установить приложение (не работает). Я слежу за документацией и думаю, что все должно работать. Также у меня такие же проблемы с процессом установки (добавить на главный экран) на IOS — safari, chrome. Что я делаю не так?

Вот мой код:

 var logData = new Object();
            logData.appVersion = window.navigator.appVersion;
            logData.language = window.navigator.language;
            logData.platform = window.navigator.platform;
            logData.product = window.navigator.product;
            logData.userAgent = window.navigator.userAgent;
            logData.vendor = window.navigator.vendor;
            console.log(logData);

            if (window.matchMedia('(display-mode: standalone)').matches) {
                console.log('display-mode is standalone');
                $.post({
                    "url": "[(@{/a2hs/installedV})]",
                    "data": JSON.stringify(logData),
                    "contentType": "application/json; charset=utf-8"
                });
                document.querySelector('.a2hs').remove();
            } 

            else if (window.navigator.standalone === true) {
                console.log('display-mode is standalone');
                $.post({
                    "url": "[(@{/a2hs/installedV})]",
                    "data": JSON.stringify(logData),
                    "contentType": "application/json; charset=utf-8"
                });
                document.querySelector('.a2hs').remove();
            } else {
                $.post({
                    "url": "[(@{/a2hs/webAppuse})]",
                    "data": JSON.stringify(logData),
                    "contentType": "application/json; charset=utf-8"
                });
            }


            var deferredPrompt;
            var addBtn = document.querySelector('.a2hs-button');
            var addDiv = document.querySelector('.a2hs');

            if (addDiv) {
                addDiv.style.display = 'none';

                window.addEventListener('beforeinstallprompt', function(e) {

                    e.preventDefault();

                    deferredPrompt = e;

                    addDiv.style.display = 'block';
                    $.post({
                        "url": "[(@{/a2hs/prikazanaopcijazaaddtohomescreen})]",
                        "data": JSON.stringify(logData),
                        "contentType": "application/json; charset=utf-8"
                    });
                    addBtn.addEventListener('click', function(e) {

                        deferredPrompt.prompt();

                        deferredPrompt.userChoice.then(function(choiceResult) {
                            if (choiceResult.outcome === 'accepted') {
                                console.log('User accepted the A2HS prompt');
                                $.post({
                                    "url": "[(@{/a2hs/accept})]",
                                    "data": JSON.stringify(logData),
                                    "contentType": "application/json; charset=utf-8"
                                });
                                addDiv.remove();
                            } else {
                                console.log('User dismissed the A2HS prompt');
                                $.post({
                                    "url": "[(@{/a2hs/denied})]",
                                    "data": JSON.stringify(logData),
                                    "contentType": "application/json; charset=utf-8"
                                });
                                addDiv.style.display = 'block';
                            }

                            deferredPrompt = null;
                        });
                    });
                });
            }

            window.addEventListener('appinstalled', function(evt) {
                $.post({
                    "url": "[(@{/a2hs/installed})]",
                    "data": JSON.stringify(logData),
                    "contentType": "application/json; charset=utf-8"
                });
                console.log('A2HS installed');
            });
  

Также вот мой js-код service worker

 self.addEventListener('install', function(event) {
    var offlinePage = new Request('offline.html');
    event.waitUntil(
        fetch(offlinePage).then(function(response) {
            return caches.open('std').then(function(cache) {
                console.log('Cached offline page during Install: '   response.url);
                return cache.put(offlinePage, response);
            });
        }));
});


self.addEventListener('fetch', function(event) {
        event.respondWith(
            fetch(event.request).catch(function(error) {
                console.error('Network request Failed. Serving offline page: '   error);
                console.log(event.request)
                return caches.open('std').then(function(cache) {
                    return cache.match('offline.html');
                });
            }));

});


self.addEventListener('refreshOffline', function(response) {
    return caches.open('std').then(function(cache) {
        console.log('Offline page updated from refreshOffline event: '   response.url);
        return cache.put(offlinePage, response);
    });
});
  

Кто-нибудь может мне помочь с этим? Что-то пропустил или?

beforeinstallprompt доступен не во всех браузерах.
Для тех, у кого ее нет, возможно, вы могли бы показать инструкции о том, как добавить ярлык.

Смотрите список здесь
https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent

Если манифест страницы не содержит следующих свойств, аудит завершится неудачей:

• Свойство short_name или name
• Свойство icons, которое включает значок размером 192×192 пикселей и 512×512 пикселей
• Свойство start_url
• Свойство отображения, установленное в полноэкранный режим, автономное или минимальное-пользовательский интерфейс
• Свойству prefer_related_applications присвоено значение, отличное от true.

Внимание: Для установки вашего приложения необходим манифест веб-приложения, но этого недостаточно. Чтобы узнать, как выполнить все требования к возможности установки, ознакомьтесь с постом Узнайте, что нужно для того, чтобы его можно было установить.

Источник