[JavaScript] 자바스크립트 백그라운드에서 작업 실행하기

235_자바스크립트 백그라운드에서 작업 실행하기

[적용]

• 브라우저의 백그라운드에서 네트워크를 감시하고 싶을 때

---

[문법]

메소드	의미	반환
navigator.serviceWorker.register()	serviceWorker 등록	Promise

---

[내용]

서비스 워커(Service Wroker)는 열려 있는 웹 페이지의 백그라운드에서 항상 작동하는 스크립트다.

웹 워커는 페이지가 열려 있을 때만 실행되나, 서비스 워커는 브라우저를 닫아도 실행할 수 있는 것이 특징이다.

푸시 알림과 캐시 기능 사용에 유용하다.

 

JavaScript                                                                                                                                                          main.js

if ('seviceWorker' in navigator) {
  navigator.serviceWorker
    .register('serviceworker.js')
    .then((registration) => {
      // 등록 성공
      console.log('ServiceWorker 등록 성공');
    })
    .catch((error) => {
      // 등록 실패
      console.log('ServiceWorker 등록 실패: ', error);
    });
}

JavaScript                                                                                                                                             serviceworker.js

self.addEventListener('fetch', (event) => {
  console.log('데이터 통신 발생', event.request);
});

main.js와 serviceworker.js는 별도의 파일로 생성해야 한다.

 

 

---

[Appendix]

서비스 워커로 캐시 기능 사용하기

캐시 기능을 이용하기 위해서는 구글이 제공하는 라이브러리인 워크박스(Workbox)가 유용하며,

서비스 워커에 URL 등을 설정하면 이용할 수 있다.

오프라인에서 웹 페이지를 표시하거나 HTTP 캐시보다 강력한 기능을 구축할 수 있으므로

웹사이트의 고석 정보 전송에 유리하다.

 

JavaScript   

// JS 라이브러리 가져오기
importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js'
);

// 구글 폰트 캐시 다루기
workbox.routing.registerRoute(
  new RegExp('https://fonts.(?googleapis|gstatic).com/(.*)'),
  workbox.strategies.cacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      })
    ]
  })
);

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김