什么是 PWA？
PWA 全称为 Progressive Web App，是一种新型的 Web 应用程序，它结合了 Web 和 Native 应用的优点，使用 Web 技术开发，但具备 Native 应用的功能和用户体验。
PWA 技术可以让 Web 应用具备离线缓存、推送通知、添加到主屏幕等 Native 应用的特性，同时也能够实现快速加载、优秀的性能和响应速度等 Web 应用的优点。
PWA 在 Android 上的应用
PWA 技术在 Android 上得到了广泛的应用。用户可以将 PWA 应用添加到主屏幕，像 Native 应用一样使用，同时也可以享受 Web 应用的灵活性和便捷性。
在 Android 上，PWA 应用的图标默认是 Web 应用的图标，如果想要实现应用图标的更换，可以通过以下步骤实现。
如何在 Android 上实现应用图标更换
1. 添加 manifest.json 文件
在 PWA 应用的根目录下添加 manifest.json 文件，用于定义 Web 应用的相关信息，包括应用名称、图标、主题色、启动方式等。
下面是一个示例的 manifest.json 文件内容：
// javascriptcn.com 代码示例
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"theme_color": "#007bff",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}2. 添加应用图标
在 manifest.json 文件中定义应用图标后，需要在应用的根目录下添加对应的图标文件，以供 Android 系统使用。
在上面的示例 manifest.json 文件中，定义了两个图标文件：icon-192.png 和 icon-512.png，分别对应不同尺寸的应用图标。
3. 添加 meta 标签
在应用的 HTML 文件的 head 标签中添加以下 meta 标签，用于告诉 Android 系统应该使用哪个图标作为应用图标：
<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#007bff"> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
其中，rel="manifest" 的 meta 标签用于引用 manifest.json 文件，name="theme-color" 的 meta 标签用于定义应用的主题色，rel="icon" 的 meta 标签用于定义应用图标。
4. 清除缓存并添加到主屏幕
在完成上述步骤后，需要清除缓存并重新加载应用，然后将应用添加到 Android 设备的主屏幕上，即可看到应用图标已经被更换为指定的图标。
总结
PWA 技术在 Android 上的应用越来越广泛，实现应用图标的更换可以让 PWA 应用和 Native 应用更加相似，提升用户体验和应用的可用性。通过上述步骤，我们可以简单地实现应用图标的更换，并让应用在 Android 上拥有更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65118b2c95b1f8cacda11b74