PWA实战（3）—Manifest

PWA
留言

Manifest是一个 JSON 文件，您（即开发者）可以利用它控制在用户想要看到应用的区域（例如移动设备主屏幕）中如何向用户显示网络应用或网站，指示用户可以启动哪些功能，以及定义其在启动时的外观。

Manifest提供了将网站书签保存到设备主屏幕的功能。当网站以这种方式启动时：

  • 它具有唯一的图标和名称，以便用户将其与其他网站区分开来。
  • 它会在下载资源或从缓存恢复资源时向用户显示某些信息。
  • 它会向浏览器提供默认显示特性，以避免网站资源可用时的过渡过于生硬。

它通过一个文本文件中的元数据这一简单机制完成所有这些工作。实现：

  • 创建清单并将其链接到您的页面，这是非常简单的过程。
  • 控制用户从主屏幕启动时看到的内容。
  • 这包括启动画面、主题颜色以及打开的网址等。

创建清单

在对网络应用清单做详细探究之前，让我们先创建一个基本清单，然后为其链接一个网页。

不管您要什么，都可以调用清单。大多数人使用manifest.json。下面是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "short_name": "AirHorner",
  "name": "Kinlan's AirHorner of Infamy",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

确保包括以下内容：

  • 在用户主屏幕上用作文本的short_name。
  • 在网络应用安装横幅中使用的name。

将清单的相关信息告知浏览器

在您创建清单且将清单添加到您的网站之后，将link标记添加到包含网络应用的所有页面上，如下所示：

1
<link rel="manifest" href="/manifest.json">

设置启动网址

如果您不提供start_url，则将使用当前页面，这不太可能是您的用户想要的内容。 但这并不是将它包括在内的唯一原因。 由于您现在可以定义应用的启动方式，因此可向start_url添加一个查询字符串参数来说明其启动方式。

1
"start_url": "/?utm_source=homescreen"

这可以是您希望的任何内容；我们要使用的值的优点是对网站统计十分有意义。

自定义图标

当用户将您的网站添加到其主屏幕时，您可以定义一组供浏览器使用的图标。您可以通过类型和大小定义它们，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"icons": [{
    "src": "images/touch/icon-128x128.png",
    "type": "image/png",
    "sizes": "128x128"
  }, {
    "src": "images/touch/apple-touch-icon.png",
    "type": "image/png",
    "sizes": "152x152"
  }, {
    "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
    "type": "image/png",
    "sizes": "144x144"
  }, {
    "src": "images/touch/chrome-touch-icon-192x192.png",
    "type": "image/png",
    "sizes": "192x192"
  }],

添加启动画面

当您从主屏幕启动网络应用时，幕后执行了若干操作：

  1. Chrome 启动。
  2. 显示页面的渲染器启动。
  3. 您的网站从网络（如果网站有服务工作线程，则从缓存）加载。

执行以上操作时，屏幕显示为白色并且看似已经停滞。如果您从网络加载网页时页面需要花费不止一两秒的时间才能让首页显现任何内容，这种情况将变得尤为明显。

为提供更优质的用户体验，您可以用标题、颜色和图像来替换白色屏幕。

设置图像和标题

如果您从未落下课程进度，您已应完成了图像和标题的设置。Chrome 会根据清单的特定成员推断图像和标题。此处的要点是了解详情。

启动画面图像提取自icons数组。Chrome 为设备选择最接近 128dp 的图像。标题是直接从name成员获取的。

设置背景颜色

利用适当命名的background_color属性指定背景颜色。 Chrome 在网络应用启动后会立即使用此颜色，这一颜色将保留在屏幕上，直至网络应用首次呈现为止。

要设置背景颜色，请在您的清单中设置下列内容：

1
"background_color": "#2196F3",

现在，从主屏幕启动您的网站时将不会呈现白色屏幕。

该属性的建议适用值是加载页面的背景颜色。使用与加载页面相同的颜色可实现从启动画面到首页的平稳过渡。

设置主题颜色

使用theme_color属性指定主题颜色。该属性设置工具栏的颜色。 对此，我们还建议复制某种现有颜色，具体地讲就是theme-color <meta>。

设置启动样式

利用网络应用清单来控制显示类型和页面方向。

自定义显示类型

您可以通过将display类型设置为standalone，让您的网络应用隐藏浏览器的UI：

1
"display": "standalone"

如果您认为用户喜欢在浏览器中像正常网站一样查看您的网页，您可以将display类型设置为browser：

1
"display": "browser"

指定页面的初始方向

您可以强制一个特定方向，这对于某些应用很有用，例如只能在一个方向上运行的游戏。 请有选择地使用。 用户更愿意能够自行选择方向。

1
"orientation": "landscape"

提供全站主题颜色

Chrome 在 2014 年为您的网站引入了主题颜色这一概念。主题颜色是来自您的网页的提示，用于告知浏览器使用什么颜色来为地址栏等 UI 元素着色。

如果没有清单，您需要在每个页面上定义主题颜色，并且如果您拥有的是大型网站或旧版网站，进行大量全站更改并不可行。
向您的清单添加theme_color属性后，从主屏幕启动网站时，网域中的每个页面都将自动获得主题颜色。

1
"theme_color": "#2196F3"