Vue 2 如何添加 register-service-worker 实现缓存请求的问题

 更新时间:2022年11月17日 10:20:41   作者:十月ooOO  
这篇文章主要介绍了Vue 2 如何添加 register-service-worker 以实现缓存请求的目的,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Vue 2 如何添加 register-service-worker 以实现缓存请求的目的

一、问题描述

现在 vue 3 的模板中是自带 register-service-worker 的。
用这个的好处是,它会自动将项目中的所有文件请求缓存到 service-worker 中,以实现再次打开网站的时候会非常非常快。
如果页面中变化,也会自动在后台下载变化的文件,页面的变化在下次刷新页面的时候就会自动生效。

我有几个 Vue2 的项目需要实现这个功能,摸索了下,把结果分享一下:

二、实现

1. 需要在 package.json 中添加两个插件:

    "register-service-worker": "^1.7.2",  // 用于管理  service-worker 的文件注册更新等
    "@vue/cli-plugin-pwa": "^4.5.19",

安装 register-service-worker 安装到项目依赖目录 dependencies

npm i register-service-worker

安装 @vue/cli-plugin-pwa 安装到项目开发支持目录 devDependencies

npm i  -D @vue/cli-plugin-pwa@4.5.19

安装完成之后的 package.json 文件是这样的:

  "dependencies": {
    ...
    "register-service-worker": "^1.7.2",
    ...
  },
  "devDependencies": {
  	...
    "@vue/cli-plugin-pwa": "^4.5.19",
    ...
  }

2. 添加 registerServiceWorker.js

还需要在 /src 目录下,添加 registerServiceWorker.js 这个文件,这个文件的内容很固定,直接用就行。

官方的那个只能用于项目处于网站根目录的情况,而我自己有很多项目是部署在子目录的,比如 kylebing.cn/diary kylebing.cn/tools/wubi-dict-editor,那么此时再用官方的那个文件内容可能就不能用了。所以直接用我这个就行 。

registerServiceWorker.js 完整内容

/* eslint-disable no-console */

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

3. 在 main.js 中引入 registerServiceWorker.js 即可

在项目的 main.js 中引入 registerServiceWorker.js,再执行 npm build 即可生成能够缓存请求的项目了

我一般的项目入口文件名这 main.js,你的可能是 app.js,等同。

import "./registerServiceWorker"

4. 在 vue.config.js 中添加 pwa 配置

添加 pwa 支持之后, index.html 中的 favicon 设置就已经失效了,需要从 vue.config.jspwa 字段中单独配置。

/**
     * PWA 设置
     */
    pwa: {
        name: '地图工具', // 名字
        themeColor: "white", // 背景颜色
        appleMobileWebAppCapable: true, // 苹果 WebApp 支持

        // manifest 设置
        manifestOptions: {
            name: '地图工具',
            short_name: "地图工具",
            theme_color: "white",
            start_url: ".",
            display: "standalone",
            background_color: "white",
            icons: [
                {
                    src: "favicon.png", // 这里的图片地址对应 /public 目录中的图片地址
                    sizes: "512x512",
                    type: "image/png",
                    purpose: "any",
                }
            ],
        },

        // 图标
        iconPaths: {
            // 这里是项目外的路径,对应 public 目录
            favicon32: 'favicon.png', // 这里的图片地址对应 /public 目录中的图片地址
            favicon16: 'favicon.png', // 这里的图片地址对应 /public 目录中的图片地址
            maskIcon: null,
            msTileImage: null
        }
    }

之后就能正常显示了:

三、结果

首次加载页面的时候,注册了 service-worker.js

之后所有的文件都能够通过 service-worker 从缓存中获取了

以上就是Vue 2 如何添加 register-service-worker 以实现缓存请求的目的的详细内容,更多关于vue缓存请求的资料请关注脚本之家其它相关文章!

相关文章

  • Vue在页面右上角实现可悬浮/隐藏的系统菜单

    Vue在页面右上角实现可悬浮/隐藏的系统菜单

    这篇文章主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态。需要的朋友可以参考下
    2018-05-05
  • vuex之this.$store.dispatch()与this.$store.commit()的区别及说明

    vuex之this.$store.dispatch()与this.$store.commit()的区别及说明

    这篇文章主要介绍了vuex之this.$store.dispatch()与this.$store.commit()的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 解决vue+ element ui 表单验证有值但验证失败问题

    解决vue+ element ui 表单验证有值但验证失败问题

    这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败,本文通过实例代码给大家分享解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 公共组件父子依赖调用及子校验父条件问题解决

    公共组件父子依赖调用及子校验父条件问题解决

    这篇文章主要介绍了如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue+echarts5实现中国地图的示例代码

    vue+echarts5实现中国地图的示例代码

    本文主要介绍了vue+echarts5实现中国地图的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 从Element日期组件源码中学到的两个工具方法技巧

    从Element日期组件源码中学到的两个工具方法技巧

    这篇文章主要介绍了从Element日期组件源码中学到的两个工具方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 如何利用VUE监听网页关闭并执行退出操作

    如何利用VUE监听网页关闭并执行退出操作

    这篇文章主要给大家介绍了关于如何利用VUE监听网页关闭并执行退出操作的相关资料,因为项目中需求,浏览器关闭时进行一些操作处理,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue3中使用VueParticles实现粒子动态背景效果

    vue3中使用VueParticles实现粒子动态背景效果

    为了提高页面展示效果,特别类似于登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果,本文给大家分享vue粒子动态背景效果实现代码,需要的朋友参考下吧
    2022-05-05
  • Vue CLI3基础学习之pages构建多页应用

    Vue CLI3基础学习之pages构建多页应用

    这篇文章主要给大家介绍了关于Vue CLI3基础学习之pages构建多页应用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue CLI3具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • vue中动态添加class类名的方法

    vue中动态添加class类名的方法

    今天小编就为大家分享一篇vue中动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论