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字段表示显示模式，具体参数及描述如下：

显示模式 描述
fullscreen 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome。
standalone 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。
minimal-ui 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏， 样式因浏览器而异。
browser 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台， 这是默认的设置。

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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue-cli4 配置 element-ui 按需引入操作

    在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能.经小编一番摸索之后,终于搞定了,本篇文章记录实现的全过程 #1 node与vue的版本情况 #2 未按需加载打包后的文件情况 由上图看出,只是引入了 element-ui 框架后,js文件急剧的上升到了 783KB,这显然是不能接受的. element-ui 按需加载文档:https://element.eleme.cn/#/zh-CN/component/quickstart #3 添加 babel-plug

  • 浅谈在vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~),给出效果图: 就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码,再根据当前城市状态码找到这个对应的天气图标icon~~ 按照一般的开发模式,静态图片路径是相对路径还是绝对路径都可以,因为图片路径是静态的是死的,所以webpack去找这个图片路径的时候是能找到的. 但

  • vue引入Excel表格插件的方法

    本文实例为大家分享了vue引入Excel表格插件的具体代码,供大家参考,具体内容如下 一.安装 npm install handsontable-pro @handsontable-pro/vue npm install handsontable @handsontable/vue 二.引用(在页面引用) import { HotTable } from '@handsontable-pro/vue' import '-/-/node_modules/handsontable-pro/dist/

  • vue 项目引入echarts 添加点击事件操作

    main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale

  • vue页面引入three.js实现3d动画场景操作

    vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机.视角.材质等相关属性来创造大量3D动画场景. 我们开始引入three.js相关插件. 1.首先利用淘宝镜像,操作命令为: cnpm install three 2.接下来利用npm安装轨道控件插件: 关注我的微信公众号[前端基础教程从0开始],加我微信,可以免费为您解答问题.回复"1&qu

  • 如何在vue 中引入使用jquery

    1.首先在配置文件中添加 cnpm install  下载jquery文件 2.在webpack配置文件中添加下面代码 3.接着在webpack.base.conf.js中module.exports的最后加入下面代码 4.最后在main.js中全局引入 5.引入完成以后重启项目,就可以在全局使用jquery了 以上就是如何在vue 中引入使用jquery的详细内容,更多关于vue 引入使用jquery的资料请关注我们其它相关文章!

  • Vue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName&quo

  • vue-cli3 引入 font-awesome的操作

    在 package.json 添加 "font-awesome": "^4.7.0" 执行 npm install 在 main.js 引入 // font import "font-awesome/css/font-awesome.min.css" 补充知识:在Vue2.0中引入font-awesome,并在Element-ui中正确显示font-awesome的icon 如下所示: npm install font-awesome --sav

  • 使用vue引入maptalks地图及聚合效果的实现

    1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3.vue页面引入 import * as maptalks from 'maptalks' import {ClusterLayer} from 'maptalks.markercluster' 4.初始化地图并添加聚合 mounted() { let that = this //--0--//地图

  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽.当然搭建成博客也不成问题. Vuepress特点 响应式,也可以自定义主题与hexo类似 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件 Google Analytics 集成 PWA 自动生成Service Worker 快速上

  • Vue项目如何引入bootstrap、elementUI、echarts

    引入bootstrap 安装依赖包 cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev 全局引入 在项目中根目录下的main.js中添加如下代码: import 'bootstrap' import $ from 'jquery' 在vue文件中引用 <script> import 'bootstrap/dist/css/bootstrap.min.

随机推荐