About Service Worker
ServiceWorker가 무엇이고 어떤 일을 할 수 있는지 알아보겠습니다.
풍부한 오프라인 경험, 주기적 백그라운드 동기화, 푸시 알림(일반적으로
원시 애플리케이션을 요구하는 기능)이 웹에서 지원되고 있습니다.
서비스 워커는 이러한 모든 기능의 기술적 기반을 제공합니다.
구글이 서비스워커에 대해서 써놓은 설명 입니다.
이 말만 들어보면, 서비스 워커는 정말 획기적인 일들을 할 수 있게 도와주는
놀라운 도구입니다.
백그라운드 동기화, 푸시 알림, 앱 버튼을 클릭해서 앱의 기능들을 사용하는 등의 기능은 기존의 모든 데이터를 다운로드해 설치하는 형식의 네이티브 앱 에서만 가능하다고 여겨지던 것이였습니다.
그런데 이제는 설치하지 않고 브라우저에 접속만 하는데도 푸시 알림이 오고 백그라운드 데이터가 자동으로 동기화 된다는 얘기 입니다.
또한 브라우저에 접속이 아닌 실제 앱 처럼 화면상에 등록이 가능합니다!
( 웹에서 할 수 있는 일들이 굉장히 많아졌습니다 )
그런데, 어떻게 앱을 설치하지 않고도 이런 일이 가능한 걸까요?
일단, 기존에 우리가 사용하던 웹은 이렇습니다.
- 어떤 사용자가 웹 서버에 요청을 합니다.
- 응답이 와서 HTML, CSS, JavaScript를 받습니다.
- 응답받은 파일들을 통해 페이지를 렌더링 하게 됩니다.
- 그 다음, JavaScript를 통해서 사용자에 요청에 따라 API 요청을 (아닐 수도) 해서 필요한 데이터를 받아와서 사용자에게 보여주게 되겠죠.
이렇게 성공적으로 불러와지게 되고 정상 동작하게 되면,
사용자가 웹 페이지를 나가거나 브라우저를 종료하지 않는 한 브라우저 내에서 요청된 JavaScript를 통해 푸시 알림을 보내는 일 같은 것들이 가능합니다.
그런데 만약 사용자가 웹 페이지를 닫았다고 해 보세요.
중요한 알림이 웹 페이지에 있기 때문에 사용자에게 알려 주어야 합니다.
그러나 사용자는 웹 페이지를 닫아버렸기 때문에, 아무리 메시지를 보내고
싶어도 받을 주소가 없기 때문에, 응답 자체를 할 수가 없게 됩니다.
브라우저 밖의 요소를 컨트롤 할 수가 없다는 이야기죠.
이러한 문제를 해결해 줄 수 있는 것은
서비스워커 입니다!
그런데 이쯤 되면 드는 생각이 있습니다. 어쨌든 서비스워커도 웹에서 동작하는 것일 텐데, 얘도 웹 브라우저를 닫아버리면 효과가 없는 거 아닐까?
생각하시는 분들이 있으실지도 모르겠네요. 하지만 서비스 워커는 브라우저가 종료할 때에도 독자적인 형태로 작동하기 때문에 그럴 걱정은 없습니다!
Service Worker의 적용 방법
지금 보시는 코드는 실제로 리액트 JS를 할 때에 기본으로 탑재되어 있는
서비스 워커 코드입니다.
리액트 JS의 경우에는 CRA라는 보일러플레이트를 통해 프로젝트를 만들게 되었을 때, 자동으로 이 파일이 만들어지고 동작하게 만들어 졌습니다.
그래서 저도 모르게 서비스워커를 사용하고 있었네요.
어쨌든, 이런 코드를 웹 브라우저에 넣기만 하면 일단 서비스 워커는 등록이 완료된 것입니다.
중요한 점이 또 있는데, localhost 환경이 아닌 다른 환경에서 할 때는
https로 등록을 해 주어야 합니다.
서비스 워커를 통해서 할 수 있는 대표적인 일에는 인터넷이 없는 상황에서 브라우저의 캐시를 통해서 데이터를 받아와서 보여준 것처럼 할 수도 있고,
서비스 워커를 통해서 디자인의 변화나 다른 것들의 변화를 미리 가져와서 변경 한 후, 사용자가 접속했을 때 빠른 로딩이 가능하게끔 할 수 있습니다.
또, 브라우저가 닫힌다고 서비스 워커가 닫히는 것은 아니기 때문에, 푸시 알림을 보낼 수가 있게 됩니다.
그러나… 서비스워커에게도 단점은 존재 합니다.
서비스 워커의 단점으로는
- 프로세스 동작 중 설치 실패 알림 기능이 부족합니다.
- 인증 정보가 없습니다.
- CORS를 지원하지 않는 리소스에서 URL을 가져올 수 없습니다.
하지만 최신 기술이기 때문에 문제는 곧 해결될 거라고 생각합니다.
오늘 제가 쓸 포스트는 여기까지 입니다. 서비스워커에 대해서 자세히
알아보시려면
이 링크를 타고 들어가셔서 살펴 보시는 것을 추천드립니다. 포스트를 읽어주셔서 감사합니다.
