google pwa

PWA 是 Progressive Web App 的缩写，是一种结合了 Web 和 Native App 优点的新型应用模式。它可以在浏览器中像网页一样访问，也可以像原生应用一样被添加到主屏幕，支持离线访问、推送通知等功能。Google 在 2015 年提出了 PWA 的概念，并在 Chrome 中提供了对 PWA 的支持。

相关问题

pwa + uniapp

### 如何在 UniApp 中实现 PWA 功能

#### 实现离线访问和安装

为了使基于 UniApp 的项目能够作为 Progressive Web App (PWA) 正常工作并具备离线访问以及可安装的能力，需遵循特定的配置流程。这涉及到设置 `service-worker` 和创建 `web manifest` 文件来定义应用的行为。

对于 **Service Worker** 来说，在 UniApp 里可以通过简单的几步完成集成：

1. 修改项目的 `manifest.json` 配置文件，开启 PWA 支持选项；
2. 使用官方提供的插件或工具自动生成必要的 service worker 脚本；

具体操作如下所示[^1]：

{
    "pwa": {
        "workboxPluginMode": "GenerateSW",
        "workboxOptions": {}
    }
}

上述 JSON 片段展示了如何启用 Workbox 插件来自动生成 Service Worker 并优化其性能表现。Workbox 是由 Google 开发的一套用于简化 PWAs 编写的库集合[^3]。

关于 **Web Application Manifest**, 则需要准备一个名为 `manifest.json` 的文件放置于项目的静态资源目录下，并确保其中包含了描述应用程序基本信息的内容，比如名称、短名、启动 URL 及图标路径等属性:

{
  "name": "我的 UniApp 应用",
  "short_name": "UniApp",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "description": "这是一个使用 UniApp 构建的应用。",
  "icons": [
    {
      "src": "/static/icon.png",
      "sizes": "192x192"
    },
    ...
  ]
}

最后一步是要保证整个站点通过 HTTPS 协议传输数据以满足安全需求[^2]。因为只有在这种情况下才能成功注册 Service Workers, 同时也保护了用户的隐私不受第三方窃听威胁。

一旦完成了这些准备工作之后，当用户首次打开该网站时就会自动触发 Service Worker 安装过程，并且如果他们同意的话还可以选择把此网页添加到主屏幕上来获得更接近本地APP样的体验效果。