웹 푸시 사용

확장 프로그램에서 푸시 제공업체를 사용하여 푸시 알림 및 메시지를 보낼 수 있습니다. 푸시 API의 푸시는 수신되는 즉시 서비스 워커에서 처리됩니다. 서비스 워커가 일시중지된 경우 푸시가 다시 활성화합니다. 확장 프로그램에서 사용하는 프로세스는 개방형 웹에서 사용하는 프로세스와 정확히 동일합니다.

푸시 API 사용 권한 가져오기

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

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

이 권한이 없으면 registration.pushManager와의 상호작용으로 즉시 오류가 발생합니다. 이는 사용자가 권한을 거부한 경우와 동일한 결과입니다. 또한 notifications 권한으로 인해 권한 경고 가 설치 시 표시됩니다. Chrome은 사용자가 새 권한 요청을 승인할 때까지 기존 설치의 확장 프로그램도 사용 중지합니다. 권한 경고 가이드에서 이 문제를 처리하는 방법을 자세히 알아보세요.

푸시 제공업체 및 푸시 서비스

manifest.json에 권한을 추가한 후에는 백엔드와 확장 프로그램 간의 연결을 구성해야 합니다. 이 연결은 푸시 제공업체와 푸시 서비스라는 두 부분으로 생각할 수 있습니다. 제공업체는 푸시 서비스에 메시지를 보내는 데 사용되는 SDK입니다. 다양한 옵션이 있으며 모든 푸시 제공업체가 푸시 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 함수는 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's blog를 비롯하여 웹 푸시 구현 방법에 관한 기존 문서가 많이 있습니다. 여기에서 다룬 예의 전체 버전은 확장 프로그램 샘플 저장소에서 확인할 수 있습니다.

자동 푸시

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

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