Coursera 笔记

Module 02 · Web Design Methodologies网页设计方法论

Converting Existing App to PWA将现有应用转换为 PWA

Coursera ↗

欢迎来到“将现有应用转换为 PWA”课程。观看完本视频后，您将能够：

  • 解释 渐进式 Web 应用程序（PWA） 的概念。
  • 讨论将现有网站转换为 PWA 的原因。
  • 描述将现有网站转换为 PWA 的步骤。

什么是渐进式 Web 应用程序 (PWA)？

PWA 通过使用最新技术，结合了网站和移动应用程序的优点。PWA 可在所有设备和平台上运行，包括桌面和手机，并且可以像原生应用程序一样安装在用户设备上。

将现有网站转换为 PWA 的原因

将现有网站转换为 PWA 的主要原因包括：

  1. 性能提升
  2. 用户参与度提高
  3. 搜索引擎优化 (SEO) 改进

1.性能提升

使用 PWA 的最重要原因是其能够提升网站性能。传统网站依赖稳定的网络连接才能正常运行，而 PWA 由于其数据缓存能力，可以在离线或网络质量较差的情况下工作，让用户即使没有网络连接也能访问内容。

此外，PWA 通过仅加载必要的 HTML、CSS 和 JavaScript，比传统网站加载速度更快，从而减少数据消耗。

2.用户参与度提高

将网站转换为 PWA 的另一个原因是它可以提高用户参与度。即使用户未主动使用您的应用程序，推送通知也可以让您及时传递相关内容更新，帮助用户保持对您的内容的新鲜感。

此外，由于 PWA 可以在离线或网络连接较差的情况下运行，用户在浏览内容时不太可能遇到缓冲或连接缓慢的问题，从而提升用户体验并激励用户频繁访问您的网站。

3.SEO 改进

最后，将网站转换为 PWA 还可以提高网站的搜索引擎优化 (SEO)，因为 PWA 受到 Google 和 Bing 等搜索引擎的支持。

将网站转换为 PWA 的步骤

通过添加功能和修改代码，可以将网站转换为 PWA，使其在移动设备上像应用程序一样运行。将网站转换为 PWA 的一般步骤如下：

  1. 构建网站或利用现有网站
  2. 创建 Web App Manifest 文件
  3. 创建 Service Worker
  4. 使您的网站支持离线功能
  5. 实施测试

1.构建网站或利用现有网站

第一步是构建网站或利用现有网站。您可以使用 HTML、CSS 和 JavaScript 开发新网站，或在将其更新为 PWA 之前将现有网站托管在 HTTPS 上。这是因为 PWA 依赖于许多仅通过安全连接才能工作的功能，例如 Service Worker 和 Web App Manifest。

2.创建 Web App Manifest 文件

第二步是创建 Web App Manifest 文件。它本质上是一个 JSON 文件，包含有关 PWA 的信息，如名称、作者、图标、版本和描述。Manifest 文件还列出了应用程序正常运行所需的所有资源。当浏览器连接到网络时，它会扫描 Manifest 文件并下载所有必要的资源，然后将其缓存在本地，以便在无网络连接时也能使用 PWA。

Web App Manifest 的重要性在于它提供了必要的 JSON 数据，以支持 Service Worker 缓存信息。这与 Shell 应用程序 结合，确保 CSS 路由加载过程有效完成，并保证离线分发时具有完整的 UI 功能。

创建 Web App Manifest 时，可以使用 PWA Builder 等工具或手动创建。创建 Manifest 文件后，应将其添加到网站的根目录中。此外，通过使用 viewport meta 标签，确保网站具有移动设备友好性，从而实现从桌面到任何设备尺寸的无缝过渡。

3.创建 Service Worker

第三步是创建 Service Worker。Service Worker 是充当浏览器与服务器之间中介的 JavaScript 文件，它们能够提高网站的可靠性、性能和用户体验。

Service Worker 的重要好处之一是能够缓存文件和资源，即使用户处于离线状态或网络连接较弱，也能访问这些资源。这对于可能面临连接问题的移动用户尤其有用。Service Worker 还可以通过提前缓存资源和管理 PWA 的推送通知来加快页面加载速度。它们负责所有文件缓存、服务器推送通知、内容更新和通过监听服务器上的网络请求并将其作为 .js 文件放置在用户设备上的数据操作。

4.使您的网站支持离线功能

下一步是使您的网站支持离线功能。在开发 PWA 时，保持网站在离线状态下正常运行至关重要，特别是在网络覆盖较差的地区，这一功能可以提高用户体验并增强用户对应用程序的参与度。

5.实施测试

最后一步是测试。测试有助于在问题变得严重之前发现并解决错误，确保 PWA 按预期运行。可以执行不同类型的测试以确保 PWA 的质量，包括：

  • 单元测试
  • 回归测试
  • 性能测试
  • 用户体验 (UX) 测试
  • 跨浏览器测试

在 PWA 的转换过程中，注册并安装 Service Worker 到 Chrome 浏览器中是至关重要的一步。这一步确保 Service Worker 能够正常运行并提供预期的功能，例如离线访问和性能提升。此外，使用 Lighthouse Extension 等工具可以帮助全面审核 PWA 的性能。

总结

在本视频中，您了解到：

  • 渐进式 Web 应用程序 (PWA) 通过使用最新技术，结合了网站和移动应用程序的优点。
  • 将现有网站转换为 PWA 的原因包括：
    • 性能提升
    • 用户参与度提高
    • SEO 改进
  • 将网站转换为 PWA 的步骤如下：
    1. 构建网站或利用现有网站
    2. 创建 Web App Manifest 文件
    3. 创建 Service Worker
    4. 使您的网站支持离线功能
    5. 实施测试

通过掌握这些知识，您将能够将现有网站转换为 PWA，为用户提供更流畅、更高效的体验！ 🚀