网络应用清单-manifest.json

Posted 2021-04-30 e佰web前端

注：经测试,国内移动端浏览器支持力度极低，各位有兴趣看看就好。

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

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

· 它具有唯一的图标和名称，以便用户将其与其他网站区分开来。

· 它会在下载资源或从缓存恢复资源时向用户显示某些信息。

· 它会向浏览器提供默认显示特性，以避免网站资源可用时的过渡过于生硬。

它通过一个文本文件中的元数据这一简单机制完成所有这些工作。那就是网络应用清单。

注：尽管您可以在任何网站上使用网络应用清单，它们却是 Progressive Web App 的必备要素。

· 创建清单并将其链接到您的页面，这是非常简单的过程。

· 控制用户从主屏幕启动时看到的内容。

· 这包括启动画面、主题颜色以及打开的网址等。

创建清单

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

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

{

"short_name": "AirHorner",

"name": "Kinlan's AirHorner of Infamy",

}

 

确保包括以下内容：

· 在用户主屏幕上用作文本的 short_name。

· 在网络应用安装横幅中使用的 name。

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

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

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

自定义图标

“添加到主屏幕”图标

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

"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"
  }],

注：将图标保存到主屏幕时，Chrome 首先寻找与显示密度匹配并且尺寸调整到 48dp 屏幕密度的图标。如果未找到任何图标，则会查找与设备特性匹配度最高的图标。无论出于任何原因，如果您想把目标明确锁定在具有特定像素密度的图标，可以使用带数字参数的可选 density（密度）成员。如果您不声明密度，其默认值为 1.0。这意味着“可将该图标用于等于和大于 1.0 的屏幕密度”，而这通常就是您所需要的。

设置背景颜色

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

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

"background_color": "#2196F3",

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

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

设置启动网址

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

"start_url": "index.html?launcher=true"

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

添加启动画面

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

启动背景颜色。

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

1. Chrome 启动。

2. 显示页面的渲染器启动。

3. 您的网站从网络（如果网站有服务工作线程，则从缓存）加载。

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

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

设置主题颜色

如果没有清单，您需要在每个页面上定义主题颜色，并且如果您拥有的是大型网站或旧版网站，进行大量全站更改并不可行。

向您的清单添加 theme_color 属性后，从主屏幕启动网站时，网域中的每个页面都将自动获得主题颜色。

"theme_color": "#2196F3"

自定义显示类型

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

"display": "standalone"

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

"display": "browser"

指定页面的初始方向

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

"orientation": "landscape"

如果您想要手动验证网络应用清单是否已正确设置，请使用 Chrome DevTools 的 Application 面板上的 Manifest标签。

注：如果您将来更新 manifest.json 文件，用户不会自动获取这些更改，除非他们将您的应用重新添加到自己的主屏幕上。