vue-cli3构建PWA离线应用

vue-cli3使用PWA

1.安装pwa插件依赖

vue-cli3安装pwa插件时会安装register-service-worker依赖包,并自动生成一个registerServiceWorker.js（src文件下）文件并在main.js中添加导入.

(1)第一种方式,在vue create初始化项目时,勾选Progressive Web App (PWA) Support会自动安装pwa插件依赖

(2)第二种方式,手动安装pwa插件

vue add pwa

2.根目录下添加vue.config.js配置文件,配置pwa

module.exports = {
  pwa: {
    name: "easy-front-vue-cli3",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    // configure the workbox plugin (GenerateSW or InjectManifest)
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: "./src/service-work.js",
      importWorkboxFrom: "disabled",
      importScripts: "https://cdn.your.info/workbox-v4.3.1/workbox-sw.js"
      // ...other Workbox options...
    }
  }
};

3.在src目录下添加service-worker.js文件

// 判断workbox是否加载成功

if (workbox) {

  console.log(`Yay! Workbox is loaded