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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 掌握Node.js的events事件模块要学习哪些

  本篇文章带大家了解一下Node.js模块中的events模块，介绍一下什么是事件驱动、NodeJS的事件架构、Events模块核心API等，希望对大家有所帮助！

• vue3父子组件传值怎么实现，与vue2中有何不同

  这篇文章主要为大家介绍了vue的父子组件传值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• React Fiber的创建怎样做，完整过程是什么

  这篇文章主要介绍了React Fiber结构的创建步骤，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

• 使用JS怎样写一个简单的猜数字游戏？

  很多朋友比较喜欢玩一些网页小游戏，其实使用简单的JS代码也是可以实现有趣好玩的小游戏。这篇文章就给大家分享使用JS实现猜数字的游戏，实现代码及效果如下，感兴趣的朋友可以参考。

• 用JS如何实现压缩图片，原理是什么

  这篇文章主要为大家详细介绍了js实现纯前端压缩图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下