Баннеры установки Chrome Web App не работают

Я следую очень простому баннеру установки приложения для Chrome 42+, используя приведенные здесь инструкции, но он не отображается. Сервисный работник зарегистрирован, сервер работает по протоколу 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"
    }]
}

Сервисный работник зарегистрирован, используя следующий код:

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://flags/#bypass-app-banner-engagement-checks в настройках Chrome.

Одна вещь, которую я должен отметить, - то, что я использую Flask, таким образом, я задаюсь вопросом, неправильны ли пути. я думаю start_url может быть проблемой. Я указываю на templates папка во фляге? Потому что там index.html файл есть. Пробовал, но не сработало.

1 ответ

Добавьте эти 3 элемента в свой манифест ( ссылка на MOZ)

"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
}

Если у вас есть проблемы, напишите об ошибке, и я могу помочь вам, я надеюсь, что это поможет!

Другие вопросы по тегам