[frontend] service worker 서비스 워커가 무엇?
우선 여기 설명을 읽어보면 대략 감(?)이 올 듯 하다.
오프라인 상황에서 브라우저가 뭘 해야될지 개발자가 제어할 수 있도록 한 것이고, 주기적 백그라운드 동기화, 푸시 알림(일반적으로 원시 애플리케이션을 요구하는 기능) 가능하도록 한 것이라고 한다.
주의 할 점들은..
1. 표준이 아니다.
2. https 가 적용되어 있어야 한다.
3. promise 를 사용법을 알아야 한다.
4. 모든 브라우저를 지원하지 않는다. 참고.. 아래(https://jakearchibald.github.io/isserviceworkerready/)
구현에 있어서는 아주 자세한 것들은 아래 사이트를 참고하면 된다. (시간내서 다 봐야 될거 같다)
https://w3c.github.io/ServiceWorker
검색을 해보면 오프라인에 대한 처리에 대해서 많은 글들을 찾아볼 수 있는데, 백그라운드 동기화나 푸시 알림에 대한 글은 아쉽게도 많지 않은거 같다.
푸시 알림은 sns에 올린 글에 대한 알림이 browser 알림으로 뜨는 것을 말하는데, 아래 글을 보면 쉽게 따라할 수 있을거 같다.
백그라운드 동기화는 오프라인으로 인해서 특정 처리가 완료가 되지 못했을 때, 온라인 상태가 되면 자동으로 처리가 완료되는 것을 말하는데 채팅에서 많이 볼 수 있다. 아래 글에 영상을 보면 이해에 도움이 될 것이다.
웹팩을 사용한다면 sw-precache-webpack-plugin 또는 offline-plugin 을 이용하면 된다. react-boilerplate 를 이용한다면 이미 포함되어 있을 것이다.
vue.js, nuxt 를 사용중이라면 좀 기다려봐야 될 듯하다.
nuxt-helpers 에 offline 를 이용해 볼 수도 있지만 아직 불안정하다고 한다.
다음에는 service worker를 이용해서 푸시 알림과 백그라운드 동기화를 구현하고 정리해보도록 하겠다.
