Vue 应用的 PWA：实用指南
目录
什么是PWA？
不妨把 PWA 想象成可以添加到 Web 应用上的冰块配料。每种配料都各有特色，但它们混合在一起，就能让你的 Web 应用拥有媲美原生应用的体验。这些“配料”其实一直都存在，但谷歌的“大厨”们将它们完美融合，并称之为渐进式 Web 应用（PWA）！
他们甚至还推出了 Lighthouse 测试工具，让我们了解自己的 Web 应用与 PWA 的契合度（或者更准确地说，与原生应用的契合度）。
此后，许多应用都纷纷在其网站上添加了这些“配料”或其部分功能。其中一些最著名的例子包括 Spotify、Housing 和 Starbox。
你需要便携式冰淇淋托盘吗？
要回答这个问题，你需要了解便携式冰淇淋托盘中可用的配料以及顾客的喜好。如果你的顾客不喜欢冰淇淋里加草莓，你为什么要花钱买呢？
-
🍓 离线体验：这意味着即使网络连接中断，您的应用也能快速访问。如果您的应用部署在内网，这项功能可能无关紧要。但是，发展中国家的用户以及使用手机访问您网站的用户可能会非常看重这项功能。
-
🍯 可安装型：可安装型应用不仅可以通过浏览器中的 URL 访问，还可以安装在安卓和 iOS 设备上。在这种情况下，用户只需点击图标即可打开您的应用，而无需在浏览器中输入 URL。就是这么简单！您无需使用原生语言或 Electron 重写您的应用。
-
🍒 后台同步：后台同步功能允许您在用户网络连接不稳定时延迟执行操作。例如，假设您的用户填写完表单并点击了“发送”按钮，但此时网络连接中断。您不希望用户的努力付诸东流，因此您可以收集这些操作，并在网络连接恢复后立即将其发送到服务器。
-
🍇推送通知：您如何看待移动应用通知，尤其是在应用处于关闭状态时？例如：当您正在看电视时，收到来自 Twitter 应用的通知，提示“嘿，有人给你点了个赞👍”。如果您认为通知用户是个好主意，那么推送通知功能可能适合您。
我应该在这个托盘上投入多少时间和精力？
使用 PWA 插件，你可以在 30 分钟内显著提升 PWA 的体验。之后，想要进一步提升就难上加难了。
使用 PWA Vue CLI 插件快速美化您的应用🍓🍯
我希望你已经了解 Vue CLI 插件。但如果你不了解也不用担心，它们很容易理解。
Vue CLI 是一个 npm 包，需要全局安装到你的电脑上。
它能让你快速轻松地搭建 Vue 项目。Vue CLI 插件是 npm 包，您可以将其作为依赖项添加到 Vue CLI 项目中。
它们可以快速轻松地为您的 Vue 项目添加一些特性和功能。
这里我们使用@vue /cli-plugin-pwa 为我们的 Web 应用添加了“🍓Reach 离线体验”和“🍯可安装”支持。需要注意的是：添加 PWA 支持并不一定需要插件，但使用插件可以加快这个过程。
准备工作：
本文使用了一个简单的 Vue CLI 项目。你可以在这里找到它，当然你也可以使用任何其他你喜欢的 Vue CLI 项目。如果你不知道如何创建 Vue CLI 项目，请点击此链接。
在进行任何更改之前，请先测试您的网页 PWA
。在进行任何更改之前，让我们看看 Google 的测试结果如何。我建议您使用隐身模式，但 Chrome 或 Firefox 也可以。
在对我们的 Web 应用运行 Lighthouse 测试之前，您必须先部署您的应用：
-
使用以下方法在生产模式下构建您的 Web 应用程序：
npm run build该命令将生成一个名为dist（默认）的构建目录。
-
要在本地 HTTP 服务器上运行 dist 文件夹，请在您的计算机上安装 HTTP 服务器：
npm install -g serve现在将构建版本（dist）直接放在服务器上运行服务器：
serve -s dist
在开发过程中，您可以通过以下方式使用 Service Worker
localhost：但是，要将其部署到网站上，您需要在服务器上设置 HTTPS。
- 在本地主机上打开网站，然后转到开发者工具>Lighthouse。选择“渐进式Web应用”类别，然后点击“生成新报告”。几分钟后，您可能会看到类似这样的结果。
如果您使用 Git，请应用 PWA 插件
，并清除本地更改（提交、暂存或丢弃）。这样您就可以看到插件添加的更改。
要安装并调用 PWA Vue CLI 插件，请执行以下命令：
vue add pwa
再次评估：
在生产模式下重新构建您的应用，并在本地部署。现在我们可以向 Taster 先生询问 PWA 的相关问题了。 恭喜！这意味着您的应用可以离线运行，您可以将其注册到 App Store 或 Google Play 商店。请参阅这篇文章，了解如何将渐进式 Web 应用上架到 Google Play 商店。
深入探索
当我第一次在我的应用中使用 PWA 插件时，感觉并不好。即使获得了 Lighthouse 的试用奖，我的应用在不知不觉中运行良好。安装过程中甚至没有要求我进行任何配置。
这是因为该插件的目的并非让您对 PWA 概念感到困惑，而是应用大多数 Web 应用程序都应遵循的成熟最佳实践。它假设如果您对 PWA 配置非常了解，您会返回进行自定义设置。
本节我们将更深入地探讨如何根据您的需求定制这些最佳实践。
默认缓存会对我的应用产生什么影响？
如前所述，“离线访问体验”是指即使在网络连接不稳定的情况下，网站也能快速访问。Service
Worker 是实现此功能的核心。Service Worker 是一个独立于网页运行的脚本，它充当网站与网络之间的连接桥梁，并实施缓存策略以减少网页与服务器之间的流量。
下图展示了 Service Worker 如何缓存必要的静态资源。必要的静态资源是指网页启动所必需的资源。例如，首页中使用的 HTML、JS、CSS 和图像文件都是网页的必要资源。
这个过程也会记录到你的控制台中。不要把它和 workbox 混淆。workbox 是一个 webpack 插件，你的 service worker 用它来完成预缓存过程。我们稍后会详细介绍它。
查看浏览器的应用标签页，可以看到所有预缓存资源。 缓存工作正常。但我们来看看缓存对网页速度的影响。 刷新页面后，情况如下： 我在三种不同的网络模式下分别刷新了 PWA 和非 PWA 网页。您可以在以下图片中看到网络标签页的差异：
-
刷新过程不限速。PWA 网页从缓存读取内容，而非 PWA 网页则需要重新下载所有资源。但由于网页较小且网络连接良好，因此加载时间差异并不明显。
-
使用速度较慢的 3G 网络刷新时，加载时间差异增大了 2 倍。
-
离线刷新非 PWA 网页时，页面无法加载。而 PWA 网页则加载流畅快速。
如您所见，使用 PWA 时，三种模式之间的差异并不大。这表明即使网络不稳定，该网站也相当可靠。
自定义 Vue CLI PWA 插件以支持 API 缓存
在自定义应用程序之前，了解 PWA 插件的功能至关重要。激活插件后，它会在主文件中注册 serviceworker.js 文件。从主文件注册 serviceworker 意味着我们希望页面加载后立即启动它。除此之外，PWA 插件的功能仅限于组织资源！每次构建项目时，PWA 插件都会指示 Workbox 生成一个 serviceworker 来缓存静态资源。Workbox 是缓存策略的核心。Workbox webpack 插件中的两个模块负责实现缓存策略：`generateSW` 和 `InjectManifest`。
当没有任何配置，只想预缓存必要的静态资源时，可以使用 `generateSW`。否则，必须使用 `InjectManifest`。您可以在这里找到有关 Workbox webpack 插件的更多详细信息。
提升用户在 Reach 平台上的离线体验
如果您想跳过细节直接查看代码，请访问我在 GitHub上的仓库。
我们已经了解了 Vue CLI PWA 插件如何为网页应用预缓存。现在，让我们通过添加 API 请求来改进项目，以加载一些数据。该请求会获取 IP 地址并返回国家/地区名称。
-
如何缓存 API 的响应？我可以依赖 PWA Vue CLI 插件的默认配置吗？
很遗憾，不行！这次我们需要自己添加缓存策略。 -
我们该如何开始呢？首先，我们需要确定缓存策略。谷歌提供了一份名为“离线指南”
的缓存策略列表，方便快速入门。 我还根据这些策略制作了一个简单的矩阵，这样我更容易选择适合自己的策略。更新频率/备用支持 高的 低的 真的 网络优先/过时时重新验证 缓存优先 错误的 仅限网络 仅缓存 我的 API 响应经常更新吗？不！同一个 IP 地址总是返回同一个国家/地区。
我的 API 需要备用方案吗？当然需要。我不想冒着缓存为空时无法显示任何内容的风险。所以我采取了缓存优先策略，即：
我们首先检查缓存。如果缓存中有资源，我们就使用它。如果没有，我们就从网络获取资源，并根据网络响应更新缓存。
-
我知道我的策略。我应该把它放在哪里？
Vue CLI PWA 插件的配置是通过配置文件中
pwa的属性vue.config.js或字段进行的。您可以在这里找到更多详细信息。"vue"package.json在上一节中，我们了解到 Workbox webpack 插件包含两个缓存模块：'generateSW' 和 'InjectManifest'。要自定义缓存策略，我们需要调用 'InjectManifest' 模块。InjectManifest 模块需要一个包含额外脚本或逻辑的 js 文件。
// Inside vue.config.js
module.exports = {
// ...other vue-cli plugin options...
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'src/service-worker.js',
}
}
}
- 让我们把新策略放到 src/service-worker.js 文件中。
// inside src/service-worker.js
// define a prefix for your cache names. It is recommended to use your project name
workbox.core.setCacheNameDetails({prefix: "simple-vue-project"});
// Start of Precaching##########################
// __precacheManifest is the list of resources you want to precache. This list will be generated and imported automatically by workbox during build time
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
// End of Precaching############################
// Start of CachFirst Strategy##################
// all the api request which matchs the following pattern will use CacheFirst strategy for caching
workbox.routing.registerRoute(
/https:\/\/get\.geojs\.io\/v1\/ip\/country\.json/,
new workbox.strategies.CacheFirst()
);
// End of CachFirst Strategy####################
您可能已经注意到，一旦从“GenerateSW”模式切换到“InvokeManifest”模式，就没有默认的预缓存，所有内容都必须手动添加到脚本中。
您可能想知道 Workbox 是从哪里来的。其实并没有导入！Workbox 会在构建过程中从官方 CDN 注入整个库。虽然不是最佳方案，但对于我们的教程来说既快捷又方便。更多信息请点击此处。
测试我们的改进。
让我们检查应用程序和网络选项卡，确保代码运行正常。正如我们之前提到的：应用程序必须构建并部署到本地主机。
发出 API 调用后，响应数据将被缓存，您可以在缓存列表中查看。切换到离线模式后再次调用 API，您将从缓存中获取响应数据。
恭喜！您的缓存策略已定制完成！如果您对缓存策略的定制还有任何疑问，请留言😊。
文章来源：https://dev.to/pegahsafaie/pwa-for-vue-applications-a-practical-guide-4de3