如何在vue项目中使用PWA_vue add pwa-CSDN博客

（记录专用）

1.安装依赖

vue add @vue/pwa

会自动在src下生成registerServiceWorker.js文件、自动在main.js中导入

------------------------分割线--------------------------

如果后续运行时报错

TypeError: Cannot read properties of undefined (reading ‘tap‘)

原因是：插件pwa版本太高

解决方案：将package.json文件中的@vue/cli-plugin-pwa版本降下来即可（记得重新npm install一下）

------------------------分割线--------------------------

2.registerServiceWorker.js的代码如下：

/* eslint-disable no-console */
 
import { register } from 'register-service-worker'
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    if (process.env.NODE_ENV === 'development') {
      register(`${window.location.origin}/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)
        }
      })
    }
  })
}

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 || []) // 设置预加载
 
// 缓存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天
      })
    ]
  })
)
 
// 如果有资源在其他域名上，比如cdn、oss等，这里做单独处理，需要支持跨域
workbox.routing.registerRoute(
  /^https:\/\/siteproxy.ruqli.workers.dev:443\/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' // 支持跨域
    }
  })
)

vue项目中使用PWA - 掘金 (juejin.cn)

------------------------分割线--------------------------

如果F12查看Application时，Service Workers没有内容

原因：没有正确的注册Service Workers
解决办法：注意registerServiceWorker.js下的register(${process.env.BASE_URL}/service-worker.js路径问题，看看代码下process.env.NODE_ENV的值以及有没有process.env.BASE_URL

参考：
vue项目引入PWA（vue-cli4）_vue pwa_微行的博客-CSDN博客

------------------------分割线--------------------------

4.vue.config.js配置pwa

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'
      }
    }

5.public下创建manifest.json文件（json文件要删掉注释）

{
  "short_name": "短名称", // 用来描述应用的短名字。当应用的名字过长，在桌面图标上无法全部显示时，会用short_name中定义的来显示。
  "name": "iDL-科研平台", // 用来描述应用的名称，会显示在各类提示的标题位置和启动画面中。
  "icon": [  // 用来设置Web App的图标集合。
      {
       "src": "./img/icons/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
      },
      {
       "src": "./img/icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
      }
  ],
  "start_url": "index.html", // 用来描述当用户从设备的主屏幕点击图标进入时，出现的第一个画面。
  "display": "standalone", // 用来指定 Web App 从主屏幕点击启动后的显示类型
  "background_color": "#002140", // 用来设置Web App启动画面的背景颜色
  "theme_color": "#002140" // 定义和background_color一样的CSS颜色值，用于显示Web App的主题色，显示在banner位置。
}

ok，可以看效果了

------------------------分割线--------------------------

问题：在真机上测试 pwa 相关内容，本地起了个服务，但 pwa 必须要 localhost 或 https 才能生效

解决办法：使用 adb reverse 把 PC 的端口映射到手机，手机上就可以使用 localhost 访问 PC 起的服务了

参考：

adb详细教程（一）-下载安装与环境变量配置_adb安装_软件测试必备技能的博客-CSDN博客

配置好后，连接手机，打开cmd，进入adb路径，输入以下命令（可以映射多个端口）

adb reverse tcp:<手机端口号> tcp:<pc端口号>

问题：eslint-loader@2.2.1 requires a peer of eslint@>=1.6.0 <7.0.0 but none is installed. You must install

解决：cnpm install （不算解决但确实不报错了）