0

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

  1. 离线时不响应 200。

  2. 不会提示用户安装 Web 应用程序

失败：清单的display值不是以下之一：minimal-ui | 全屏 | 独立，站点不注册服务工作者。

  1. 不注册服务工作者。

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

这是我的 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
}

这是我从主页生成的标题。不确定我是否需要所有这些图标。有点困惑，因为 Lighthouse 说清单需要 512x512，但 realfavicongenerator 和其他清单生成器似乎不会产生 512x512，所以我只是在 Photoshop 中制作了一个并与其余图标一起上传到 root，然后添加了额外的代码到 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">
4

1 回答 1

1

这可能被视为错误，具体取决于您是否使博客离线可用。您是否希望您的博客成为 PWA，如果是，则需要处理所有错误，否则您可以忽略它们。以下是错误的解释。

  • 离线时不响应 200 - 渐进式 Web 应用程序离线工作。如果 Lighthouse 在离线访问页面时未收到 HTTP 200 响应，则无法离线访问该页面。

  • 将不会提示用户安装 Web 应用程序 - 这是 PWA 可用的功能，您安装了 service worker 并提供了清单，以便在手机的主屏幕上创建一个 Web 应用程序。

  • 不注册服务工作者 - 这是您需要为 PWA 做的第一件事。“注册服务工作者”。

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

在此处输入图像描述

现在，在此处输入图像描述lighthouse 不会检查 PWA 的兼容性，也不会给出任何错误。

于 2019-02-06T09:03:34.053 回答