关于Progressive Web App (PWA)所需图标尺寸及规范的技术问询

一、截至2018年第一季度，PWA所需的图标尺寸 #

按照当时的Web App Manifest规范和主流浏览器的实际要求，你需要准备以下核心尺寸的图标：

• 192x192px：基础桌面/安卓设备主图标，Chrome等主流安卓浏览器优先调用这个尺寸。
• 512x512px：高分辨率备用图标，用于高DPI屏幕、应用商店展示等需要大尺寸图标的场景。
• 144x144px：适配Windows设备的磁贴显示，当时Edge浏览器已支持PWA的磁贴功能。
• 72x72px、96x96px：针对低分辨率设备的适配，保证小屏幕下图标清晰显示。

另外，启动屏（Splash Screen）也需要对应设备比例的资源，当时不少开发者会用192x192px图标搭配纯色背景，快速生成适配多设备的启动屏素材。

二、PWA需配备的应用图标及Apple图标的必要性 #

哪怕2018年第一季度Safari对PWA的完整支持还不完善（比如未实现Web App Manifest全特性），仍然建议包含符合Apple规范的图标，原因很实际：

1. iOS用户可以通过“添加到主屏幕”功能把PWA变成类原生快捷方式，这时候会用到Apple指定的touch图标：
   • 180x180px：适配iPhone 6/7/8 Plus及之后的高分辨率设备。
   • 120x120px：对应iPhone 6/7/8等常规尺寸设备。
   • 76x76px：适配iPad基础款设备。
2. 虽然当时Safari没完全支持离线缓存、推送等PWA核心功能，但添加到主屏幕的体验已经能让用户获得接近原生应用的启动感，配套Apple图标能提升这部分用户的使用体验。

总结来说，2018年Q1的PWA需要同时覆盖Web App Manifest要求的通用图标，以及Apple的touch图标系列，才能适配主流桌面和移动设备的场景。

内容的提问来源于stack exchange，提问作者Dan Sorensen