如何修复我在 Chrome 中使用 Web Developer 工具中的 Lighthouse 收到的 manifest.json 错误？

Question

这真让人发疯。有一个简单的 Wordpress 博客。运行使用 Chrome 的 Web 开发人员工具中的 Lighthouse 工具进行审计。对于 Progressive Web App 领域，我的分数是糟糕的 53，有以下三个错误。我不知道如何修复这些错误。

离线时不响应 200。
不会提示用户安装 Web 应用程序

失败：清单的 display 值不是以下值之一：minimal-ui |全屏 |独立，Site 没有注册 service worker。

没有注册 service worker。

Service Worker 是一种技术，可让您的应用使用许多 Progressive Web App 功能，例如离线、添加到主屏幕和推送通知。

这是我的 manifest.json 文件。我将 URL 更改为 example.com。我知道一个事实，它可以通过转到示例在服务器上访问。com/manifest.json 这也是它在 header 中的调用方式。我的清单中是否遗漏了任何导致这些错误的内容？

{
    "name": "My Site",
    "short_name": "My Site",
    "theme_color": "#ffffff",
    "background_color": "#082953",
    "display": "browser",
    "Scope": "/",
    "start_url": "https://www.example.com",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "splash_pages": null
}

这是我从主页生成的 header。不确定我是否需要所有这些图标。有点困惑，因为 Lighthouse 说清单需要 512x512，但 realfavicongenerator 和其他清单生成器似乎不会生成 512x512，所以我只是在 Photoshop 中制作了一个并与其余图标一起上传到根目录，然后添加了额外的代码到 manifest.json 文件。

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Site">
<meta name="apple-mobile-web-app-title" content="My Site">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-navbutton-color" content="#082953">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My Site">
<meta name="msapplication-starturl" content="https://www.example.com">
<meta name="msapplication-TileColor" content="#082953">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="384x384" href="/android-chrome-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#082953">

Answer 1

这可以被视为错误，具体取决于您是否将博客设为离线可用。你想让你的博客成为 PWA，如果是，那么所有的错误都需要处理，否则你可以忽略它们。以下是错误的解释。

离线时不响应 200- 渐进式网络应用程序可以离线工作。如果 Lighthouse 没有收到 HTTP 200 响应脱机访问页面时，无法脱机访问该页面。
不会提示用户安装 Web 应用程序- 这是可用于安装了 Service Worker 的 PWA 的功能并提供清单，以便在 phone 的主屏幕上创建网络应用程序。
没有注册service worker- 这是您需要为 PWA 做的第一件事。"To register a service worker".

您可以在审核中取消选中渐进式网络应用，然后计算您的分数。

现在， lighthouse 将不会检查 PWA 兼容性，也不会给出任何错误。

如何修复我在 Chrome 中使用 Web Developer 工具中的 Lighthouse 收到的 manifest.json 错误？

How do I fix manifest.json errors I am receiving using Lighthouse in Web Developer tools in Chrome?

favicon

manifest.json

lighthouse

web-developer-toolbar