web app manifest文件清单详解说明

╰+攻爆jí腚メ 2023-10-09 19:40 24阅读 0赞

![5f24df039a5b4ca191ab4a37c1e1ebe0.png][]是一个 JSON 文件，它告诉浏览器您的Web应用程序以及在用户移动设备或桌面上“安装”时它应该如何表现。 Chrome需要提供清单才能显示“添加到主屏幕”提示。

典型的清单文件包括有关应用程序名称，应使用的图标，启动时应启动的start\_url等信息。

## 创建清单 ##

PWA的完整manifest.json文件

{
      "short_name": "Maps",
      "name": "Google Maps",
      "icons": [
        {
          "src": "/images/icons-192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "/images/icons-512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ],
      "start_url": "/maps/?source=pwa",
      "background_color": "#3367D6",
      "display": "standalone",
      "scope": "/maps/",
      "theme_color": "#3367D6"
    }

> 注意：请参阅[添加到主屏幕标准][Link 1]，了解显示添加到主屏幕提示所需的特定属性。

## 告诉浏览器您的清单 ##

创建清单后，为包含Web应用程序的所有页面添加 link标签：

## 清单属性 ##

#### short\_name 和/或 name ####

您必须至少提供 `short_name`或 `name` 属性。 如果两者都提供，则在用户的主屏幕，启动器或其他可能空间有限的地方使用 `short_name`。 `name` 用于应用安装提示。

"short_name": "Maps",
    "name": "Google Maps"

#### icons ####

当用户将您的站点添加到其主屏幕时，您可以定义一组供浏览器使用的图标。 这些图标用于主屏幕，应用程序启动器，任务切换器，启动画面等位置。

icons是一个图像对象数组，每个对象应包括src，一个sizes属性和图像类型。

"icons": [
      {
        "src": "/images/icons-192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/images/icons-512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ]

> 成功：包括192x192像素图标和512x512像素图标。 Chrome会自动缩放设备的图标。 如果您希望缩放自己的图标并将其调整为像素完美，请以48dp的增量提供图标。

#### start\_url ####

`start_url` 告诉浏览器应用程序在启动时应该从哪里开始，并阻止应用程序启动用户在将应用添加到主屏幕时所处的页面。

您的 `start_url` 应该将用户直接引导到您的应用中，而不是产品目标网页。 想一想用户打开您的应用后想要做什么，并将它们放在那里。

"start_url": "/?utm_source=a2hs"

> 成功：在start\_url的末尾添加一个查询字符串，以跟踪您的应用启动的频率。

#### background\_color ####

首次启动应用程序时，会在启动屏幕上使用background\_color属性。

#### display ####

您可以自定义启动应用时显示的浏览器UI。例如，您可以隐藏地址栏和浏览器边。或者游戏可能想要完全全屏。

"display": "standalone"

**参数**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fullscreen</td> 
   <td>在没有任何浏览器UI的情况下打开Web应用程序，占用整个可用的显示区域。</td> 
  </tr> 
  <tr> 
   <td>standalone</td> 
   <td>打开Web应用程序，使其外观和感觉就像一个独立的本机应用程序。 该应用程序在自己的窗口中运行，与浏览器分开，并隐藏标准浏览器UI元素，如URL栏等。</td> 
  </tr> 
  <tr> 
   <td>minimal-ui</td> 
   <td><strong>Chrome不支持</strong>&nbsp;该模式类似于全屏，但为用户提供了一些访问用于控制导航（即，后退，前进，重新加载等）的最小UI元素集的方法。</td> 
  </tr> 
  <tr> 
   <td>browser</td> 
   <td>标准的浏览器体验。</td> 
  </tr> 
 </tbody> 
</table>

> 成功：要显示\*\*“添加到主屏幕提示”\*\*，必须将显示设置为 **`standalone`** 。

#### orientation ####

您可以强制执行特定的方向，这对于仅在一个方向上工作的应用程序（例如游戏）有利。 有选择地使用它。 用户更喜欢选择方向。

"orientation": "landscape"

#### scope ####

定义此Web应用程序的应用程序上下文的导航范围。 这基本上限制了manifest可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。start\_url必须位于scope内。

"scope": "/maps/"

其他一些提示：

*  如果您没有在清单中包含范围，则默认隐含范围是您的Web应用程序清单所服务的目录。
 *  scope属性可以是相对路径（../），也可以是任何更高级别的路径（/），它可以增加Web应用程序中导航的覆盖范围。
 *  start\_url必须在范围内。
 *  start\_url相对于scope属性中定义的路径。
 *  以/开头的start\_url将始终是原点的根。

#### theme\_color ####

theme\_color设置工具栏和任务切换器的颜色。

"theme_color": "#3367D6"

> 成功：theme\_color应与document head中指定的meta theme颜色匹配。

## 启动画面 ##

当您的应用首次启动时，浏览器可能需要一段时间才能启动，然后初始内容将开始呈现。Chrome在首次绘制前显示启动画面， 而不是像应用程序那样向用户显示白色屏幕。

Chrome会自动从清单属性创建启动画面，包括：

*  name
 *  background\_color
 *  icons

`background_color`应与加载页面的颜色相同，以提供从初始屏幕到应用程序的平滑过渡。

#### 用于启动画面的图标 ####

Chrome会选择与该设备的128dp图标非常匹配的图标。 128dp是启动画面上图像的理想尺寸，意味着不会对图像应用缩放。  
同样，在大多数情况下，提供192px和512px图标就足够了，但您可以根据需要提供其他图标。

![ac66c17aba9afbb229dff65eca59b66c.png][]

## 测试清单 ##

要验证清单是否设置正确，您可以使用Chrome DevTools的 **Application** 面板中的 **Manifest** 选项卡。

![10cac42f98455b4515c2699d61898e33.png][]

如果您想要一种自动化方法来验证您的网络应用清单，请查看Lighthouse。 Lighthouse是一款网络应用审核工具，可作为Chrome扩展程序或NPM模块运行。 您向Lighthouse提供URL，它会针对该页面运行一系列审核，然后在报告中显示结果。

[5f24df039a5b4ca191ab4a37c1e1ebe0.png]: https://img-blog.csdnimg.cn/5f24df039a5b4ca191ab4a37c1e1ebe0.png
[Link 1]: https://developers.google.com/web/fundamentals/app-install-banners/#criteria
[ac66c17aba9afbb229dff65eca59b66c.png]: https://img-blog.csdnimg.cn/img_convert/ac66c17aba9afbb229dff65eca59b66c.png
[10cac42f98455b4515c2699d61898e33.png]: https://img-blog.csdnimg.cn/img_convert/10cac42f98455b4515c2699d61898e33.png