PWA 技术中遇到 Manifest 未正确配置的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在开发一个 PWA 应用程序时，所有要求的技术（响应式设计、离线支持、推送通知等）都需要正确地配置和使用。其中，Manifest 是一个简单的 JSON 文件，它描述 PWA 应用程序的名称、图标和启动 URL 等信息。本文将介绍 Manifest 如何工作，以及一些可能遇到的错误，以及相应的解决方法。

什么是 Manifest？

Manifest 是一种 Web 应用程序清单，通常命名为 manifest.json 文件。它提供了一个清单，其中包含有关 WEB 应用程序的信息，例如名称、描述、图标、起始页的 URL 等。Manifest 为浏览器提供了简单的指导，以确保 PWA 应用程序总是被当作应用程序处理，而不是普通的 Web 站点。

Manifest 的基本结构如下：

// www.javascriptcn.com code example
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

name - 应用程序的全名，可以包含空格和特殊字符。
short_name - 应用程序的简称，通常较短，20 个字符以下。
start_url - PWA 应用程序启动时显示的 URL。
display - 定义应用程序的显示模式，包括 fullscreen、standalone、minimal-ui 和 browser。
icons - 用于启动屏幕和主屏幕清单中显示的图标。

Manifest 的常见问题及解决方法

问题 1：Manifest 文件未被正常加载

Manifest 文件必须位于您的 Web 应用程序根目录下，且文件名必须为 manifest.json。如果加载失败，浏览器控制台会输出以下错误：

Failed to load manifest.json: Redirect from 'https://example.com/manifest.json' to 'https://example.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是由于 Manifest 未做好跨域配置而无法从服务器上获取，解决方法是确保 Manifest 请求始终返回正确的 CORS 头文件。

问题 2：Manifest 文件格式错误

在编写 Manifest 文件时，一些常见的错误包括缩进不正确、多余的逗号和无效的 JSON 格式。如果 Manifest 文件格式不正确，会在浏览器控制台中显示以下错误：

Manifest: Line: 5, column: 50, Syntax error.

解决方法：使用 JSON 检查器检查 Manifest 文件，并确保其格式正确。

问题 3：Manifest 文件未正确配置相关字段

在编写 Manifest 文件时，必须确保以正确的格式填写必需的字段。否则，浏览器可能会以未知模式打开 PWA 应用程序。以下是必须在 Manifest 文件中配置的字段：

name - 应用程序的名称。
short_name - 应用程序的简称。
start_url - PWA 应用程序启动时显示的 URL。
display - 定义应用程序的显示模式，包括 fullscreen、standalone、minimal-ui 和 browser。

解决方法：确保在 Manifest 文件中正确配置这些必需的字段。可以找到一个完整的示例，以确保所有必需的字段都已正确配置。

// www.javascriptcn.com code example
  {
    "name": "Webinar App",
    "short_name": "Webinar",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "background_color": "#f5f5f5",
    "description": "Webinar application",
    "orientation": "portrait-primary",
    "theme_color": "#4DBA87",
    "icons": [
      {
        "src": "/img/icons/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/img/icons/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  }

问题 4：缺少图标或大小错误

应用程序图标是 PWA 应用程序中显眼的一部分。如果缺少图标或大小错误，可能会影响用户体验，甚至导致应用程序在设备上打不开。以下是一些常见的图标问题：

没有指定图标。
图标格式不正确。
图标大小不正确。
缺少相关的清单字段。

解决方法：确保你的 Manifest 文件提供了足够的、正确的图标，并且包括必需的清单字段。

结语

通过 Manifest 的正确配置，我们可以重新定义 Web 应用程序，并将其转化为与原生应用程序类似的 PWA 应用程序。但是，在开发过程中我们要时刻注意 Manifest 文件是否正确配置并且避免上述的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfedbde46428fe9ec3eca7

PWA 技术中遇到 Manifest 未正确配置的解决方法