서비스 워커 (Servcie Worker)

Service Worker

 

 

서비스 워커는 브라우저와 분리되어 독립해서 사용할 수 있다.

서비스 워커의 주요 기능은 ①캐싱, ②푸시 알림, ③백그라운드 동기화.

캐싱은 이미지나 데이터를 캐시에 저장해서 캐싱되있는 데이터를 사용하기 때문에 더욱 빠르고 오프라인에서도 실행 가능하게 만든다. 캐시 범위나 파일(정규표현식가능) 지정할 수 있다.

푸시 알림은 구독하면 웹이나 어플이 실행중이든 아니든 서비스 워커는 백그라운드에서 별도로 실행되기 때문에 받을 수 있다.

백그라운드 동기화란건 뭐냐면 음.. 카톡하다가 인터넷이 끊기면 메시지가 안나가다가? 갑자기 인터넷이 들어오면 써놨던 카톡이 나가는데 이런거? 흠... 인터넷이 연결되든 안되든 항상 사용자 경험은 같도록 하기 위한 그런거다!

사실 나는 캐싱이랑 푸시만 해보고 백그라운드 동기화는 따로 해보지는 않았다.

 

사용하는 브라우저가 서비스 워커를 지원하는지 확인하려면 아래 사이트를 접속해서 확인할 수 있다. (접속 후 새로 고침)

https://mobilehtml5.org/tests/sw

 

 

루트경로에 service_worker.js 파일을 작성한다. (만약 npm run build 명령을 사용해서 /dist 폴더를 생성해 실행한다면 /dist 폴더 내에도 똑같은 service_worker.js 파일을 복사해 주어야한다. 왜냐면 빌드가 완료되면 /dist가 빌드루트이기 때문! serve dist 명령을 통해 빌드된 정적웹사이트를 기동할 수 있다. 이정도면 알아들었제?)

아래는 파일의 내용인데 최근 서비스워커 정책이 바뀌면서 푸쉬를 사용하는 방법이 쪼매 바꼈다. 이 소스를 코딩한 시기가 대략 2021년 5월쯤이다.

 

service_worker.js

const sCacheName = 'version1.1'; // 버전을 바꾸면 캐싱도 다시하도록 한다. const aFilesToCache = [ // 캐싱할 경로와 파일     './', './index.html', './manifest.json', './favicon.ico' ]; // 푸시 메시지를 받는 경우 처리 self.addEventListener("push", function(event) {     // 푸시 메시시를 JSON 형태로 변경     if (event.data) {         data = JSON.parse(event.data.text());     } else {         console.log("데이터가 비어있습니다!");     }     const options = {         body: data.pMsg,         icon: "/img/push-noti.png",         badge: "/img/push-badge-icon.png",         image: "/img/push-coffee.png",         vibrate: [500, 100, 500]     };     event.waitUntil(         // 알림 메시지 전송하여 표시         self.registration.showNotification(data.pTitle, options)     ); }) // 푸시 알림 메시지에서 사용자가 링크 클릭 시 처리 self.addEventListener("notificationclick", function(event) {         if (event.action == "like") {             clients.openWindow("https://www.starbuks.com/");         } else if (event.action == "info") {             clients.openWindow("https://code-design.web.app");         }         //푸시 알림 이벤트 종료         event.notification.close();     },     false ); self.addEventListener('install', pEvent => {    // console.log('서비스 워커 설치함');     pEvent.waitUntil(         caches.open(sCacheName)         .then(pCache=>{             // console.log('파일을 캐시에 저장함!');             return pCache.addAll(aFilesToCache);         })     ); }); 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);             }             // console.log("캐시에서 데이터 요청!", pEvent.request);             return response;         }).catch(err=>console.log(err))     ); });

따로 console.log()를 찍어보면 알겠지만

서비스워커의 이벤트에는 install, activate, fetch가 기본적으로 있고 그 외의 이벤트들은 사용하면 호출된다.

생명주기는 install > activate > fetch 순서이다.

install이벤트에서 중요한것은 event.Until() 함수이다. installing 상태에서 'pre-cache'(서비스워커가 준비될 때 캐시를 저장하는 것)가 완료될 때 까지 대기해야하기 때문이다.

activate에서는 원래 업데이트를 위한 것인데 waitUntil()함수를 사용해서 기존 캐시를 제거하는 코드를 넣어주어야 한다.

그리고 fetch 이벤트는 새로고침할 때 주로 일어나는데 event.respondWith() 함수가 중요하다! 이를 통해서 네트워크를 요청을 임시적으로 중단할 수 있기 때문이다.

 

구글 크롬에서 F12 키를 눌러서 개발자콘솔 > Application > Service Worker를 확인할 수 있다.