Vue 2 및 Vue 3에서 서비스 작업자 활성화

Vue 사용자가 Workbox 5의 출시를 기다리는 동안 저는 Service Worker를 Vue 2 및 Vue 3과 통합하기 위한 솔루션을 찾기 위해 전체 인터넷을 탐색했습니다. 당신의 Vue 앱.

서비스 작업자(vue create로 만든 앱)를 추가하려면 프로젝트에서 다음을 실행합니다.

npm install register-service-worker workbox-webpack-plugin

다음을 사용하여 프로젝트의 루트에 service-worker.js를 생성합니다.

// Insert your service worker code here

서비스 워커를 등록하려면 먼저 registerServiceWorker.js 폴더에 src를 만듭니다.

/* 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)

    }

  })

}

서비스 워커를 앱에 포함하려면 다음과 같이 main.js(src 폴더에서)를 편집합니다.

import { createApp } from 'vue'

import App from './App.vue'

+ import './registerServiceWorker'

createApp(App).mount('#app')

이제 다음 구성을 사용하여 프로젝트의 루트에 vue.config.js를 생성합니다.

const { InjectManifest } = require("workbox-webpack-plugin")

const config = {}

if (process.env.NODE_ENV === "production") {

  config["configureWebpack"] = {

    plugins: [

      new InjectManifest({

        swSrc: "./service-worker.js",

      }),

    ],

  }

}

module.exports = config

준비가 되었습니다 ✨. 이제 앱 빌드(npm 실행 빌드)를 만들고 축하하세요! 🎉