vue项目引入pwa使网页应用可安装

最近在使用vue项目时看到一个这样的效果，如图：

现在其实有很多网站都支持把网页安装到电脑或手机（IOS Safari支持较好），如下图安装后的效果：

这些都是网页应用。

接下来介绍一下如何让你的vue2项目变得可以安装。

添加cli-plugin-pwa

给现有的vue项目添加，使用下面命令：

vue add pwa

执行完之后会自动在package.json添加"@vue/cli-plugin-pwa"，"register-service-worker" 依赖。

并且在项目src目录下生成registerServiceWorker.js和service-worker.js文件：

// registerServiceWorker.js
/* eslint-disable no-console */

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

// service-worker.js 略有改动 以你自己的为准
// install new service worker when ok, then reload page.
self.addEventListener("message", msg => {
  if (msg.data && msg.data.type === 'SKIP_WAITING'){
      self.skipWaiting()
  }
})

而且还会在public/img/icons下生成适用于个平台安装的默认图标，可以自己生成替换即可。

然后需要手动在main.js引入 registerServiceWorker.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

最后到vue.config.js中添加相关配置：

module.exports = {
    pwa: {
        name: "My App",
        themeColor: "#000000",
        msTileColor: "#000000",
        appleMobileWebAppCapable: "yes",
        appleMobileWebAppStatusBarStyle: "black",
        assetsVersion: "1.2",
        iconPaths: {
          favicon32: "img/icons/favicon-32x32.png",
          favicon16: "img/icons/favicon-16x16.png",
          appleTouchIcon: "img/icons/apple-touch-icon.png",
          maskIcon: "img/icons/safari-pinned-tab.svg",
          msTileImage: "img/icons/msapplication-icon-144x144.png",
        },
        manifestOptions: {
          icons: [
              {
                  src: "./img/icons/android-chrome-192x192.png",
                  sizes: "192x192",
                  type: "image/png",
              },
              {
                  src: "./img/icons/android-chrome-256x256.png",
                  sizes: "256x256",
                  type: "image/png",
              },
              {
                  src: "./img/icons/apple-touch-icon.png",
                  sizes: "120x120",
                  type: "image/png",
              }
          ],
        },
        workboxPluginMode: "InjectManifest",
        workboxOptions: {
            swSrc: "src/service-worker.js"
        },
      },
}

这样重新把项目部署后，刷新页面后你的网站地址栏已经出现可安装的图标。

在这个基础上，可以解决一个spa项目的一个痛点，就是每次重新部署后客户端缓存问题，通过service worker可以提示用户有新的可用版本。如果感兴趣可以查看下面的链接🔽

vue项目部署后提示用户有新版本