PWA Web App

PWA 将 Web 的普适性与原生应用的功能结合，提供了一种灵活、轻量、高效的应用方式。对于希望降低开发成本、提高用户覆盖率的企业和开发者来说，PWA 是一种极具吸引力的选择。

• 跨平台兼容：一次开发，适用于多个平台（桌面、移动设备等），自动适配不同尺寸屏幕。

• 无缝更新：后台自动更新，不需要用户手动操作，提供无中断的用户体验。

• 离线可用：利用 Service Worker 缓存内容，支持离线访问和渐进增强。

• 推送通知：支持 Web 推送通知，保持与用户的实时互动，吸引用户回访。

• 轻量高效：无需下载和安装，节省存储空间，启动速度快。

• 安全：在 HTTPS 下运行，确保数据传输安全，受益于浏览器的安全措施。

• 搜索引擎优化：被搜索引擎索引，提升应用可见性和加载速度。

• 应用图标和界面：可添加到主屏幕，自定义启动页面和主题颜色，提供原生应用般的体验。

• 开发和维护成本低：使用统一的 Web 技术栈，降低开发和维护成本，代码库复用高。

• 离线访问: 可以在断网情况下继续访问应用

• 响应式设计: 适配各种设备尺寸和屏幕方向

• 添加到主屏幕: 用户可以将应用添加到桌面，像原生应用一样启动

• 推送通知: 可以发送推送通知提醒用户

目前比较火的PWA第三方平台 ROI Best

ROI Best
操作文档

可以基于此平台快速完成已有的网站的PWA化，快速上线，提高用户留存率，提升用户体验。

仿照Google Play Store 实现PWA应用的安装和打开

创建manifest.json文件

{
  "short_name": "TikTok", // 应用的短名称，用于桌面图标等处显示
  "name": "TikTok App", // 应用的全名
  "icons": [
    {
      "src": "favicon.ico", // 应用的网站图标文件路径
      "sizes": "64x64 32x32 24x24 16x16", // 图标文件的尺寸
      "type": "image/x-icon" // 图标文件的 MIME 类型
    },
    {
      "src": "manifest-icon-192.maskable.png", // 192x192 像素的应用图标文件路径
      "type": "image/png", // 图标文件的 MIME 类型
      "sizes": "192x192" // 图标文件的尺寸
    },
    {
      "src": "manifest-icon-512.maskable.png", // 512x512 像素的应用图标文件路径
      "type": "image/png", // 图标文件的 MIME 类型
      "sizes": "512x512" // 图标文件的尺寸
    }
  ],
  "start_url": ".", // 用户从主屏幕启动应用时加载的 URL
  "display": "standalone", // 控制应用的显示方式，standalone 表示独立窗口模式
  "scope": "/", // 定义 PWA 可以访问的 URL 范围
  "theme_color": "#000000", // 应用的主题色，会影响浏览器工具栏等的颜色
  "background_color": "#ffffff", // 应用的背景色
  "related_applications": [
    {
      "platform": "webapp", // 关联应用的平台类型   （webapp用来判断pwa应用是否已经安装的关键点）
      "url": "https://react-mobile-eight.vercel.app/manifest.json" // 关联应用的 manifest.json 文件 URL
    }
  ],
  "prefer_related_applications": true // 表示在支持的平台上优先使用关联应用
}

检测用户当前环境是否符合安装条件

 window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)

触发 appinstalled 事件，PWA 安装完成

 window.addEventListener('appinstalled', handleAppInstalled)

获取已安装的关联应用列表

返回一个 Promise 对象，可以异步获取用户设备上已安装的与当前 PWA 相关联的其他应用信息。

window.navigator.getInstalledRelatedApps()

必须在https下才能使用PWA

可以把代码发布到vercel上会自动生成https证书 （主要是不要钱）