html - 添加到主屏幕的 Web 应用安装横幅未显示在我的 Web 应用中并显示错误

Question

下面是我的 manifest.json 文件

{
    "short_name": "ponds.brandfans.co",
    "name": "ponds.brandfans.co",
    "icons": [{
        "src": "/images/logo/favicons/36x36.png",
        "sizes": "36x36",
        "type": "image/png",
        "density": "0.75"
    }, {
        "src": "/images/logo/favicons/36x36.png",
        "sizes": "48x48",
        "type": "image/png",
        "density": "1.0"
    }, {
        "src": "/images/logo/favicons/36x36.png",
        "sizes": "72x72",
        "type": "image/png",
        "density": "1.5"
    }, {
        "src": "/images/logo/favicons/36x36.png",
        "sizes": "96x96",
        "type": "image/png",
        "density": "2.0"
    }, {
        "src": "/images/logo/favicons/36x36.png",
        "sizes": "144x144",
        "type": "image/png",
        "density": "3.0"
    }, {
        "src": "/images/logo/favicons/36x36.png",
        "sizes": "192x192",
        "type": "image/png",
        "density": "4.0"
    }],
    "start_url": "/",
    "display": "standalone",
    "gcm_sender_id": "482941778795",
    "background_color": "#2c3e50",
    "theme_color": "#2c3e50"
}

我收到错误消息：“无法安装站点：该页面无法脱机工作”如果我遗漏了什么，请告诉我？

Answer 1

正如 Chris Love 的博客和视频中所见，您必须将其添加到您的 service worker javascript 代码中：

self.addEventListener("fetch", function(event) {});

（对我来说，服务工作者文件（sw.js）只包含这一行）

Answer 2

有趣的是你问了这个问题。我正在渲染一个回答这个问题的视频:) https://youtu.be/xvLnmdjgEWY

您的 serviceworker 需要一个 fetch 事件处理程序。