PWA (Progressive Web Apps) 与 Web App 全景解析
[INFO] 核心概念 / Core Concept
PWA (渐进式网页应用) 并不是一种全新的框架，而是一种设计理念和技术的集合。它利用现代 Web 能力（如 Service Workers）来提供类似原生 App 的用户体验。
PWA (Progressive Web Apps) is not a brand new framework, but a design philosophy and a collection of technologies. It utilizes modern Web capabilities (such as Service Workers) to provide a user experience similar to native apps.
1. Web App 与 PWA 的区别
1. Differences Between Web Apps and PWAs
传统的 Web App 依赖于浏览器，一旦断网通常无法使用，且难以保留在用户桌面上。
Traditional Web Apps rely on the browser; they are usually unusable once disconnected from the internet and are difficult to keep on the user's desktop.
PWA 则填补了网页应用与原生应用（Native App）之间的鸿沟。
PWAs bridge the gap between web applications and Native Apps.
对比表格 / Comparison Table
| 特性 (Feature) | 普通 Web App (Standard Web App) | PWA (Progressive Web App) | 原生应用 (Native App) |
|---|---|---|---|
| 安装 (Installation) | 不可安装 (Not installable) | 可添加到主屏幕 (Add to Homescreen) | 应用商店下载 (App Store) |
| 离线能力 (Offline) | 无 (None) | 强 (Strong via Service Worker) | 强 (Strong) |
| 更新 (Updates) | 刷新即更新 (Update on refresh) | 后台静默更新 (Silent background update) | 需下载更新包 (Download required) |
| 系统权限 (Access) | 受限 (Limited) | 适中 (Moderate - Bluetooth, Camera) | 完全 (Full) |
| 性能 (Performance) | 依赖网络 (Network dependent) | 缓存优先，加载快 (Cache-first, fast load) | 本地运行，极快 (Local run, very fast) |
2. PWA 的三大核心技术
2. Three Core Technologies of PWA
要将一个普通的 Web App 升级为 PWA，通常需要以下三个关键技术栈：
To upgrade a standard Web App to a PWA, the following three key technology stacks are usually required:
A. Service Workers
这是 PWA 的“大脑”。它是一个运行在浏览器后台的脚本，独立于网页。
This is the "brain" of a PWA. It is a script running in the browser background, independent of the web page.
- 功能： 拦截网络请求、管理缓存、实现离线访问。
- Function: Intercepts network requests, manages caching, and implements offline access.
- 关联技术： JavaScript (脚本语言), Promise (JavaScript 异步对象), Caching Strategies (缓存策略).
B. Web App Manifest
这是一个 JSON 文件，定义了应用在用户设备上的外观。
This is a JSON file that defines the application's appearance on the user's device.
- 功能： 设置应用名称、图标、启动画面（Splash Screen）和显示模式（全屏或独立窗口）。
- Function: Sets the app name, icons, splash screen, and display mode (fullscreen or standalone).
// manifest.json 示例 / Example
{
"name": "My PWA App",
"short_name": "MyPWA",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [ ... ]
}
C. HTTPS
安全是 PWA 的基石。由于 Service Worker 能够拦截网络请求，因此必须在 HTTPS 环境下才能注册。
Security is the cornerstone of PWA. Since Service Workers can intercept network requests, they must be registered in an HTTPS environment.
- 例外：
localhost通常被浏览器视为安全环境，用于开发调试。 - Exception:
localhostis usually treated as a secure environment by browsers for development and debugging.
3. 为什么选择 PWA？(优缺点分析)
3. Why Choose PWA? (Pros and Cons Analysis)
[TIP] 适用场景 / Use Cases
适合新闻阅读、社交媒体、电商购物等内容展示型或轻量交互型应用。
Suitable for content-display or light-interaction applications such as news reading, social media, and e-commerce.
优势 (Pros)
- 跨平台 (Cross-platform): 一套代码，运行在 Android, iOS, Windows, macOS 上。
- One codebase runs on Android, iOS, Windows, and macOS.
- 无需应用商店 (No App Store): 避免了复杂的审核流程和高额的分成费用（如 Apple 的 30% 税）。
- Avoids complex review processes and high commission fees (like the "Apple Tax").
- 可被索引 (Linkable & Indexable): 每个页面都有 URL，利于 SEO。
- Every page has a URL, which is beneficial for SEO.
劣势 (Cons)
- 硬件调用受限 (Limited Hardware Access): 虽然 Web API 在进步，但仍无法像原生应用那样完全访问所有传感器（如高级蓝牙控制、NFC 等在 iOS 上受限）。
- Although Web APIs are improving, they still cannot fully access all sensors like native apps (e.g., advanced Bluetooth control, NFC are limited on iOS).
- iOS 支持滞后 (iOS Support Lag): 苹果对 PWA 的支持不如 Android 完善（例如推送通知的支持较晚）。
- Apple's support for PWAs is not as comprehensive as Android's (e.g., support for push notifications came later).
4. 成功案例
4. Success Stories
- Twitter Lite: 数据消耗减少 70%，页面交互增加 65%。
- Reduced data consumption by 70% and increased page interaction by 65%.
- Starbucks: PWA 版本大小仅为原生 iOS 应用的 1/500。
- The PWA version size is only 1/500th of the native iOS app.
- Pinterest: 用户停留时间增加了 40%。
- User time spent on the site increased by 40%.
[QUESTION] 思考 / Reflection
随着 WebAssembly (Wasm) 的发展，Web App 的性能瓶颈正在消失。未来 PWA 是否会完全取代非游戏类的原生应用？
With the development of WebAssembly (Wasm), the performance bottlenecks of Web Apps are disappearing. Will PWAs completely replace non-gaming native apps in the future?
本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Web