渐进式 Web 应用：从标签页到任务栏

1. 欢迎

在本实验中，您将使用现有的 Web 应用并使其可安装。这是渐进式 Web 应用工作坊的一系列配套 Codelab 中的第四个。上一个 Codelab 是 IndexedDB。本系列还有 4 个 Codelab。

学习内容

  • 手动编写 Service Worker
  • 向现有 Web 应用添加 Service Worker
  • 使用 Service Worker 和 Cache Storage API 使资源可离线使用

注意事项

  • HTML 和 JavaScript 基础知识

所需条件

2. 进行设置

首先，克隆或下载完成此 Codelab 所需的起始代码：

如果您克隆了代码库，请确保您位于 pwa04--tab-to-taskbar 分支中。该 ZIP 文件还包含相应分支的代码。

此代码库需要 Node.js 14 或更高版本。获得代码后，在代码的文件夹中通过命令行运行 npm ci，以安装所需的所有依赖项。然后，运行 npm start 以启动 Codelab 的开发服务器。

源代码的 README.md 文件提供了对所有分发文件的说明。此外，以下是您将在整个 Codelab 中使用的关键现有文件：

密钥文件

  • index.html - 主要应用 HTML

3. 创建 Web 应用清单

Web 应用清单文件用于描述 PWA，以便浏览器能够通过它和正常运行的服务工作线程了解您的 Web 应用是否可安装，以及更重要的是，了解如何将该 Web 应用呈现在要安装到的设备上。不过，首先需要创建该账号。在 Web 应用的 public 文件夹中添加一个名为 manifest.json 的文件，并将以下内容添加到其中：

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

别忘了为 iOS 设备添加 Apple 轻触图标。在 index.html 的 <head> 中，紧跟在 <title> 标记后面添加以下代码行

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

说明

此清单包含必需字段、建议字段和促销字段，因此涉及很多内容。首先，是定义 PWA 的名称、起始网址、显示模式和图标的必需字段。请注意，最后一个图标是可遮盖图标，可根据设备的界面显示多个图标。接下来是建议的主题和背景颜色字段。最后，还有宣传字段，即此 PWA 适用的说明和类别。当此清单附加到 PWA 时，这些字段将控制 PWA 的已安装应用如何显示和管理。

4. 将清单附加到 PWA

创建清单文件后，需要将其附加到 PWA，以便与 PWA 相关联。为此，请打开 index.html，然后在 <head> 中的 <title> 标记下方添加以下内容：

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

说明

清单链接会告知支持它的浏览器，所链接的 Web 应用清单描述的是当前网站。如果清单有效且可用，Service Worker 正常运行，并且 Web 应用通过了任何其他特定于浏览器的安装条件，则允许将您的应用直接安装到用户的设备上！

5. 添加快捷方式

让 PWA 感觉与设备更深度集成的一个好方法是，提供指向应用中特定功能的上下文菜单快捷方式。PWA 中的“夜间模式”切换开关允许通过将 mode 查询参数设置为 night 或 day 来选择模式。在 manifest.json 中设置两个快捷方式，以执行以下操作：

  • 以 night 或 day 模式启动 PWA
  • 使用 /images/logo.svg 作为图标，大小为 150x150

6. 恭喜！

您刚刚学习了如何创建 Web 应用清单文件、将其附加到网页，以及在安装时添加应用快捷方式。

本系列中的下一个 Codelab 是提示和衡量安装情况