웹 푸시 사용

확장 프로그램에서 푸시 제공자를 이용하여 푸시 알림을 보내고 메시지를 보낼 수 있습니다 Push API에서의 푸시는 서비스 워커에서 전송됩니다. 서비스 워커가 정지된 경우 푸시는 다시 작동시킬 수 있습니다. 확장 프로그램에서 사용하는 과정은 오픈 웹에서 사용할 것입니다.

Push API를 사용할 권한 얻기

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

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

이 권한이 없는 경우 registration.pushManager는 즉시 오류를 발생시키며 결과는 다음과 같습니다. 사용자가 권한을 거부한 경우입니다. 또한 notifications 권한으로 인해 권한 경고가 발생합니다. 표시됩니다. 또한 Chrome은 선택한 기기에 대해 확장 프로그램을 사용 중지합니다. 사용자가 새 권한 요청을 승인할 때까지 기존 설치가 계속 유지됩니다. 다음과 같은 작업을 할 수 있습니다. 이 문제를 처리하는 방법에 대한 자세한 내용은 권한 경고 가이드를 참조하세요.

푸시 제공자 및 푸시 서비스

manifest.json에 권한을 추가한 후 다음을 수행해야 합니다. 백엔드와 확장 프로그램 간의 연결을 구성합니다. 이 연결 푸시 제공자와 푸시 서비스라는 두 부분으로 나눌 수 있습니다. 가 provider는 개발자가 푸시 서비스에 메시지를 보내는 데 사용하는 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이 있으면 PushSubscription의 리스너를 등록할 준비가 된 것입니다. 푸시 메시지를 보냅니다.

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

리스너가 준비되면 web-push-codelab.glitch.me를 제출하면 메시지가 Google Cloud 서비스 워커의 콘솔에서 시작됩니다

개방형 웹 표준이기 때문에 Chrome 블로그 등 웹 푸시를 구현하는 방법에 대해 자세히 알아보세요. 전체 버전을 보려면 Google의 확장 프로그램 샘플 저장소를 참고하세요.

무음 푸시

Manifest V3 확장 프로그램에서 푸시 알림을 받을 수 있었습니다. Manifest V3로 알려진 업데이트입니다 그러나 그 어느 때보다도 알림에서 사용자에게 가시적인 메시지를 표시해야 한다는 요구사항을 (예: 웹 알림) 이로 인해 기존에 번거로움 없이 확장 프로그램에 명령이나 데이터 업데이트를 푸시하고 싶었습니다. 사용자에게 불필요하게 정보를 제공하는 경우를 예로 들 수 있습니다 Chrome 121부터 확장 프로그램이 userVisibleOnly를 false로 설정할 수 있습니다. 이제 사용자에게 푸시 알림을 보낼 수 있습니다. 이를 사용하려면 pushManager.subscribe를 호출할 때 userVisibleOnly를 false로 설정합니다.

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