用于 PWA 开发的高效堆栈

“一次编写，随处使用”。我热爱这种理念，也认为这是每个 Web 开发者的梦想：构建一个完全支持所有平台（移动端、浏览器、桌面端）且无需安装步骤的应用程序。渐进式 Web 应用 (PWA) 正在努力解决这个复杂的问题。

在本文中，我将讨论一个完整的全栈环境，它可以帮助我快速启动我的 PWA 项目。

在开始之前，我想分享一下这个 GitHub 仓库。这个开源项目是一个入门模板，完美地阐述了我接下来要提出的观点。所以，如果你需要一个具体的集成示例，欢迎随时查看。这个技术栈非常固执己见，但这正是它强大的原因。

以下是我的需求：

“我想要一个完整的全栈环境，帮助我专注于我的开发技能，以便快速构建渐进式 Web 应用程序，而不会损害最佳实践。”

让我们一步一步来吧！

数据库 + REST API

我会非常简短地讲。我们不需要任何数据库或 REST API。让我更具体一点：我们不想自己管理它们。为什么？因为托管它们很困难，而且需要维护更多代码。我们也不想处理诸如扩展之类的问题。请记住，我们想要的是快速的开发速度！

Firebase 的Firestore看起来是个不错的选择！借助客户端 API，我们可以从云端 NoSQL 数据库读取和写入数据，并且Firestore 的安全规则可以帮助我们提供访问控制和数据验证。此外，Firestore 还提供了离线数据持久化支持，这对于 PWA 来说非常有用。Firestore 还是一个实时数据库。这意味着我可以监听数据结构的特定部分，并获取应用程序的实时更新。

如果你需要在安全的上下文中（而不是在客户端）运行代码，该怎么办？例如，当客户端执行 CRUD 操作时触发业务逻辑？

为了处理这些特殊情况，我们可以使用firebase云功能。

太棒了！我们已经完成了大部分堆栈的工作，而且可以肯定的是，我们刚刚删除了大量代码。这正是我们想要的！

用户身份验证

您确实应该使用第三方（电子邮件、电话、社交媒体）来验证您的用户。这样开发人员可以编写更少的代码，并且我们的用户身份验证也更简单。

再次强调，我们可以使用 Firebase 来节省一些开发时间。Firebase身份验证提供了许多方法来处理身份验证：

• 社交网络登录（Google、Facebook、Twitter、Github……）
• 电话身份验证
• 带有身份验证链接的电子邮件
• 经典电子邮件/密码

前端

💚 Javascript 框架：

为什么选择Vue.js？因为我非常喜欢这个框架的理念，而且用起来效率很高。它简洁易用，提供了极佳的开发体验，而且它可能是目前最容易学习的 JavaScript 框架。

在我看来，没有“最好的 JavaScript 框架”。最重要的是选择你喜欢的框架。

💅 UI 组件框架 / CSS：

在 PWA 环境中，我建议你编写自己的 CSS 和 UI 组件。我认为很难找到一个好的轻量级 UI 组件框架，而且我们的 PWA 需要快速加载。所以，如果你决定使用框架，请务必注意它会如何影响你的应用程序大小。

🔁 前端状态管理：

Vuex是 Vue.js 的默认状态管理器，使用起来非常简单。它附带vue-devtools，这是一个非常棒的浏览器扩展，可以用来调试应用程序、跟踪事件，以及全局查看应用程序中的数据结构。

✅ 测试框架:

我个人喜欢使用 Cypress（仅限 Chrome）进行端到端测试，使用 Jest 进行单元测试，但最重要的是使用您喜欢的测试框架。

👨‍✈️ 前端质量工具：

我们的先决条件之一是编写高质量的代码，因为 PWA 必须快速且轻量。以下是我们可以使用的工具：

• BundleSize：代码拆分是您应该关注的事情。这是提升网站性能最简单的方法。即使在网络连接不佳的情况下，您的 PWA 也需要快速的初始加载。这就是为什么您的应用应该拆分成多个 JavaScript 包的原因。BundleSize 有助于永久控制组成应用程序的不同包的大小。

• Lighthouse（浏览器扩展程序 / Chrome DevTools）：一款出色的审核工具，可为您的 Web 应用页面生成报告。Lighthouse 报告会根据多个主题（性能、可访问性、最佳实践和渐进式 Web 应用）对您的 Web 页面进行评分。这些报告还会为您提供改进建议，以改进可能出现的缺点。

• 代码覆盖率（Chrome DevTools）：此工具将显示网页上执行的代码量与加载的代码量。这将帮助您了解哪些代码部分可以延迟加载，并仅发送用户需要的代码。

• Prettier：我认为代码格式非常重要。我不介意使用分号。对我来说，唯一重要的是代码的统一性，这样任何人都能以相同的方式阅读。无论你喜欢与否，Prettier 都会按照自己的方式格式化代码，这就是 Prettier 的伟大之处。

• Eslint：尽可能多地使用 Linter 规则（在合理的范围内），这将规范你的代码，并帮助你复习最佳实践。如果你不想自己编写规则，我建议使用现有的 Eslint 配置。我很喜欢 Airbnb 的配置，因为它非常严格且完善。

PWA 支持

