记录-vue项目中使用PWA

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前言：

梳理了一下项目中的PWA的相关用法，下面我会正对vue2和vue3的用法进行一些教程示例，引入离线缓存机制，即使你断网，也能访问页面。一旦用户访问了我们的网页，我们就像牛皮糖一样粘连着他，他永远都可以访问，即使断网也能访问。有一天我们下掉了网站他仍然能够访问，这就是把缓存写入了cache storage，并安装注册到用户的本地。

PAW在vue-admin-element下的相关配置

1、执行vue add @vue/cli-plugin-pwa

package.json里会增加两个依赖

 // dependencies下
 "register-service-worker"
 <!-- devDependencies下 -->
 "@vue/cli-plugin-pwa"

 会自动在src的根目录生成一个registerServiceWorker.js文件

2、在main.js导入

import './registerServiceWorker'

3、在src下新建service-worker.js文件

完整配置如下（拿来即用）

/* eslint-disable no-undef*/
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js')
if (workbox) {
  console.log(`Yay! Workbox is loaded 

标签：缓存,service,记录,worker,Worker,js,vue,PWA,workbox	

From： https://www.cnblogs.com/smileZAZ/p/17310770.html