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 });
});