如果您不熟悉 PWA，我建议您阅读此文。

在这一部分中，我不会讨论 Service Worker 的工作原理，或者如何创建 Web 应用清单。关于这方面已经有很多很棒的文章和文档，所以我将重点介绍一些可以帮助你顺利入门的工具，并根据我的经验提供一些建议。

PWA兼容：

该库将 Web 应用清单 (Web App Manifest) 引入到不兼容的浏览器，以实现更佳的渐进式 Web 应用体验。它还附带一些其他酷炫功能，例如为 iOS 创建动态启动画面（iOS 系统目前默认不支持）。

vue-cli-插件-pwa：

此插件将帮助您使用 Workbox 配置 PWA，这是目前处理 Service Worker 的最佳方式。默认情况下，您的 Service Worker 文件是根据基本 JSON 配置（您可以访问）生成的，以简化操作。但是，如果您想更好地控制 Service Worker 配置，则必须自行编写 Service Worker 文件（更多详情请参阅官方文档）。Vue
-cli-plugin-pwa 附带register-service-worker库，该库简化了 Service Worker 的注册，并公开了常见 Service Worker 事件的钩子，例如“updateFound”（新内容可用时）、“registered”（Service Worker 已注册时）等。

离线：

如果 PWA 在没有网络连接的情况下无法正常工作，那么它就不是一个好的 PWA。干净的离线管理需要满足两点：

• 静态文件缓存：如果您希望应用程序无需网络连接即可启动，则此步骤必不可少。如果您使用的是 vue-cli-plugin-pwa，则无需进行任何配置。否则，您需要进行一些 Workbox 配置。

• 动态缓存：最简单的方法是显示一个离线页面，告诉用户如果没有网络连接就无法访问数据，但我们可以做得更好。我们希望用户能够访问之前已经获取的数据。如果您的数据来自 Firestore 数据库，您只需启用离线持久化，Firestore 会处理剩下的事情。否则，您必须使用 Workbox 缓存请求和响应。
  现在，基本配置就完成了！

但请记住，您仍然可以改进 PWA 用户体验。以下是一些您可以添加的改进示例：

• 鼓励您的 iOS 用户安装您的 PWA：
  iOS 不会像 Chrome 在 Android 设备上那样自动提示用户安装 Web 应用。但您可以通过显示模态提示，并提供清晰易懂的应用安装步骤来轻松克服这一缺陷。这里有一篇很棒的文章，介绍了这一点。

• 为你的渐进式 Web 应用 (PWA) 显示“新版本已发布”：
  你是否曾在浏览某个网站时注意到一个弹出通知，告知你网站有新版本可用？这正是我所说的。通过这个弹出窗口，用户会明白他使用的不是你应用的最新版本，因此需要重新加载才能获取最新版本。

预渲染

很多情况下，服务器端渲染有些过度了。我喜欢预渲染的原因是，它不会影响我编写前端应用代码的方式或项目架构，同时还能获得服务器端渲染的几乎所有优势。如果你不知道预渲染是什么，或者什么时候应该（不）使用它，我建议你阅读这篇文章。

要预渲染我们的应用页面，我们可以使用prerender-spa-plugin。简而言之，这个插件会启动一个无头浏览器，加载应用的路由，并将结果保存到静态 HTML 文件中。这意味着我的整个应用程序都将保持静态，因此我们可以轻松地托管它。

托管

现在我们需要托管我们的静态网站，我想你开始明白我确实喜欢 firebase 😉。

Firebase 托管将帮助我们快速将 PWA 部署到 CDN，该 CDN 将通过安全连接提供我们的内容（在生产中使用服务工作者需要 HTTPS）。

持续集成/交付

太棒了！快完成了。不过我们比较懒，有些部分可以自动化。

CircleCI是一个很棒的平台，它能帮助我们运行测试，用质量工具检查代码，并在我们将代码推送到远程仓库后部署到 Firebase 托管。我们想要的工作流程如下：

1. 安装我们的项目依赖项。
2. 安装依赖项步骤完成后，我们将并行执行以下内容
3. 工作：运行 e2e 测试、运行单元测试、运行 linter 并使用 prettier 检查我们的代码格式。
4. 如果之前的所有工作都成功结束，我们将构建我们的应用程序（带有预渲染）。
5. 构建步骤结束后，我们将使用 BundleSize 检查我们的 javascript 包大小。
6. 最后，如果目标分支是发布分支，我们将部署到 Firebase 托管。

这是与上述工作流程相对应的 CircleCI 配置文件。

结论

有了这个全栈解决方案，我们唯一需要关心的就是编写 PWA 代码，这正是我们想要的。总结一下：

• Firebase 平台为我们节省了大量时间，并负责 PWA 托管。
• 前端质量工具帮助我们保持代码的简洁、快速和高性能。记住，这在 PWA 环境中至关重要。
• 良好的 CI/CD 配置可以永久控制代码质量并为应用程序部署节省时间。
• 考虑使用预渲染而不是 SSR，因为它更容易实现。

如前所述，如果您有兴趣构建 PWA 但不知道从哪里开始，或者您只是想要我在本文中介绍的堆栈的具体示例，请查看此 github 存储库。

如果您有任何问题，请随时通过Twitter联系我！