PWA

# 可离线
# 高性能
# 无需安装
# 原生体验

Manifest

{"name": "天气助手",    				// 应用全名"short_name": "天气",                  // 短名称（主屏幕显示）"start_url": "/index.html",           // 启动时加载的URL（可带参数）"display": "standalone",             // 显示模式	 fullscreen, standalone, minimal-ui, browser 一般用前2个"background_color": "#2196F3",       // 启动屏背景色"theme_color": "#2196F3",            // 状态栏/工具栏颜色"description": "实时查看本地天气信息",   // 描述信息"icons": [                            // 图标配置  推荐尺寸：至少提供 192x192 和 512x512 两种尺寸{"src": "icons/icon-72x72.png","sizes": "72x72","type": "image/png"},{"src": "icons/icon-192x192.png","sizes": "192x192","type": "image/png"},{"src": "icons/icon-512x512.png","sizes": "512x512","type": "image/png","purpose": "any maskable"   // 适配不同设备形状}],"scope": "/",                  // 应用作用域（默认同manifest目录）"orientation": "portrait-primary","categories": ["weather", "productivity"]
}

》》HTML中链接Manifest

name="apple-mobile-web-app-capable" content="yes"> name="apple-mobile-web-app-title" content="天气"> rel="apple-touch-icon" href="/icons/icon-180.png">

》》验证工具
Lighthouse：检查Manifest完整性

Web Manifest Validator：

PWA Builder：

Service Workers

浏览器在后台独立于网页运行的脚本
拦截和处理网络请求，操作缓存
支持Push API 等
后台同步、更新缓存

Push API

SSE、Webworker 、webSocket、Http、Socket 服务器推送技术
Push API 是一种现代 Web 技术，允许服务器主动向客户端（如浏览器或移动应用）推送实时消息或数据更新，而无需客户端先发起请求。

// 浏览器端示例：监听推送
navigator.serviceWorker.addEventListener('push', (event) => {const data = event.data.json();self.registration.showNotification(data.title, { body: data.message });
});