Question

我在Firefox中安装我的应用程序时遇到问题（添加到主屏幕）。在Chrome上一切正常，但在Firefox上，我的按钮无法安装应用程序（无效）。我跟进了文档，我认为一切都会正常。我在iOS上的安装过程（添加到主屏幕）中也遇到了同样的问题-野生动物园，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代码

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);
    });
});

有人可以帮助我吗？错过了什么吗？

Answer 1

beforeinstallprompt并非在所有浏览器中都可用。
对于那些没有的人，您可能会显示有关如何添加快捷方式的说明。

在此处查看列表
https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent

Answer 2

如果页面的清单中不包含以下属性，它将使审核失败：

short_name或name属性
包含192x192像素和512x512像素图标的icons属性
start_url属性
显示属性设置为全屏，独立或最小用户界面
prefer_related_applications属性设置为非true的值。

警告：Web应用程序清单对于您的应用程序可安装是必需的，但还不够。要了解如何满足可安装性的所有要求，请参阅Discover what it takes to be installable帖子。

source

按钮（安装PWA）在Firefox上不起作用

2 个答案: