일하다가 web push 사용을 검토해보는 작업을 하게 되었다. 이것저것 찾아보다보니 꽤 재미있기도 하고, 생각보다 그렇게 간단하지는 않다. 이전에 Notification API를 써본적이 있는데 요녀석과는 완전히 다른 것이다. 요것부터 먼저 비교를 하면,
이제 Push API를 한번 알아보자! Push APIweb push는 이 Push API를 사용하게된다. Push API는 웹 애플리케이션이 현재 로딩이 되어 있지 않더라도 서버로부터 메시지를 받을 수 있도록 하는 기능이다. 이 Push API가 생기기 이전의 푸시 알림은 앱에서만 존재했지만 웹에서도 어느정도 사용이 가능하다. 사용하는 사람이 많은지는 모르겠지만, 유튜브같은 경우도 요 web push를 지원하고 있어서 알림 설정을 켜두면 유튜브가 켜져 있지 않아도 알림을 받게 된다. 즉, 앱에서의 푸시 알림처럼 백그라운드에서도 알림을 띄울 수 있다. 일단 전제조건이, 웹앱이 현재 로딩되어 있지 않더라도 이기 때문에 서비스 워커를 필요로 하게된다. Service Worker서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동해서 요런 백그라운드 푸시 알림이 가능하게 해준다. 한가지 염두해둬야 될 점은 https 에서만 사용 가능하다. (개발용으로 localhost는 사용 가능하다) 즉, web push도 마찬가지로 https 에서만 가능하다. 동작 방식요게 어떻게 동작하지? 가 조금 이해가 안갔었는데, 리서치하다보니 요런식으로 정리가 된다.
여기서 push 서버라는게 조금 생소한데, 요건 우리가 만드는건 아니고 브라우저 제조사(구글, 모질라 등)가 제공하는 것이다. Push API를 통해서 subscription 정보를 발급하면 해당 서버의 엔드포인트가 들어있고, 이 엔드포인트에 데이터를 푸싱하면 푸시서버에서 등록된 service worker에 알리고, 우리는 service worker에 이벤트핸들러를 등록해 알림이 왔을때 어떻게할지 처리하면 된다. 또한, 여기서 암호화 부분이 있는데 VAPID를 사용하여 메시지를 암호화한다. 이 암호화의 목적은 본인의 서버에서만 Push가 가능하도록 하는 것이다. Public Key, Private Key를 이용하여 인증 헤더 구성 및 정보 암호화처리를 하고 Push 서버는 이 정보를 이용해 암호화 해독 후 보내준다. 관련 라이브러리요걸 처음부터 개발하게 되면 위에서 말한 VAPID 발급, 암호화 과정이 굉장히 복잡하다. 요걸 간단하게 해줄 수 있는 라이브러리를 사용하는게 여러모로 편하다. web-push
Firebase Cloud Messaging
예제위에서 말한 web-push를 이용해서 간단하게 코드 구현을 해보게되면 세 파트 정도로 나누어서 볼 수 있다. 그전에 일단 web-push 라이브러리를 받은 후 VAPID를 발급받도록 하자.
요렇게 하면 Public/Private 키 쌍이 나온다. 요걸 들고 있으면 준비 끝이다. subscription일단, 푸시 알림은 사용자 권한이 필요하다. Notification 알림 권한 설정부터 처리한다.
권한이 승인되면 서비스워커를 등록하고 subscription 정보를 발급받는다.
server서버에서는 두가지 처리가 필요하다.
먼저 Subscription 정보를 저장하는 처리를 해보면 (간단하게 그냥 배열에다 저장해두었다)
그리고, 원할 때 알림을 보낼 수 있도록 했다. (예시는
요렇게하면 이제 서비스워커에서 받아서 알림 처리만 하면 된다. serviceworker서비스워커에서는 먼저 push 이벤트를 받아서 알림을 띄워주어야 하고, 알림이 클릭되었을 때 처리를 하면된다. 먼저 push 이벤트 처리이다. 여기서는 간단하게 메시지, icon 처리정도만 해주었다.
다음은 알림 클릭시 작업이다.
요렇게되면 끝! 예제코드는 요기서 확인할 수 있다. 간단 예제라 재발급처리 등은 빠져있다. 실제 사용케이스에서는 들어가야할 것이다. 지원 여부지원여부 보면 주요 브라우저에서는 지원하지만 MacOS Safari에서는 지원하지 않고 독자적인 알림 시스템 (APNS) 사용한다고 한다. (요건 적용해본적은 없다) IOS도 찾아보았는데.. Push API 지원을 안해서 사용불가다. 참고
|