跳转到内容
OpenPWA

入门

目标： 一个被浏览器识别为可安装、在主屏或程序坞上有应用图标的站点。本路径把 一个普通网站加上让它成为 PWA 的两样东西——Web 应用清单与 Service Worker——再对照 各平台的可安装门槛进行检查。

本指南讲怎么做。每一步背后的是什么，请沿链接进入参考； 在哪里可用，请沿链接进入兼容性。

开始之前

Section titled “开始之前”

你需要一个通过 HTTPS（或开发时 localhost）提供的站点、一套小图标和一个编辑器。 无需任何框架或构建工具——PWA 是加到现有站点上的，而非一种新的项目类型。

步骤

Section titled “步骤”

  1. 使用安全来源提供服务。 Service Worker 与安装仅在 HTTPS 或 localhost 下运行。 继续之前先确认开发 URL 属于其一。

  2. 添加 Web 应用清单。 创建 manifest.webmanifest，至少包含 name、start_url、 display 以及 192px 与 512px 图标，并从 HTML <head> 引用它。各字段及其效果见 清单参考；display 模式 决定保留多少浏览器界面。

  3. 注册 Service Worker。 添加 service-worker.js 并从页面脚本注册。即使一个空的 fetch 处理器也能满足要求；worker 做什么（缓存、离线）稍后再说。注册与更新行为见 Service Worker 参考及其 生命周期。

  4. 检查可安装性。 打开浏览器的应用/PWA 开发面板，确认它将应用报告为可安装。门槛—— 清单、安全来源、带 fetch 处理器的 Service Worker、图标——总结于 安装参考。安装提示本身的支持各有不同，见 安装提示兼容性数据。

  5. 测试安装时机。 从浏览器触发安装，然后启动已安装的应用。在 iOS 上，路径是 Safari 的添加到主屏幕而非提示——该平台差异见 iOS / Safari 平台说明。

你现在拥有

Section titled “你现在拥有”

一个被浏览器当作应用对待的站点：可安装、可从主屏启动，并为下一层做好准备——真正的 离线策略、经过设计的安装体验，以及 性能调优。

下一步

Section titled “下一步”
  • 让它可安装 —— 超越最低门槛，走向刻意设计的安装时机。
  • 离线策略 —— 给 Service Worker 一些有用的事情做。
  • 清单参考 —— 每个字段的详细说明。

← 返回指南总览。