前言
PWA（Progressive Web App）被认为是未来 web 应用的发展趋势，越来越多的前端工程师也开始重视 PWA，Vue-cli 3.0 作为目前比较火热的前端脚手架工具，我们可以利用 Vue-cli 3.0 的功能很容易地将一个 web 应用转换为一个 PWA 应用，今天我们就来详解一下 Vue-cli 3.0 如何集成 PWA。
PWA 简介
PWA 是一项利用最新的浏览器技术，将 web 应用转换为桌面应用或者移动应用的技术，它能够模拟原生应用的操作体验，如离线缓存、消息推送等等，具有之前 web 应用无法匹配的体验。
Vue-cli 3.0 创建 PWA 应用
Vue-cli 3.0 支持一键生成 PWA 应用，具体步骤如下：
安装 Vue-cli 3.0：如果你还没有安装 Vue-cli 3.0，可以通过以下命令行安装：
npm install -g @vue/cli
创建 PWA 项目：通过以下命令行创建 PWA 项目
vue create my-project
在创建项目时，Vue-cli 3.0 会询问你是否需要集成 PWA，选择
Manually select features，然后选择PWA即可。启用 PWA：完成项目创建后，进入项目文件夹执行以下命令行启用 PWA。
vue add pwa
配置项介绍：
- Configure automatic page reload on file changes：当文件发生变化时是否自动刷新页面。
- Generate a service worker：是否生成 Service Workers。
- Provide App Name：App 名称，也是用于标题、主屏幕图标和描述的名称。
- Provide App Description：App 描述，在安装 App 时显示。
- Provide the theme color：PWA 应用在浏览器顶部工具栏的颜色，一般也是 Android 快捷方式图标的背景色。
- Provide the background_color for the launch screen：启动界面背景色。
- Provide icons of at least 512x512px：PWA 所需要用到的各种图标，一般不低于 512x512 像素。
- Configure manifest.json：是否使用 Manifest 文件。
实现方式
Service Workers
首先我们需要了解一下 Service Workers，它是一种运行在浏览器后台的 JavaScript 脚本，可以用来拦截网络请求，从而实现请求的缓存、离线展示等功能。Service Workers 通过监听 fetch 事件拦截网络请求，生成响应缓存并返回，这样就实现了离线缓存的功能。
在 PWA 应用中，Service Workers 一般用于缓存应用的静态资源，也就是 App Shell（App Shell 模型将应用分为 App Shell 和动态内容两部分，App Shell 是应用的基础结构，包括 HTML、CSS、依赖的 JavaScript、App Shell 的图片等等，App Shell 资源的更新可能不会非常频繁），这样可以保证即使在没有网络的情况下也能访问应用的部分内容。
基本配置
Vue-cli 3.0 集成 PWA 使用了 Workbox，它是 Google 官方推荐的一套 PWA 资源管理的解决方案，它的本质是一种 Service Workers 模板库，可以用于生成 Service Workers 代码，管理 Service Workers 运行时缓存以及限制应用程序使用的网络流量等等。
以下是一些基本配置项：
-- -------------------- ---- -------
-- -------------
-------------- - -
---- -
----- --------- -- --- ----
----------- ---------- -- ------ -----
------------ ----------
------------------------- ------ -- ----
-------------------------------- --------------------
---------------- -
----------------- ---------- -- -------
------------ -- ----------- --- ----- -- --
--
--------------- -
------------ ----- -- ------ ------- ------ ---
------------- ----- -- ------- ------ ---------------
-
-
-静态资源缓存
在 Vue-cli 3.0 中，我们只需要将需要缓存的静态资源放在 src/registerServiceWorker.js 中的 precacheAndRoute([]) 中即可实现静态资源缓存，比如以下代码段：
import {precacheAndRoute} from 'workbox-precaching'
precacheAndRoute([
'index.html',
{url: '/', revision: '383676' },
'main.js',
'utils.js'
])precacheAndRoute 函数参数用来指定需要缓存的资源，可以是一系列 URL 字符串，也可以是有参数的对象，这些参数有：url，revision。
其中 url 指定需要缓存的文件地址，revision 是一个字符串，用来控制资源的版本，版本不同则 Service Workers 会将不同版本的资源缓存到不同的缓存库中，这样就解决了资源更新的问题。
动态资源缓存
在 PWA 应用中，静态资源缓存通常不够，因为应用中的大部分数据通常是来自于数据库或者 API，这需要用到动态资源缓存。Workbox 提供了一些策略可以用来控制动态资源缓存，最常用的策略是 NetworkFirst 和 CacheFirst。
NetworkFirst
NetworkFirst 策略首先会尝试通过网络获取请求资源，如果获取失败则会从缓存中查找资源并返回，以下是 NetworkFirst 的代码实现：
import {NetworkFirst} from 'workbox-strategies'
workbox.routing.registerRoute(
({url}) => url.host === 'api.example.com',
new NetworkFirst()
)如果请求的 URL 的 host 是 api.example.com，则执行 NetworkFirst 策略。
CacheFirst
CacheFirst 策略会首先从 Service Work 缓存中查找请求资源，如果没有找到则会通过网络获取，获取成功后缓存资源，以下是 CacheFirst 的代码实现：
import {CacheFirst} from 'workbox-strategies'
workbox.routing.registerRoute(
({url}) => url.host === 'api.example.com',
new CacheFirst()
)如果请求的 URL 的 host 是 api.example.com，则执行 CacheFirst 策略。
示例代码
-- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------ ----- ---- --------- ------ ------------------------- -- -- ------- ------ ------------------------ - ----- --- ----- ------- ------ ------- - -- ------ -----------------
-- -------------------- ---- -------
-- ------------------------
------ - ----------------- ----------------------- - ---- --------------------
------ - -------------- --------------- - ---- -----------------
------ - ------------- -------------------- - ---- --------------------
------ - ---------------- - ---- --------------------
-- -------
------------------------------------
-- -- --------------- ------------
--------------
--- -------------------------------------------------------
-
-- --------
--------------
-------------------------
--- --------------
---------- ---------------
-------- -
--- ------------------
-------------- -- - -- - -- - --- -- -----
---
--
--
-
-- --------
--------------
--------------------------
--- --------------
---------- ------------
-------- -
--- ------------------
----------- --- -- ---- -- ---
-------------- -- - -- - --- -- - -- ------
---
--
--
-
-- --------
--------------
------- -- ------------------------------------
--- ----------------------
---------- --------------
-------- -
--- ------------------
----------- --- -- ---- -- ---
-------------- -- - -- - --- -- - -- ----
---
--
--
-总结
PWA 已经成为未来 web 应用的重要趋势，Vue-cli 3.0 集成 PWA 只需要简单的配置即可，但是如何优雅地实现动态资源缓存还需要深入学习，欢迎大家多多探讨。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c6da2f10032fedd38fd4c3