如何解决我在Chrome的Web开发工具的使用灯塔接收manifest.json的错误？

Question

这是推动疯了。有一个简单的WordPress的博客。冉使用Chrome浏览器的Web开发人员工具灯塔工具审计。对于渐进式Web应用程序的区域我的分数是九流53以下三个错误。我无法弄清楚如何修复这些错误。

---

1. 不与200离线时响应。
2. 用户不会被提示安装Web应用程序

失败：清单的display值不是一个：最小的UI |全屏|独立，本站不注册服务工作者。

3. 不注册服务工作者。

服务职工，使您的应用程序使用的许多进步的Web应用程序的功能，比如离线，添加到主屏幕，并推送通知的技术。

---

这是我的manifest.json文件。我改变的URL example.com。我知道一个事实，它是在服务器上通过到达要去的example.com/manifest.json，这是它是如何在头被称为好。我失去了我的清单什么导致这些错误？

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

下面是从主页我生成的头。不知道如果我需要所有这些图标。困惑，灯塔去一点说，需要对清单512×512，但realfavicongenerator等清单生成似乎并没有产生一个512×512，所以我只是做一个在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，如果是，则需要另行处理这一切的错误，你可以不理会他们。以下是错误的解释。

• 当offline-进Web应用程序脱机工作，不与200响应。如果在离线访问页面时，灯塔没有收到一个HTTP 200响应，则该页面无法访问脱机。
• 用户不会被提示安装Web APP-这是功能，您必须安装服务人员和清单设置成一个Web应用程序是您的手机的主屏幕上创建了可用于PWA。
• 工人─这是你需要的PWA做的第一件事，不注册的服务。“要注册一个服务工作者”。

您可以在审核取消渐进的web应用程序，然后计算出你的分数。

现在，灯塔不会检查PWA的兼容性，不会给任何错误了。