這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言： 梳理了一下項目中的PWA的相關用法，下麵我會正對vue2和vue3的用法進行一些教程示例，引入離線緩存機制，即使你斷網，也能訪問頁面。一旦用戶訪問了我們的網頁，我們就像牛皮糖一樣粘連著他，他永遠都可以訪問，即使斷網也能訪問。有一天 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言：
梳理了一下項目中的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
