프론트/Vue

[Nuxt] pwa cache 적용, version number 추가

ZestLee 2022. 2. 6. 21:52

오프라인 서비스를 하기 위한 많은 방법이 있는데, 저는 이 중 service worker를 이용한 캐싱으로 진행하려고 합니다. 사실 이는 pwa에서 이미 지원해 주고 있기 때문에 그렇게 복잡한 일이 아닙니다.

 

저는 프로젝트를 만들 때 pwa를 설치했기 때문에, nuxt.config.js에 가서 몇가지 설정만 변경해 주도록 하겠습니다.

pwa 설치 및 모듈 적용은 이전 포스팅을 확인해 주세요.

1. NUXT PWA Cache 적용

설정이 완료됐다면 nuxt.config.js에 workbox 설정을 추가해 주겠습니다.

  workbox: {
    runtimeCaching: [
      {
        handler: 'CacheFirst',
        urlPattern: '/*',
        strategyOptions: {
          cacheName: `v1`,
          cacheExpiration: {
            maxAgeSeconds: 30 * 60
          }
        }
      }
    ]
  }

runtimeCaching은 실행하는 동안 cache를 한다는 의미고, handler는 총 네 가지가 있는데 아래 링크에서 확인해 주세요.

전략 옵션에 cacheName을 v1으로 넣어 캐시 버전 관리를 해 주도록 하겠습니다. (이는 추후 낮은 캐시 버전을 삭제하기 위함입니다.) 또한 캐시 유효기간을 설정할 수 있는데, 저는 30분으로 설정했습니다.

 

그리고, npm run build 를 실행하여 프로젝트를 빌드한 후 static/sw.js 파일을 열어 주세요.

 

코드를 작성한 적이 없는데 특정 코드가 작성되어있는 모습을 볼 수 있을 텐데요, 이는 빌드할 때 workbox가 알아서 설정해 준 것입니다. 

 

이제 npm run start를 실행하여 프로젝트를 실행해 주시고, localhost:3000 을 접속하여 확인해 보겠습니다. (pwa는 보안 문제로 https:// 혹은 localhost에서만 확인이 가능합니다.)

 

크롬에서 f12를 눌러 개발자 모드 창을 띄워 주시고, Application 탭을 눌러 주세요.

 

그럼 Cache 부분이 보일 텐데요, 이 중 Cache Storage를 확인해 주시면 됩니다.

v1이 생겼네요! 이제 페이지를 이동하시면 옆에 캐시들이 쌓이는 것을 보실 수 있을 겁니다.

캐시가 충분히 쌓였다면 Application 탭에서 service worker를 눌러 offline을 체크해 주세요.

그리고 다시 새로고침을 해 보시면, 오프라인 상태인데도 동작하는 것처럼 보일 것입니다. 이는 캐시들이 쌓여있기 때문에 동작하는 것처럼 보이는 것입니다.

 

추가로, 낮은 버전을 삭제해 주기 위해서 플러그인을 등록해 주겠습니다.

plugins 폴더에 service-worker.js라는 파일을 만들고, nuxt.config.js 파일에 등록해 주겠습니다.

plugins: [
  { src: '~/plugins/service-worker.js' }
],

그리고 service-worker.js 파일에 버전이 낮은 캐시를 삭제해 줄 코드를 추가하겠습니다.

if (process.client) {
  const cacheName = `v1`
  caches.keys().then((keyList) => {
    return Promise.all(
      keyList.map((key) => {
        if (key !== cacheName) {
          return caches.delete(key)
        }
      })
    )
  })
}

저는 ssr을 사용하고 있기 때문에, 클라이언트에서만 작동시키겠다는 process.client 조건을 추가해 줬습니다. (서버에서는 작동되지 않습니다.)

 

이제 nuxt.config.js 파일의 workbox 부분의 strategyOptions의 cacheName과, 방금 추가한 service-worker.js 파일의 cacheName을 v2로 변경한 후 다시 npm run build; npm run start를 해 주세요.

 

offline을 체크 해제하고, 사이트 재접속을 하면 v1이 삭제되고 v2으로 업그레이드 된 것을 볼 수 있을 것입니다.

 

하지만, 여기에서 끝내면 조금 아쉽습니다. 버전을 바꿀 때마다 nuxt.config.js 파일과 service-worker.js 파일을 바꿔 줘야 하기 때문에, 너무 번거롭습니다.

 

그래서 package.json에 있는 version을 가져와서 사용하려고 합니다.

2. version number 추가

package.json을 여시면, 가장 상단에 “version”: “1.0.0” 가 있는 것을 볼 수 있을 것입니다. 이것을 사용해도 좋은데, 저는 그 밑에 version_number라는 것을 추가해 주도록 하겠습니다.

{
  "name": "title",
  "version": "1.0.0",
  "version_number": 1,
  ....
}

그리고, nuxt.config.js의 cacheName을 process.env.npm_package_version_number로 변경해 주세요.

 

재빌드 후 사이트를 재접속하여 캐시를 확인하면 캐시의 이름이 package.json의 version_number를 따라가는 것을 확인할 수 있을 겁니다.

 

이렇게 끝내면 조금… 아쉽습니다. service-worker.js에도 version_number를 연결시켜 주면 좋을 텐데요,  cacheName과 같은 process.env… 를 사용하면 값이 undefined 입니다.

 

그래서 이것을 nuxt.config.js에 환경변수로 등록해 주려고 합니다.

 

nuxt.config.js에 env를 추가한 후 아래처럼 작성해 주세요.

env: {
  packageVersionNumber: process.env.npm_package_version_number
},

그리고 이제 service-worker.js 파일의 const cacheName = `v1`을 const cacheName = `v${process.env.packageVersionNumber}`로 변경해 주세요.

 

그리고 제대로 실행되는지 확인해 보기 위해서 package.json의 version_number를 3으로 변경해 주겠습니다.

 

재빌드 후 사이트를 재접속하시면 기존 버전 v2 캐시가 사라지고 v3이 생긴 것을 확인하실 수 있을 겁니다.

 

댓글은 저에게 많은 도움이 됩니다!