关于vue.js:vue项目引入pwa使网页应用可安装

42次阅读

共计 2388 个字符，预计需要花费 6 分钟才能阅读完成。

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

当初其实有很多网站都反对把网页装置到电脑或手机（IOS Safari 反对较好），如下图装置后的成果：

这些都是网页利用。

接下来介绍一下如何让你的 vue2 我的项目变得能够装置。

给现有的 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"},
      },
}

这样从新把我的项目部署后，刷新页面后你的网站地址栏曾经呈现可装置的图标。