웹 푸시 사용

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

Push API 사용 권한 얻기

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

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

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

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

manifest.json에 권한을 추가한 후에는 백엔드와 확장 프로그램 간의 연결을 구성해야 합니다. 이 연결은 두 부분, 즉 푸시 제공자와 푸시 서비스로 생각할 수 있습니다. 제공업체는 푸시 서비스로 메시지를 전송하는 데 사용되는 SDK입니다. 다양한 옵션이 있으며 Push API에는 어떤 Push 제공업체도 사용할 수 있습니다 (단, 통합을 간소화하는 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 블로그를 포함하여 웹 푸시를 구현하는 방법에 관한 기존 문서가 많이 있습니다. 여기에서 다룬 예시의 전체 버전은 확장 프로그램 샘플 저장소에서 확인할 수 있습니다.

무음 푸시

Manifest v3가 Chrome 88에 도입된 이후 Manifest v3 확장 프로그램에서 푸시 알림을 받을 수 있었습니다. 하지만 알림에 웹 알림과 같은 사용자에게 표시되는 메시지가 있어야 한다는 요구사항이 항상 있었습니다. 따라서 사용자에게 불필요한 정보를 제공하지 않고 명령어 또는 데이터 업데이트를 확장 프로그램에 푸시하려는 경우 이 방법은 훨씬 덜 유용했습니다. Chrome 121부터 확장 프로그램은 userVisibleOnly를 false로 설정할 수 있습니다. 이제 사용자에게 사용자 대상이 아닌 무음 푸시 알림을 보낼 수 있습니다. 이 기능을 사용하려면 pushManager.subscribe를 호출할 때 userVisibleOnly를 false로 설정합니다.

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