Question

我正在使用说明here关注Chrome 42+的非常简单的应用安装横幅，但它没有显示。 Service Worker已注册，服务器正在运行HTTPS，manifest.json如下所示：

{
    "name": "appName",
    "short_name": "appName",
    "start_url": "./index.html",
    "display": "standalone",
    "icons": [{
        "src": "/static/img/app/launcher-icon-1x.png",
        "sizes": "48x48",
        "type": "image/png"
    },{
        "src": "/static/img/app/launcher-icon-2x.png",
        "sizes": "96x96",
        "type": "image/png"
    },{
        "src": "/static/img/app/launcher-icon-3x.png",
        "sizes": "144x144",
        "type": "image/png"
    },{
        "src": "/static/img/app/launcher-icon-4x.png",
        "sizes": "192x192",
        "type": "image/png"
    }]
}

使用以下代码注册的Service Worker：

window.addEventListener('load', function () {
    var outputElement = document.getElementById('output');
    navigator.serviceWorker.register('/static/service-worker.js', {
            scope: './static/'
        })
        .then(function (r) {
            console.log('Registered Service Worker');
        })
        .catch(function (whut) {
            console.error('Uh oh, there is a problem... ');
            console.error(whut);
        });
    window.addEventListener('beforeinstallprompt', function (e) {
        outputElement.textContent = 'beforeinstallprompt Event fired';
    });
});

我错过了什么？不知道从哪里开始。我也在Chrome设置中启用了chrome://flags/#bypass-app-banner-engagement-checks。

我应该注意的一件事是我正在使用Flask，所以我想知道路径是否正确。我认为start_url可能是一个问题。我是否指向Flask中的templates文件夹？因为那是index.html文件所在的位置。尝试过，但没有工作。

Answer 1

在清单上添加这3个元素（MOZ Reference）

"related_applications": [{
        "platform": "web"
    }],
"related_applications": [],
"prefer_related_applications": false

然后你的清单结果

{
    "name": "appName",
    "short_name": "appName",
    "start_url": "./index.html",
    "display": "standalone",
    "icons": [{
        "src": "/static/img/app/launcher-icon-1x.png",
        "sizes": "48x48",
        "type": "image/png"
    },{
        "src": "/static/img/app/launcher-icon-2x.png",
        "sizes": "96x96",
        "type": "image/png"
    },{
        "src": "/static/img/app/launcher-icon-3x.png",
        "sizes": "144x144",
        "type": "image/png"
    },{
        "src": "/static/img/app/launcher-icon-4x.png",
        "sizes": "192x192",
        "type": "image/png"
    }],
    "related_applications": [{
            "platform": "web"
        }],
    "related_applications": [],
    "prefer_related_applications": false
}

如果您在发布错误时遇到问题，我可以帮助您，希望对您有所帮助！

Chrome Web App安装横幅不起作用

1 个答案: