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使用mongodb存储数据的操作包括什么

  /***使用mongodb存储数据*1首先安装mongodbnodejs插件npminstallmongodb--save-dev*2安装express(非必须)***/varmongo=require("mongodb")varmongoClient=mongo.MongoClient;varurl="mongodb://

• Vue框架下怎么实现h5聊天对话功能，思路和方法是什么

  这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下

• JavaScript实现继承有多少方法，分别是哪些？

  目录一、背景简介二、原型对象和对象的关系二、使用 prototype 和 proto 实现继承三、使用prototype和proto实现继承四、通过原型链访问对象的方法和属性五、其他方式实现继

• jQuery怎样操作table增加和删除行?

  今天给大家分享的是jquery操作table的内容，本文主要给大家介绍实现动态增加和删除行的功能，实现效果及代码如下，感兴趣的朋友接下来跟随小编一起看看吧。

• 用JS怎样写一个简单计数器，方法是什么

  用JS怎样写一个简单计数器，方法是什么？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！