PWA에서 캐시 삭제와 강력 새로 고침 방법

서론

Progressive Web Apps(PWAs)는 웹과 네이티브 앱의 장점을 결합하여 제공하는 애플리케이션입니다. PWA는 캐시를 사용하여 오프라인에서도 빠르게 로드할 수 있습니다. 그러나 개발 중이나 업데이트 후 캐시된 데이터를 삭제하고 강력 새로 고침을 수행해야 할 때가 있습니다. 이 글에서는 PWA에서 캐시를 삭제하고 강력 새로 고침을 수행하는 방법을 설명합니다.

PWA에서 캐시 삭제 방법

1. 서비스 워커에서 캐시 삭제

PWA의 서비스 워커는 캐시를 제어하고 관리합니다. 다음은 서비스 워커에서 캐시를 삭제하는 예제입니다.

javascript

코드 복사

self.addEventListener('activate', (event) => { const cacheAllowlist = ['your-cache-name']; event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheAllowlist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });

이 코드는 서비스 워커가 활성화될 때 지정된 캐시 이름이 아닌 모든 캐시를 삭제합니다.

2. 브라우저 개발자 도구 사용

브라우저의 개발자 도구를 사용하여 PWA의 캐시를 수동으로 삭제할 수 있습니다.

1. 크롬 브라우저:
   • F12 키를 눌러 개발자 도구를 엽니다.
   • 'Application' 탭을 선택합니다.
   • 'Storage' 섹션에서 'Clear storage'를 선택하고, 'Clear site data' 버튼을 클릭합니다.
2. 파이어폭스 브라우저:
   • F12 키를 눌러 개발자 도구를 엽니다.
   • 'Storage' 탭을 선택합니다.
   • 'Cache Storage'를 확장하고, 각 캐시 항목을 우클릭하여 'Delete'를 선택합니다.

강력 새로 고침 방법

강력 새로 고침(혹은 강력 새로고침)은 브라우저가 캐시된 리소스를 무시하고 서버에서 최신 리소스를 다시 가져오도록 강제하는 방법입니다. 이를 통해 최신 변경 사항을 반영할 수 있습니다.

1. 개발자 도구 사용

크롬 브라우저:

1. F12 키를 눌러 개발자 도구를 엽니다.
2. 개발자 도구가 열린 상태에서 새로 고침 버튼을 길게 누릅니다.
3. 'Hard Reload' 또는 'Empty Cache and Hard Reload'를 선택합니다.

파이어폭스 브라우저:

1. F12 키를 눌러 개발자 도구를 엽니다.
2. 개발자 도구가 열린 상태에서 페이지를 새로 고침합니다(Ctrl + F5 또는 Shift + F5).

2. 서비스 워커 업데이트

서비스 워커를 업데이트하여 클라이언트가 새로운 버전을 설치하도록 강제할 수 있습니다.

javascript

코드 복사

self.addEventListener('install', (event) => { self.skipWaiting(); }); self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { return caches.delete(cacheName); }) ); }).then(() => { return clients.claim(); }) ); });

이 코드는 서비스 워커가 설치될 때 즉시 활성화되도록 하고, 활성화될 때 모든 캐시를 삭제합니다. 이를 통해 서비스 워커가 변경될 때마다 새로운 캐시가 로드됩니다.

결론

PWA에서 캐시를 삭제하고 강력 새로 고침을 수행하는 방법은 서비스 워커를 통해 캐시를 관리하거나, 브라우저의 개발자 도구를 사용하는 방법이 있습니다. 이 두 가지 방법을 활용하여 PWA의 최신 변경 사항을 반영하고 캐시 문제를 해결할 수 있습니다.