PWA 清单：轻松创建 Web 应用清单

正确配置的 Web 应用程序清单对于 PWA 的安装过程至关重要，因为没有它，整个过程都是不可能的。 令人惊讶的是，正确配置您的 Web 应用程序清单并不难。

它是干什么用的？

Web 应用清单是 PWA 的重要组成部分，因为它决定了您的应用如何在初始屏幕和用户的主屏幕上向用户展示自己。 这些都是重要的初始阶段，有助于塑造用户对您的应用程序的印象，这就是为什么正确处理它对您来说很重要。

配置 manifest.json 的方法

从头开始

稍微熟悉一下 JSON 数据格式，您就可以轻松创建自己的 Web 应用程序清单。

一个典型的manifest.json应该是这样的：

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    “显示”：“全屏”，
    “范围”： ”/”，
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    “描述”：“Magento 的下一代电子商务解决方案”，
    “图标”：[
        {
            "src": "/icon-192x192.png",
            “尺寸”：“192x”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-256x256.png",
            “尺寸”：“256x”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-384x384.png",
            “尺寸”：“384x”，
            “类型”：“图像/png”
        },
        {
            "src": "/icon-512x512.png",
            “尺寸”：“512x”，
            “类型”：“图像/png”
        }
    ]
}

您可以保留部分代码，但仍有一些必需的成员，否则用户将无法安装您的 PWA：

 名称、短名称、图标、显示、start_url

• name ：您的应用程序名称，显示在主屏幕和其他各种地方的应用程序图标下方。 保持 name 属性的值简短而简单。

• short-name ：当您的name属性的值无法适应用户的屏幕时，将使用此属性的值。 建议您的short-name应少于 20 个字符。 事实上，拍摄 10 个角色。

• icons ：您的应用程序的图标，它可以包含用于不同操作系统和设备的多个图像。 您可以为浏览器定义一组图标，用于添加到主屏幕、启动屏幕等。

例如，仅 iOS 就需要为其 4 台设备提供 4 种不同的尺寸：

• iPhone：120 x 120 像素和 180 x 180 像素
• iPad Pro：167 x 167 像素
• iPad 和 iPad mini：152 x 152 像素

即使是谷歌浏览器也需要至少 2 种不同的尺寸才能在 iOS 和 Android 上完全可用：

• 512 x 512 像素
• 192 x 192 像素

为了调用您的图像图标，需要使用一组属性，即src 、 type和sizes 。

• src ：图标图像文件的路径
• types ：图像文件类型
• sizes ：图像的宽度 x 高度，以像素为单位

 “图标”：[ 
    {
       "src" : "/imgs/icon152.png",
       “类型”：“图像/png”，
       “尺寸”：“192x192”
    },
    {
       "src" : "/imgs/icon215.png",
       “类型”：“图像/png”，
       “尺寸”：“512x512”
    }
]

• display ：指示应用程序应如何显示。 为了获得身临其境和类似应用程序的体验，建议您将其设置为fullscreen （无 UI）。 但是，也可以使用诸如standalone 、 minimal-ui之类的选项，它们在性能方面成本较低，但它们是以失去沉浸式体验为代价的（可能仍会显示状态栏）。

• start_url ：指示应用程序的启动路径。 如果您的应用程序从存储manifest.json的同一个 .root 目录开始，您的start_url值可能是一个简单的/ 。

可选成员

循规蹈矩是一回事，但总有空间让你努力变得更好。 以下是我们推荐的用于更好、更详细的 Web 应用程序清单的键：

• scope ：限制用户可以去的范围。 如果用户在范围之外导航，它会恢复到浏览器选项卡或窗口内的普通网页。 要确定您网站的范围，只需输入/或输入您网站的完整 URL。

备注：
– scope的默认行为是提供manifest.json的目录。
– 在 Web 应用程序中打开的任何链接都将在现有 PWA 窗口中呈现。 要在浏览器选项卡中打开任何链接，您需要将target="_blank"添加到<a>标记。
– start_url必须在范围内。

• background_color ：指示某些应用程序上下文中的背景颜色。 更具体地说，该字段可用于设置启动画面的背景颜色。

• theme_color ：表示 Web 应用的 UI 元素（例如地址栏）的主题颜色。 仅当从主屏幕启动站点时，更改才会在站点范围内应用且有效。

注意：您的页面级配置——例如，主题颜色元标记： <meta name="theme-color" content="#3367D6"> ——将覆盖 web 应用清单中的theme_color值。

• description ：这应该是不言自明的。

• shortcuts ：定义 Web 应用程序中页面的快捷方式。 可以通过在 Android 上长按应用程序的启动器图标或右键单击任务栏 (Windows)/停靠栏 (macOS) 上的应用程序图标来访问应用程序快捷方式。

 “捷径”：[
  {
    “名称”：“通知”，
    "url": "/user/notifications/",
    "description": "你错过的新闻"
  },
  {
    "name": "创建新订单",
    “网址”：“/创建/订单”
  },
  {
    "name": "我的愿望清单",
    “网址”：“/用户/愿望清单”
  }
]

使用 Web 应用清单生成器

一种更简单、更轻松的方法是使用 Web 应用程序清单生成器。 生成器接收您的输入，并在此基础上生成可按原样使用的功能齐全的 Web 应用程序清单。

链接你的 manifest.json

一切都正确配置后，下一步是在 HTML 标头中引用 Web 应用程序清单。

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

引用 Web 应用清单后，所有受支持的浏览器现在都应该正确识别您的manifest.json 。 有关当前支持的浏览器的完整列表，请查看 CanIUse。

结论

这就是一个简单的网络应用清单。 创建一个功能齐全的manifest.json应该不需要任何时间。 只需进行一些额外的调整，您的 Web 应用程序就可以像任何其他 PWA 一样安装。