registerServiceWorker缓存文件_app is being served from cache by a service worker-CSDN博客

本文链接：https://blog.csdn.net/weixin_45760365/article/details/116484612

这篇博客介绍了如何在Vue项目中使用registerServiceWorker.js注册Service Worker，以实现离线缓存功能。Service Worker在用户首次访问网站时会缓存所有资源，使得即使在网络离线状态下也能访问之前加载过的页面。此功能仅在生产环境中生效，对于提升用户体验和应用的离线可用性具有重要意义。

摘要由CSDN通过智能技术生成

1.新建registerServiceWorker.js
在这里插入图片描述
2.并在main.js中引入

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

作用：
registerServiceWorker可以运用于主流框架，它只是为了简化缓存机制产生的js包，以上的例子是在Vue中使用
这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为Vue项目注册了一个service worker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（此时使用的是之前缓存的资源）。只在生产环境中有效（process.env.NODE_ENV === ‘production’）

使用service worker的现象是什么呢？
他会在第一次访问该站点的时候，一次性请求加载所有资源，当然除了当前页面的资源是通过浏览器去获取的，其他缓存资源都是通过service worker