前言
PWA (Progressive Web App) 是指“渐进式 Web 应用程序”，是一种新型的应用程序开发技术。PWA 应用提供了类似原生应用程序的丰富体验，并通过 Web 技术来提供快速响应和离线访问的能力。Web App Manifest 是 PWA 的一个关键功能，允许开发者控制和定制 PWA 应用程序在手机屏幕或电脑桌面上的外观和行为。
在本文中，我们将介绍 Web App Manifest 的基本概念和使用方法，重点讲解如何使用 Web App Manifest 添加桌面图标，以及如何为 PWA 应用程序添加更多的定制信息。
Web App Manifest 基本概念
Web App Manifest 是一个 JSON 文件，用于描述 PWA 应用程序的一些基本信息，例如应用程序名称、图标、颜色、主题等。在使用 Web App Manifest 前，需要先了解 Web App Manifest 中使用到的一些属性。
Web App Manifest 属性
下表列出了 Web App Manifest 的一些基本属性，这些属性定义了 PWA 应用程序的基本信息，并且可根据需要进行定制。
| 属性名 | 描述 |
|---|---|
| name | 定义应用程序的名称 |
| short_name | 定义应用程序的短名称 |
| description | 定义应用程序的描述信息 |
| icons | 定义应用程序的图标列表 |
| background_color | 定义应用程序启动时的背景颜色 |
| theme_color | 定义应用程序的主题颜色 |
在理解了这些属性后，我们可以开始了解如何使用 Web App Manifest 为 PWA 应用程序添加桌面图标。
添加桌面图标
使用 Web App Manifest 可以使 PWA 应用程序更容易被用户发现和访问。我们可以指定多个图标尺寸，当用户将应用程序添加到主屏幕上时，系统会根据设备分辨率选择适合的图标尺寸。
1. 创建 Web App Manifest 文件
我们需要在 PWA 应用程序的根目录下创建一个名为 manifest.json 的 JSON 文件，用于描述应用程序的基本信息。
下面是一个基本的 Web App Manifest 示例：
-
------- --- --- -----
------------- ---- -----
-------------- ----- -- - ---- --- ------
-------- -
-
------ -------------------------------
------- ------------
-------- -------
--
-
------ -------------------------------
------- ------------
-------- -------
--
-
------ ---------------------------------
------- ------------
-------- ---------
--
-
------ ---------------------------------
------- ------------
-------- ---------
--
-
------ ---------------------------------
------- ------------
-------- ---------
-
--
------------------- ----------
-------------- ---------
-在这个示例中，我们定义了应用程序的名称、短名称、描述、图标列表、背景颜色和主题颜色。注意，我们为图标属性列表指定了一组不同大小的图标，以确保在不同设备上显示的图标正确比例。
2. 将 Web App Manifest 文件链接到 HTML 页面
将 manifest.json 文件链接到 HTML 页面非常简单，只需要在 HTML 标头中添加一个 link 标签即可：
----- -------------- ----------------------
要添加应用程序到桌面，应用程序必须使用 HTTPS 协议或者 localhost。一旦打开应用程序，可以通过浏览器的“添加到主屏幕”功能添加到桌面。
更多定制
Web App Manifest 不仅可以定制桌面图标，还可以定义应用程序的许多其他属性，包括其启动方式（全屏、最小化、通知等）和提供 PWA 应用程序所需的其他信息。
启动方式
如果需要，我们可以通过 display 属性，指定 PWA 应用程序的启动方式，例如全屏或最小化。可以将 display 的值设置为以下选项之一：
fullscreen：应用程序会进行全屏显示。standalone：应用程序会呈现为自己的独立应用，不会在浏览器中显示地址栏。minimal-ui：应用程序在一个比较简单的状态下呈现，比 standalone 模式要稍微舒适一些。browser：应用程序将在浏览器中打开。
以下是一个示例：
-
------- --- --- -----
------------- ---- -----
-------------- ----- -- - ---- --- ------
-------- -
-
------ -------------------------------
------- ------------
-------- -------
-
--
---------- ------------
-在这个示例中，我们使用了 display 属性将应用程序显示为独立应用程序（standalone）。
添加 PWA 应用程序所需的其他信息
Web App Manifest 还允许我们定义应用程序需要的任何其他信息。例如，我们可以使用 start_url 属性指定应用程序的起始 URL，使用 related_applications 属性指定任何相关的应用程序，使用 base_url 属性指定应用程序所使用的基本 URL。
以下是一个更详细的示例：
-
------- --- --- -----
------------- ---- -----
-------------- ----- -- - ---- --- ------
-------- -
-
------ -------------------------------
------- ------------
-------- -------
-
--
---------- -------------
------------ ----
----------- --------
----------------------- -
-
----------- -------
------ ----------------------------------------------------------
--
-
----------- -----------
------ -------------------------------------------------------
--
-
----------- ------
------ -----------------------
-
-
-在这个示例中，我们除了定义了上述的基本属性外，还定义了应用程序的起始 URL，基本 URL，以及相关的应用程序信息，其中包括 Google Play 应用商店上的 Android 版本、App Store 上的 iOS 版本和网页版。
结论
Web App Manifest 提供了一种简单而强大的方式来定制 PWA 应用程序的外观和行为。通过指定应用程序的名称、描述、图标、主题等基本属性，并定义启动方式、以及提供其他信息，我们可以使 PWA 应用程序通过 Web 技术提供类似原生应用程序的丰富体验和快速响应能力，同时还可以支持离线访问。
这篇文章介绍了如何使用 Web App Manifest 为 PWA 应用程序添加桌面图标，并且讲解了如何为 PWA 应用程序添加更多的定制信息。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67226d712e7021665e0be613