vue2 中使用最新pwa教程

直接进入步骤看下

先npm install @vue/cli-plugin-pwa npm install "register-service-worker": "^1.7.2"

1. 在package。json中

  "@vue/cli-plugin-pwa": "^5.0.8",
  "@vue/cli-plugin-router": "~5.0.0",
  "@vue/cli-plugin-vuex": "~5.0.0",
  "@vue/cli-service": "~5.0.0",

2 .vue.config.js 配置

pwa: {
   name: 'xxx',
   themeColor: '#4DBA87',
   msTileColor: '#000000',
   appleMobileWebAppCapable: 'yes',
   appleMobileWebAppStatusBarStyle: 'black',
   workboxPluginMode: 'InjectManifest',
   workboxOptions: {
     // importScripts: ['https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js'],
     // exclude: [/\.html$/],//html不进行service Worker缓存
     // 自定义 Service Worker 文件的位置
     swSrc: './src/service-worker.js'
   }
 },

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 🎉`)
} else {
 console.log(`Boo! Workbox didn't load 😬`)
}

workbox.core.setCacheNameDetails({
 prefix: 'ochase-search',
 suffix: 'v1.0.0'
})
workbox.core.skipWaiting() // 强制等待中的 Service Worker 被激活
workbox.core.clientsClaim() // Service Worker 被激活后使其立即获得页面控制权
workbox.precaching.precacheAndRoute(self.__precacheManifest || []) // 设置预加载
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST || []) // cant find __precacheManifest


// 缓存web的css资源
workbox.routing.registerRoute(
 // Cache CSS files
 /.*\.css/,
 // 使用缓存，但尽快在后台更新
 new workbox.strategies.StaleWhileRevalidate({
   // 使用自定义缓存名称
   cacheName: 'css-cache'
 })
)

// 缓存web的js资源
workbox.routing.registerRoute(
 // 缓存JS文件
 /.*\.js/,
 // 使用缓存，但尽快在后台更新
 new workbox.strategies.StaleWhileRevalidate({
   // 使用自定义缓存名称
   cacheName: 'js-cache'
 })
)

// 缓存web的图片资源
workbox.routing.registerRoute(
 /\.(?:png|gif|jpg|jpeg|svg)$/,
 new workbox.strategies.StaleWhileRevalidate({
   cacheName: 'images',
   plugins: [
     new workbox.expiration.ExpirationPlugin({
       maxEntries: 60,
       maxAgeSeconds: 30 * 24 * 60 * 60 // 设置缓存有效期为30天
     })
   ]
 })
)
// 缓存所有 GET 请求。
workbox.routing.registerRoute(
 ({request}) => request.method === 'GET',
   new workbox.strategies.NetworkFirst()
);
// 如果有资源在其他域名上，比如cdn、oss等，这里做单独处理，需要支持跨域
workbox.routing.registerRoute(
 /^https:\/\/cdn\.ochase\.com\/.*\.(jpe?g|png|gif|svg)/,
 new workbox.strategies.StaleWhileRevalidate({
   cacheName: 'cdn-images',
   plugins: [
     new workbox.expiration.ExpirationPlugin({
       maxEntries: 60,
       maxAgeSeconds: 5 * 24 * 60 * 60 // 设置缓存有效期为5天
     })
   ],
   fetchOptions: {
     credentials: 'include' // 支持跨域
   }
 })
)

registerServiceWorker.js 文件内容

/* eslint-disable no-console */

import { register } from 'register-service-worker'
console.log(process.env.NODE_ENV,'NODE_ENV')
if (process.env.NODE_ENV === 'production') {
 register(`${process.env.BASE_URL}service-worker.js`, {
   ready () {
     console.log(
       'App is being served from cache by a service worker.\n' +
       'For more details, visit https://goo.gl/AFskqB'
     )
   },
   registered () {
     console.log('Service worker has been registered.')
   },
   cached () {
     console.log('Content has been cached for offline use.')
   },
   updatefound () {
     console.log('New content is downloading.')
   },
   updated () {
     console.log('New content is available; please refresh.')
   },
   offline () {
     console.log('No internet connection found. App is running in offline mode.')
   },
   error (error) {
     console.error('Error during service worker registration:', error)
   }
 })
}