咖啡休息期间的 Vue - 在 5 分钟内将任何 Vue 应用程序转换为可离线的 PWA。

Vue-cli PWA 插件

其他项目

本系列的目的是发布有关高级 Vue 概念的小技巧，这些技巧可以快速应用到每个应用程序中，并为您提供解决问题的新武器。

在这篇短文中，我将解释如何将现有的 Vue 应用程序转换为 PWA 或如何设置新的应用程序。

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

简而言之，渐进式 Web 应用程序 (PWA) 是一种工作和行为类似于原生应用程序的 Web 应用程序。

PWA 的一些功能包括：

• 离线工作能力
• 主屏幕安装
• 支持推送通知

如果您想了解更多信息，我强烈建议您阅读此文档。现在让我们编写一些代码。

Nuxt 的 PWA 模块

如果您使用 Nuxt，则添加 PWA 功能对于新应用程序和现有应用程序的作用相同。

1. （可选）如果是新项目，请设置create-nuxt-app

npx create-nuxt-app <project-name>

1. 安装@nuxtjs/pwa模块

npm i @nuxtjs/pwa

1. 注册模块nuxt.config.js

{
    modules: [
        '@nuxtjs/pwa',
    ],
}

1. （可选）创建static/icon.png（建议 512x512px）作为应用程序的主屏幕图标。
2. （可选）sw.*向文件添加规则.gitignore以避免提交由 Nuxt 模块生成的文件。

Nuxt PWA 模块实际上是一组较小的 PWA 子模块。安装完成后，我们来看一下它们：

• Workbox - Nuxt PWA 模块在后台使用 Workbox模式（您可以在此处generateSW找到配置选项），这意味着它会自动生成一个服务 Worker 文件，用于缓存我们的静态资源。dist 目录中的所有文件都将被缓存以供离线使用。此模块开箱即用。
• Manifest - 自动生成 manifest.json 文件。此模块开箱即用，但可以通过manifest您的nuxt.config.js（阅读更多）属性进行配置。
• Meta - 通过清单集成自动添加 SEO 友好的元数据。（阅读更多）
• Icon - 自动生成不同大小的应用图标。（了解更多）。此模块开箱即用，但可以通过icon您的nuxt.config.js
• OneSignal - 使用 OneSignal 的免费后台推送通知。OneSignal 是一个允许轻松向用户发送推送通知的平台。您可以点击此处了解如何配置此模块。

Vue-cli PWA 插件

如果您使用 vue-cli 3.x，安装会更容易。

对于运行后的新项目

vue create <project_name>

Manually select features在第一步中选择，然后Progressive Web Apps用空格键检查。

完成安装过程以及 vue-cli 生成的标准文件后，您将找到registerServiceWorker.js和。您可以在的属性下自定义manifest.json插件的行为，您可以在 模式下自定义底层 Workbox 插件（与我们在 Nuxt 中看到的相同）。pwavue.config.jspwa.workboxOptionsgenerateSW

对于已在 Vue-cli 3 上安装的现有项目，@vue/pwa安装插件将具有完全相同的效果。您只需输入以下命令即可将 PWA 功能添加到您的应用中：

vue add @vue/pwa

其他项目

如果您没有使用 Nuxt 或 vue-cli 3.x，您仍然可以使用Workbox CLI仅用几个命令将您的应用程序转换为可离线的 PWA 。

首先需要安装 cli：

npm install workbox-cli --global

接下来，在项目的根目录中，我们应该使用一个向导来为我们生成 Service Worker：

workbox wizard

回答提示的问题后，向导将生成一个workbox-config.js用于生成服务工作者的文件！

您可以使用以下方式生成服务工作者

workbox generateSW workbox-config.js

这些简单的步骤可以显著提高您的应用程序性能，因此绝对值得一试；）

请继续关注该系列的下一部分！