pwa主要哪些功能

PWA（Progressive Web App，渐进式 Web 应用）是一种利用现代 Web 技术，让网站拥有接近原生 App 使用体验的技术方案。它并不是一个新框架，而是一组技术和最佳实践。

PWA 主要包含以下几个核心功能：

1. 安装到桌面（Installable）

用户可以直接将网站安装到手机或电脑，无需经过应用商店。

特点：

  • 出现在手机桌面

  • 有独立图标

  • 独立窗口运行（不像普通浏览器标签页）

  • 可以卸载

例如：

  • ChatGPT Web

  • Twitter/X

  • Starbucks

2. 离线访问（Offline Support）

这是 PWA 最重要的功能之一。

依靠 Service Worker 可以：

  • 缓存 HTML

  • 缓存 CSS

  • 缓存 JS

  • 缓存图片

  • 缓存 API 数据

即使没有网络，也可以：

  • 打开 App

  • 浏览已缓存页面

  • 查看历史数据

例如：

第一次访问
↓
缓存资源

第二次没网
↓
依然可以打开

3. 网络缓存（Caching）

除了离线，还可以提高访问速度。

常见缓存策略：

  • Cache First

  • Network First

  • Stale While Revalidate

  • Cache Only

  • Network Only

例如：

首页
↓
直接读取缓存（几乎秒开）

后台
↓
更新缓存

4. Push Notification（推送通知）

即使网页关闭，也可以收到通知。

例如：

订单已发货

您有新的消息

活动开始啦

需要：

  • Service Worker

  • Push API

  • Notification API

一般还需要服务器发送 Push 消息。

5. 后台同步（Background Sync）

网络不好时：

提交评论
↓

暂存本地

↓

恢复网络

↓

自动上传

用户不用重新提交。

6. App Shell（应用外壳）

PWA 推荐采用 App Shell 架构。

首次缓存：

HTML
CSS
JS
Logo
导航栏

之后打开：

先显示 UI

↓

再请求数据

↓

页面更新

因此体验接近原生 App。

7. 全屏体验

通过 Web App Manifest 可以设置：

"display": "standalone"

效果：

  • 没有浏览器地址栏

  • 没有标签页

  • 看起来就是一个 App

还可以配置：

  • 图标

  • 启动页

  • 主题颜色

  • 横竖屏

8. Web App Manifest

Manifest 是一个 JSON 文件，例如：

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

作用：

  • App 名称

  • 图标

  • 启动地址

  • 启动方式

  • 主题颜色

9. 响应式设计（Responsive）

PWA 要求适配：

  • 手机

  • 平板

  • PC

  • 横屏

  • 竖屏

通常结合：

  • Flex

  • Grid

  • Media Query

10. 安全（HTTPS）

PWA 必须使用 HTTPS（localhost 开发环境除外）。

原因：

  • Service Worker 只能在 HTTPS 下工作

  • Push Notification 需要 HTTPS

  • 用户数据更安全

11. 自动更新

Service Worker 可以检测新版本。

流程：

打开 App

↓

发现新的 JS

↓

后台下载

↓

下一次刷新
或提示用户更新

很多大型网站都会实现：

发现新版本

点击刷新即可更新

PWA 的技术组成

一个完整的 PWA 通常包括以下几部分：

技术作用
HTTPS 安全传输，是 PWA 的基础要求
Service Worker 离线缓存、请求拦截、推送、后台同步
Web App Manifest 定义应用名称、图标、启动方式等
Cache API 管理资源缓存
Fetch API 拦截和处理网络请求
Push API 接收服务器推送消息
Notification API 显示系统通知
Background Sync API 网络恢复后自动同步数据

一个典型的 PWA 工作流程

用户首次访问
        │
        ▼
下载 HTML / CSS / JS
        │
        ▼
注册 Service Worker
        │
        ▼
缓存静态资源
        │
        ▼
用户再次打开
        │
        ▼
优先读取缓存（秒开）
        │
        ▼
后台请求最新数据
        │
        ▼
更新页面和缓存

总结

PWA 的核心能力可以概括为以下几项：

  • 可安装：像原生 App 一样添加到桌面。

  • 离线访问：借助 Service Worker 和缓存，在无网络时仍可使用部分功能。

  • 高性能加载：利用缓存策略实现更快的页面响应。

  • 推送通知：支持接收系统级通知。

  • 后台同步：网络恢复后自动同步数据。

  • 全屏应用体验：通过 Manifest 提供接近原生 App 的界面。

  • 自动更新：后台下载新版本并按策略生效。

  • 响应式设计：适配手机、平板和桌面设备。

  • 安全要求：通常必须部署在 HTTPS 环境下。

其中，Service Worker 是 PWA 的核心，它负责缓存、离线能力、请求拦截、推送通知和后台同步等关键功能；Web App Manifest 则负责定义应用的安装和展示方式。

posted @ 2026-07-03 10:44  jerry-mengjie  阅读(12)  评论(0)    收藏  举报