React Native를 다룰 줄 몰라 사용하게 된 PWA.

우리 서비스의 모토인 원클릭 인사이트 저장과 “리마인드” 를 위해 푸시 알림 기능이 필요해졌다.

네이티브 환경에서는 크게 어려울 것 없지만, pwa 환경에서 웹에서 동작하던 메커니즘을 그대로 모바일 환경에서도 적용할 수 있을지 확신이 들지 않았다.

web push notification의 동작원리를 제대로 알아보고 pwa 환경에서 동작할

web push notification?

• 웹 환경에서 푸시 알림을 받는 것으로, Push API, Notification API를 사용해 구현할 수 있다.
• 푸시 알림 기능을 구성하는 세 가지 요소와 그 순서에 대해 먼저 살펴보자.

1. 서비스(사용자)
2. 푸시 서비스 : 클라이언트의 구독 정보를 반환하며, 서버로부터 푸시 메시지를 전달 받아 클라이언트에게 전달한다.
3. 서버 : 클라이언트로부터 구독 정보를 전달 받고, 푸시 메시지를 푸시 서비스로 전달한다.

• 푸시 알림을 주고 받는 단계는 다음과 같다.

1. 활성(active) 상태의 serviceworker가 있어야 한다.

serviceworker?

• serviceworker는 Web Worker의 일종으로, 웹 응용 프로그램, 브라우저, 그리고 네트워크 사이의 프록시 서버 역할을 수행한다.
• 여기서 Worker 란 스크립트로 생성되며, 스크립트 연산을 스레드에서 쉽게 할 수 있도록 도와주는 기능
  • 메인 스레드와 분리 가능해 부하가 큰 작업을 하는 동안 메인 스레드의 작업에 영향을 주지 않고 진행할 수 있다.

async function registerServiceWorker () {
  if (!('serviceWorker' in navigator)) return;

  // get pre-registered serviceworker
  let registration = await navigator.serviceWorker.getRegistration();
  if (!registration) {
    // register new serviceworker
    registration = await navigator.serviceWorker.register('/service-worker.js');
  }
}

Push API

• 푸시 서비스 구독 및 해지와 푸시 메시지 수신을 담당한다.

2. PushManager.subscribe() 함수를 통해 push 알림을 구독(subscribe) 한다.