#PWA 与 Web App Manifest

#1. PWA 概念

PWA（渐进式 Web 应用）是一种利用现代浏览器 API，使传统网页应用具备原生应用体验的技术标准集合。

其核心要素包括：

1. HTTPS：强制在安全环境下运行。
2. Service Worker：提供网络请求拦截、离线缓存和后台推送能力。
3. Web App Manifest：一份 JSON 配置文件，让网页能够被应用安装到设备主屏幕，并具备应用的外观表现。

#2. Manifest 配置

manifest.json 文件用于声明应用在设备上的展示方式。当满足浏览器的 PWA 安装条件时，浏览器会提示用户将应用安装到桌面。

在 HTML 中引入方式：

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

核心配置项说明：

{
  "name": "完整应用名称",
  "short_name": "短名称", 
  "description": "应用描述",
  "display": "standalone", 
  "start_url": "/?source=pwa", 
  "background_color": "#ffffff", 
  "theme_color": "#ffffff", 
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192", 
      "type": "image/png"
    }
  ]
}

#3. 面试常见扩展

• display 模式差异: standalone 表现最像常规应用，保留系统通知栏；而 fullscreen 则会隐藏系统状态栏，进入完全的全屏模式（适用于全屏游戏展示）。
• 可遮罩图标: 大部分设备系统会根据各自的 UI 规范对图标进行不同形状裁剪。在 icons 设置 "purpose": "maskable" 并提供四周留白空间内容的图标，可以确保图标不管怎么被裁剪都能正常显示。