오프라인 서비스를 하기 위한 많은 방법이 있는데, 저는 이 중 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이 생긴 것을 확인하실 수 있을 겁니다.
댓글은 저에게 많은 도움이 됩니다!
'프론트 > Vue' 카테고리의 다른 글
| [Nuxt3] useFetch 를 커스텀화 하기 (interceptor, type 적용) (2) | 2023.01.17 |
|---|---|
| Nuxt(vue)에서 OAuth2 이용하기 (네이버, 카카오 로그인) (0) | 2022.09.19 |
| [Vue] Auth 적용, axios default header 추가, plugin 추가 (0) | 2022.02.06 |
| [vue] highcharts-vue, nuxt plugin 이용 (0) | 2022.02.06 |
| [Vue Ionic] App name, Splash Localization 국제화 지역화 (0) | 2022.02.06 |