vue項目引入pwa使網頁應用可安裝詳情 - vue.js,pwa,service-worker 來了老弟動態日志

最近在使用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"
        },
      },
}

這樣重新把項目部署後，刷新頁面後你的網站地址欄已經出現可安裝的圖標。