Vue项目引入PWA的步骤

Vue项目引入PWA很简单，操作步骤如下：

1. 安装依赖

vue add @vue/pwa

由于使用add关键字，安装成功后会在项目中创建一些文件，如果项目使用了git，可以很容易的看出文件变化：

src文件夹下会生成一个registerServiceWorker.js文件，并在main.js中导入，这个文件自动生成了注册service worker的代码。registerServiceWorker.js的代码如下：

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

2. 在vue.config.js文件中配置pwa：

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

3. 手动添加manifest.json文件到项目的public目录下，manifest.json内容如下：

{
  \"short_name\": \"应用简称\", // 将来展示在手机桌面应用图标下
  \"name\": \"应用全称\", // 将来展示在电脑桌面应用图标下
  \"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\"
      }
  ], // 桌面图标，是一个数组，注意图片大小和格式
  \"start_url\": \"index.html\", // 应用启动时的url
  \"display\": \"standalone\",
  \"background_color\": \"#080403\",
  \"theme_color\": \"#080403\"
}

display字段表示显示模式，具体参数及描述如下：

4. 在index.html文件中添加如下代码：

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

接下来就是见证奇迹的时刻，执行npm run build，查看dist下的index.html文件中是否引入了manifest.json文件，再看看相应的配置有没有生成，如果有，恭喜你，第一个pwa项目完成了！

以上就是Vue项目引入PWA的步骤的详细内容，更多关于Vue项目引入PWA的资料请关注其它相关文章！