PWA（Progressive Web App） 是一种新型的 Web 应用程序，它能够为用户提供和原生应用类似的体验，包括离线访问、消息推送、本地存储等功能。而对于用户来说，一个应用的图标往往是第一眼印象。因此，PWA 允许开发者通过 manifest 文件自定义应用图标，使应用更具个性化和可识别性。
本文将深入介绍如何通过 manifest 文件设置 PWA 应用图标，并附带实例代码和效果演示。
一、什么是 Manifest 文件
Manifest 是一个 JSON 格式的配置文件，包含了许多与应用相关的属性，比如应用名称、图标、主题色等。它允许开发者定义 PWA 应用的整体外观和行为，使得 Web 应用更具渲染性和交互性。
Manifest 文件需要我们在 HTML 中显式声明，通过 <link> 标签引入，例如下面的例子：
<link rel="manifest" href="/manifest.json">
Manifest 文件名通常为 manifest.json，放置在根目录下。文件内容包含以下属性：
name：应用名称short_name：应用短名称，显示在应用启动器上start_url：应用打开时加载的 URLdisplay：应用启动器显示的模式（可选值为：fullscreen、standalone、minimal-ui、browser）background_color：应用启动前的背景色theme_color：应用主题色icons：应用图标列表
其中，icons 属性是 PWA 应用图标的关键所在。
二、通过 Manifest 自定义应用图标
icons 属性是一个数组，每个元素表示一个应用图标的配置信息，包括以下属性：
src：图标文件的 URL 路径sizes：图标尺寸，多个大小以空格分隔（例如："32x32 64x64"）type：图标文件的 MIME 类型
我们来看一个完整的示例代码：
-- -------------------- ---- -------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------- -
-
------ ------------------------
-------- --------
------- -----------
--
-
------ ------------------------
-------- --------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
-
-
-上面代码中，我们定义了应用名称、短名称、启动 URL、显示模式、背景色、主题色以及 8 种不同尺寸的图标。每个图标都需要提供 src、sizes 和 type 三个属性。
当用户将 PWA 应用添加到主屏幕后，应用图标将使用 short_name 和 icons 属性中最适合尺寸的一个图标。同时，Web App Manifest 还允许我们设置以下图标：
apple-touch-icon：iOS 主屏幕和 Web Clip 的图标apple-touch-startup-image：iOS 启动画面mstile-70x70：Windows 8.1 下磁贴平铺使用的小图标mstile-150x150：Windows 8.1 下磁贴平铺使用的中等图标mstile-310x150：Windows 8.1 下磁贴平铺使用的宽屏图标mstile-310x310：Windows 8.1 下磁贴平铺使用的大图标
这些图标的配置方式与上面的示例代码类似，在 manifest.json 中定义即可。
三、示例代码和效果演示
我们来看一个完整的示例代码，实现一个 PWA 应用并自定义应用图标。代码包括一个简单的计数器页面和一些相关的文件和目录。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
--------- --- -----------
----- --------------- ---------------------------- -------------------
----- ------------------ ------------------
----- -------------- ----------------------
----- ------------- ----- --------------------
-------
---- -
------------ ------ -----------
---------- -----
----------- -------
-
-- -
----------- -----
-
------ -
---------- -----
------- -----
-------- ---- -----
----------------- --------
------ -----
------- -----
-------------- ----
------- --------
-
--------
-------
------
------------ ----- ------------------------
------- ------------ ----------
------- -------------------------
-------
-------// index.js
let count = 0;
const countEl = document.getElementById('count');
const btnAdd = document.getElementById('add');
btnAdd.addEventListener('click', () => {
count++;
countEl.innerHTML = count;
});-- -------------------- ---- -------
-- -------------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------- -
-
------ ------------------------
-------- --------
------- -----------
--
-
------ ------------------------
-------- --------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
--
-
------ --------------------------
-------- ----------
------- -----------
-
-
-/* 文件：styles.css */
body {
background-color: #f4f4f4;
padding-top: 40px;
}生效效果演示：
四、总结
自定义应用图标是 PWA 应用中重要的一个方面，通过设置 Web App Manifest 的 icons 属性，我们可以自由配置应用的图标集合。除了图标之外，Web App Manifest 还提供了其他易于配置的属性，例如应用名称、显示模式和主题色等。这些功能让开发者能够更好地为用户提供高质量的 Web 体验，并且使得 PWA 应用更具个性化和可识别性。
希望通过本文的介绍，读者们能够更好地了解 PWA 应用图标的设置方法，并能在自己的应用中灵活使用。同时，我们也要注意适配不同屏幕尺寸的图标大小，以便在各种设备上获得最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645501ad968c7c53b08b026b