vue add @vue/pwa

import { register } from 'register-service-worker'

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

module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
      importWorkboxFrom: 'local',
      importsDirectory: 'js',
      navigateFallback: '/',
      navigateFallbackBlacklist: [/\/api\//]
    }
  }
}

{
  "short_name": "應(yīng)用簡稱", // 將來展示在手機(jī)桌面應(yīng)用圖標(biāo)下
  "name": "應(yīng)用全稱", // 將來展示在電腦桌面應(yīng)用圖標(biāo)下
  "icon": [
      {
          "src": "./img/icons/android-chrome-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
      },
      {
          "src": "./img/icons/android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
      }
  ], // 桌面圖標(biāo)，是一個(gè)數(shù)組，注意圖片大小和格式
  "start_url": "index.html", // 應(yīng)用啟動(dòng)時(shí)的url
  "display": "standalone",
  "background_color": "#080403",
  "theme_color": "#080403"
}

<meta name="theme-color" content="#080403">
<link rel="manifest" href="manifest.json" rel="external nofollow" >