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项目完成了！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript循环的用法是什么，有哪些经典案例

  假如您需要运行代码多次，且每次使用不同的值，那么循环（loop）相当方便使用。本篇文章通过几个实例来带你掌握循环的用法

• JS中this关键字怎样理解？ this到底是谁？

  我们在学习JavaScript的时候，this关键字的知识是需要掌握的，很多新手在学习的时候，对于this关键字不是很理解，因此这篇文章就给大家深入介绍JavaScript的this关键字。

• vue框架怎么实现页面缓存和清除缓存的功能

  这篇文章主要为大家详细介绍了vue实现页面缓存功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 使用原生JS怎么写简单的五子棋小游戏

  这篇文章主要为大家详细介绍了原生JavaScript实现简单五子棋游戏，文中示例代码注释的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 如何掌握JS的面向对象扩展

  比如jQuery的插件扩展原理其实就是在类的原型上扩展方法。其实有一些方法可能很实用，但是它没有提供，这时候就是需要我们自己去做一下扩展了。