웹 푸시 사용

확장 프로그램에서는 푸시 제공자를 사용하여 푸시 알림과 메시지를 보낼 수 있습니다. Push API의 푸시는 수신 즉시 서비스 워커에서 처리됩니다. 서비스 워커가 정지된 경우 푸시를 실행하면 서비스 워커가 다시 활성화됩니다. 확장 프로그램에서 사용하는 프로세스는 오픈 웹에서 사용하는 프로세스와 정확히 동일합니다.

Push API 사용 권한 얻기

일반 웹사이트에 푸시 서버를 등록하면 사용자에게 이를 부여하거나 거부하라는 권한 메시지가 표시됩니다. 확장 프로그램을 사용하면 메시지가 표시되지 않습니다. 확장 프로그램에서 Push API를 사용하려면 manifest.json에서 notifications 권한을 설정해야 합니다.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

이 권한이 없으면 registration.pushManager와의 상호작용에서 즉각적인 오류가 발생하며 이는 사용자가 권한을 거부한 경우와 동일합니다. 또한 notifications 권한으로 인해 설치 시 권한 경고가 표시된다는 점에 유의하세요. 또한 Chrome은 사용자가 새 권한 요청을 승인할 때까지 기존 설치에 대해 확장 프로그램을 사용 중지합니다. 이를 처리하는 방법은 권한 경고 가이드를 참고하세요.

푸시 제공자 및 푸시 서비스

manifest.json에 권한을 추가한 후에는 백엔드와 확장 프로그램 간의 연결을 구성해야 합니다. 이 연결은 푸시 제공자와 푸시 서비스의 두 부분으로 생각할 수 있습니다. 제공업체는 푸시 서비스에 메시지를 전송하는 데 사용하는 SDK입니다. 다양한 옵션이 있으며 모든 푸시 제공업체는 Push API를 사용할 수 있습니다 (하지만 통합을 쉽게 할 수 있는 SDK는 제공하지 않을 수 있음). 제공업체의 SDK로 실험하여 무엇을 할 수 있는지 확인해야 합니다. 푸시 서비스는 최종 사용자의 기기가 등록된 서비스이므로 푸시 제공자가 보낸 모든 푸시 메시지에 대해 알림을 받을 수 있습니다. 이는 개별 브라우저에 하드코딩되어 있으므로 제어할 수 없습니다. Chrome의 경우 Firebase 클라우드 메시징이 푸시 서비스입니다. Chrome 사용자에게 푸시되는 모든 메시지는 이를 통해 라우팅됩니다.

푸시 제공자 자체 호스팅

모든 푸시 제공자가 작동할 수 있지만, 모든 제공자가 서비스 워커에서 작동하는 SDK를 제공하는 것은 아닙니다. 실행하는 데 문제가 있는 경우 제공업체에 문의해야 합니다. 그러나 공개 공급자를 사용할 필요는 없습니다. web-push와 같은 라이브러리를 사용하면 자체 백엔드를 호스팅할 수 있습니다.

web-push-codelab.glitch.me를 사용하여 이 라이브러리를 테스트할 수 있습니다. 특히 브라우저에서 푸시 구독을 생성하려면 푸시 서버의 VAPID 공개 키를 복사해야 합니다. 이 공개 키는 실제로 base64로 인코딩된 바이너리 값이며, 브라우저의 푸시 관리자에 등록하려면 디코딩되어 Uint8Array로 변환되어야 합니다. 이 로직을 실행하는 데 사용할 수 있는 라이브러리가 있지만, 다음만 있으면 됩니다.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

제공된 값은 푸시 관리자로 전달됩니다.

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

subscribe 함수는 Push 서버의 메타데이터가 포함된 객체인 PushSubscription을 반환합니다. web-push-codelab.glitch.me를 사용 중이므로 이 값을 페이지의 구독 푸시 부분에 복사해야 합니다.

PushSubscription이 있으면 확장 프로그램의 서비스 워커에 푸시 메시지 리스너를 등록할 준비가 된 것입니다.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

리스너가 준비되면 web-push-codelab.glitch.me에 메시지를 제출할 수 있으며 메시지가 서비스 워커의 콘솔에 로깅됩니다.

웹 푸시는 개방형 웹 표준이므로 Chrome 블로그를 비롯하여 웹 푸시 구현 방법에 관한 기존 문서가 많이 있습니다. 여기에 포함된 예의 전체 버전은 확장 프로그램 샘플 저장소에서 확인할 수 있습니다.

무음 푸시

Chrome 88에 Manifest V3가 도입된 이후 Manifest v3 확장 프로그램에서 푸시 알림을 받을 수 있었습니다. 하지만 항상 웹 알림과 같이 사용자에게 표시되는 메시지를 표시해야 한다는 요구사항이 있었습니다. 이로 인해 불필요한 정보로 사용자를 방해하지 않고 확장 프로그램에 명령어 또는 데이터 업데이트를 푸시하려는 경우 유용성이 훨씬 떨어졌습니다. Chrome 121부터 확장 프로그램에서 userVisibleOnly를 false로 설정할 수 있습니다. 이제 사용자에게 표시되지 않는 사용자용 푸시 알림을 보낼 수 있습니다. 이를 사용하려면 pushManager.subscribe를 호출할 때 userVisibleOnly를 false로 설정하세요.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});