有时候想写个 App 给自己小范围使用，不想注册开发者账号上架 App Store，PWA 应用可以将网站直接添加到桌面作为一个 App，这种方式能以最低成本在不支持侧载应用的操作系统中(如iOS)实现类似“侧载”的效果。

PWA 和那些 H5 套壳 App 的方案 (例如Capacitor) 很接近。 但是无需上架即可安装，安装后可以从桌面图标全屏打开，享受 App 同等待遇，支持通知推送等。缺点是：安装使用需要一定引导(用户可能不会装)，只能用前端技术构建。

举个例子：某咔漫画app没有上架商店，iOS想用客户端就只能用配置文件安装，而且签名经常失效需要重新安装。但如果你安装它的 PWA 版，就可以绕开应用商店，直接从 Safari 安装，最终也能达到和 App 非常接近的体验。

PWA 也支持电脑端，可以部分作为 Electron、Tauri 的替代。

创建应用

1. 创建配置文件（manifest.json）

这个文件可以配置 PWA 应用的名称、图标、行为等。 可以直接复制这个最简配置修改使用:

注意：App 图标必须至少配置 1 个，并且确保这个文件存在，否则会报错。

{
  "name": "应用全名称",
  "short_name": "应用短名称",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

2.引入配置文件

在 index.html 中引入配置文件。

<link rel="manifest" href="manifest.json" />

大功告成，一个最简单的 PWA 应用已经创建成功！ 此时在 Safari 上打开你的网站，分享 - 添加到主屏幕，你就成功安装了你的 App。

PWA 只能在 https 站点 或本地局域网中打开；安装的应用将会以全屏的形式打开，不再有浏览器的 UI 束缚。

管理应用

创建一个 Service Worker.js

Service worker 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的资源。它还提供入口以推送通知和访问后台同步 API。

self.addEventListener('install', event => {
  // 第一次注册时触发，用于缓存静态资源（如 HTML、CSS、JS、图片等）
});

self.addEventListener('fetch', event => {
  // 拦截所有网络请求，决定是否从缓存返回、从网络获取或混合策略处理
});

启动 Service Worker

<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/AppWorker.js')
            .then(reg => console.log('Service Worker注册成功:', reg.scope))
            .catch(err => console.error('Service Worker注册失败:', err));
}
</script>