探索平台

PWA Builder 是由微软持续开发的开源项目。

虽然 PWA Builder 的功能不如 Workbox（后文将介绍）强大，但它提供了有趣的功能，可用于验证或发布我们的 PWA。

验证现有 PWA

从首页开始，我们可以输入一个现有 PWA 的 URL。该平台会对其进行分析，并生成包含多个部分（Web 清单、服务工作线程、安全性）的报告，对每个部分提供提示或警告。

以 Angular 官方文档网站为例，因为它是一个完整的 PWA。

该工具会扫描 Web 应用清单、已安装的服务工作线程以及安全连接，并检查其他多个参数。它为每个部分打分，并提供可改进项的建议：

Web 清单

我们先来分析 Web 清单部分。

点击 编辑您的清单 按钮，即可修改 Web 清单属性：

这非常方便，因为我们可以查看所有可用的属性，甚至可以为现有的清单文件添加新的字段，以防遗漏。
此外，该平台还支持上传图片，系统会自动为其生成多种尺寸的图像。这不仅节省大量时间，还能确保图像在目标设备上像素完美——因为我们可针对不同平台进行选择，生成的文件也会相应优化。

服务工作线程

点击 生成服务工作线程 按钮，会弹出一个对话框，展示一些常见的 PWA 实用模板，可根据需要直接用于我们的应用中。

以下是一些可以直接集成到项目中的代码示例，例如实现离线页面或缓存优先策略。通过点击“添加到基础包”按钮，平台会自动生成包含所选功能的最终服务工作线程文件。相比手动复制粘贴各个代码片段，这种方式更加优雅高效。

以下是创建离线页面的代码示例，用于在用户无网络连接时显示：

1// 这是“离线页面”服务工作线程
2
3importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
4
5const CACHE = "pwabuilder-page";
6
7// TODO: 将下面的值替换为正确的离线备用页面路径，例如：const offlineFallbackPage = "offline.html";
8const offlineFallbackPage = "ToDo-replace-this-name.html";
9
10self.addEventListener("message", (event) => {
11  if (event.data && event.data.type === "SKIP_WAITING") {
12    self.skipWaiting();
13  }
14});
15
16self.addEventListener('install', async (event) => {
17  event.waitUntil(
18    caches.open(CACHE)
19      .then((cache) => cache.add(offlineFallbackPage))
20  );
21});
22
23if (workbox.navigationPreload.isSupported()) {
24  workbox.navigationPreload.enable();
25}
26
27self.addEventListener('fetch', (event) => {
28  if (event.request.mode === 'navigate') {
29    event.respondWith((async () => {
30      try {
31        const preloadResp = await event.preloadResponse;
32
33        if (preloadResp) {
34          return preloadResp;
35        }
36
37        const networkResp = await fetch(event.request);
38        return networkResp;
39      } catch (error) {
40
41        const cache = await caches.open(CACHE);
42        const cachedResp = await cache.match(offlineFallbackPage);
43        return cachedResp;
44      }
45    })());
46  }
47});

值得注意的是，即使 PWA Builder 在示例中也使用了 Workbox（见第 3 行）。如今，Workbox 已成为构建生产级 PWA 的事实标准解决方案。

应用功能

本部分推荐了一些额外且相对不常见的功能，可加入到我们的 PWA 中。尽管这些功能可能不太常见，但它们是探索新方式提升应用体验、紧跟最新网页技术趋势的绝佳途径。

使用 VSCode 插件

上述所有功能也可通过 VSCode 插件 实现。

这使得我们可以在 IDE 内直接完成 PWA 构建，从而减少切换到 PWA Builder 平台带来的上下文切换。

该插件提供的功能包括：

• 使用 pwa-starter 模板快速创建全新的 PWA
• 将现有网页应用转换为 PWA
• 审核 PWA，确保其符合应用商店发布要求并可安装
• 通过 Azure Static Web Apps 将 PWA 发布到网络
• 为 Microsoft、Google 和 Apple 应用商店打包 PWA
• 生成服务工作线程以支持离线功能
• 生成适用于 PWA 的正确尺寸图标