PWA service worker

service_worker.js

const sCacheName = 'hello-pwa'; // 캐시 제목 선언
const aFilesToCache = [ // 캐시할 파일 선언
  './', 
  './index.html', 
  './manifest.json', 
  './images/hello-pwa.png'
];

// 서비스 워커 설치하고 캐시 파일 저장
self.addEventListener('install', (pEvent) => {
  console.log('서비스 워커 설치함!');
  pEvent.waitUntil(
    caches.open(sCacheName)
      .then((pCache) => {
        console.log('파일을 캐시에 저장함!');
        return pCache.addAll(aFilesToCache);
      })
      .catch((error) => {
        console.error('캐시 저장 중 오류 발생:', error);
      })
  );
});

// 고유 번호를 할당받은 서비스 워커 작동
self.addEventListener('activate', (pEvent) => {
  console.log('서비스 워커 동작 시작됨!');
  // 추가적인 작업이 필요하다면 이곳에서 수행
});

// 데이터 요청을 받으면 네트워크 또는 캐시에서 찾아 반환
self.addEventListener('fetch', (pEvent) => {
  pEvent.respondWith(
    caches.match(pEvent.request)
      .then((response) => {
        if (!response) {
          console.log('네트워크에서 데이터 요청!', pEvent.request);
          return fetch(pEvent.request)
            .then((response) => {
              // 네트워크 요청에 성공한 경우, 새로운 리소스를 캐시에 추가
              caches.open(sCacheName)
                .then((pCache) => {
                  pCache.put(pEvent.request, response.clone());
                });
              return response;
            })
            .catch((error) => {
              console.error('네트워크 요청 중 오류 발생:', error);
            });
        }
        console.log('캐시에서 데이터 요청!', pEvent.request);
        return response;
      })
      .catch((error) => {
        console.error('캐시 검색 중 오류 발생:', error);
      })
  );
});