前言
随着移动设备和网页技术的快速发展以及用户需求的变化，离线访问成为越来越重要的需求，这就需要网页应用提供离线访问的能力，即Progressive Web App(渐进式网络应用)。
为了建立这样的web应用，采用@vicli/cli-plugin-pwa是一种简单的方式。本篇文章会介绍如何在自己的项目中使用这个包，帮助你搭建自己的渐进式网络应用。
安装方法
首先你需要创建一个项目，然后安装@vue/cli:
npm install -g @vue/cli
使用@vue/cli创建一个vue项目:
vue create my-project
这个命令会创建一个基于Vue.js的项目，然后呢就要开始用npm安装@vicli/cli-plugin-pwa了:
npm install @vicli/cli-plugin-pwa
安装完成后，你可以使用@vue/cli-plugin-pwa了。
使用方法
使用@vue/cli-plugin-pwa非常容易，你只需要在你的项目中创建一个service worker，这个service worker会被用作本地资源的缓存。 浏览器通过将请求的网页与本地缓存进行比较，可以使得用户在离线时获得最近的数据。
让我们来看看如何在vue项目中使用，首先我们需要在根目录的vue.config.js添加相关的配置信息，代码如下：
module.exports = {
pwa: {
name: "my-app"
}
};这里，我们设置了我们的PWA应用的名字，这是可选的，你可以用自己的应用名称代替。
然后，我们需要在我们的项目中注册这个插件，这个插件会在构建阶段自动生成service worker文件，你可以复制下面的代码
-- -------------------- ---- ------- -- ----------- ------ --- ---- ------ ------ --- ---- ------------ ------ ------ ---- ----------- ------ ----- ---- ---------- ------ -------------------------- ------------------------ - ------ --- ----- ------- ------ ------- - -- ------ ------------------
你可以在src目录下找到registerServiceWorker.js文件，这个文件是自动生成的，在构建阶段会生成service worker文件，并注册这个文件，你无需手动干预。
至此，你的vue项目已经成功地添加了@vicli/cli-plugin-pwa。
进阶使用
如果你想要定制service worker，如添加自定义的缓存策略，还可以在根目录的vue.config.js文件中添加一些配置信息，如下：
-- -------------------- ---- -------
-------------- - -
---- -
----- ---------
------------------ -----------------
--------------- -
------ ------------
--------------- -
-
----------- --- --------------------------------
-------- -------------
-------- -
---------- ----------
----------- -
----------- ---
-------------- ---
-
-
-
-
-
-
--这个配置文件添加了一些workbox的配置项，让你定制service worker。
workboxPluginMode属性设置了workbox的模式，如果设置成"InjectManifest"，你需要在你的根目录下创建一个自定义的service worker，并在workboxOptions的swSrc属性中指定它的位置。
最后，runtimeCaching中定义了应用程序的路径缓存策略，这里使用了cacheFirst缓存策略，当浏览器请求数据缓存时，首先先访问缓存的数据，如果没有缓存数据则重新请求数据。
总结
本文介绍了如何使用npm包@vicli/cli-plugin-pwa来实现渐进式网络应用，包括安装方法和使用方法。如果你想进一步了解，可以查看PWA规范和workbox文档，这里我们只是简单介绍了这个npm包和基本用法，希望你的应用能够成功地实现PWA功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583ad7