background 에서도 동작하는 javascript 를 만들기

setInterval 또는 setTimout 을 이용해

주기적인 호출이 필요한 javascript 를 작성했을 때 가장 문제가 되는 부분이라면

바로 브라우저가 백그라운드일 때 정상적으로 javascript 가 정상적으로 호출이 되지 않는다는 것이죠.

 

let count = 0;
setInterval(() => {
	console.log(`call: ${++count}`);
}, 200);

이런 코드를 작성했다고 합시다.

 

 

5번까지 정상적으로 약 200ms 간격으로 호출되나

백그라운드로 이동된 후부터는 대략 1초 간격으로 호출되기 시작합니다.

 

따라서 주기적인 폴링이 필요하다거나 카운팅을 한다거나 하는 경우 문제가 생깁니다.

그런 경우 Web Worker 를 이용하여 작성하게 되면 해결됩니다.

 

const blob = new Blob(["setInterval(() => { postMessage(''); }, 200);"]);
const worker = new Worker(window.URL.createObjectURL(blob));
let count = 0;
worker.onmessage = () => {
    console.log(`call: ${++count}`);
};

 

위 코드를 실행시켜 보면

 

동일하게 5번에서 브라우저를 백그라운드로 이동시켰으나

정상적으로 약 200ms 간격으로 호출되는 것을 볼 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/Using_web_workers

웹 워커 사용하기 - Web API | MDN

 

웹 워커에 대한 자세한 내용은 위 링크 참조.

 

이렇게 사용하라고 생긴 API 는 아닌 것 같지만

이렇게 사용하는 빈도가 제일 많을 것 같아서

기록 삼아 남겨봅니다.

 

https://caniuse.com/webworkers

Web Workers | Can I use... Support tables for HTML5, CSS3, etc

 

호환성

브라우저 호환성은 꽤 준수한 편이니 무리 없이 사용 가능합니다.