알림 동작

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

지금까지 알림의 시각적 모양을 변경하는 옵션을 살펴보았습니다. 현재 알림 동작을 변경하는 옵션도 제공합니다.

기본적으로 시각적 옵션만 사용하여 showNotification()를 호출하면 다음이 됩니다. 있습니다.

  • 알림을 클릭해도 아무런 변화가 없습니다.
  • 새 알림이 차례로 표시됩니다. 브라우저에서는 알림을 보낼 수 있습니다.
  • 플랫폼에 따라 플랫폼에서 소리가 나거나 사용자 기기가 진동할 수 있습니다.
  • 일부 플랫폼에서는 알림이 잠시 후에 사라지지만 다른 플랫폼에서는 사용자가 상호작용하지 않는 한 알림을 표시합니다. 예를 들어 (Android 및 데스크톱에서 사용 가능)

이 섹션에서는 옵션을 사용하여 이러한 기본 동작을 변경하는 방법을 살펴보겠습니다. 합니다. 이들은 비교적 쉽게 구현하고 활용할 수 있습니다.

알림 클릭 이벤트

사용자가 알림을 클릭할 때 기본 동작은 아무 일도 일어나지 않습니다. 그렇지 않습니다. 알림을 닫거나 삭제할 수도 있습니다

일반적으로 알림을 클릭하면 알림이 닫히고 다른 로직 (예: 창을 열거나 애플리케이션에 API를 호출)

이렇게 하려면 'notificationclick' 이벤트 리스너를 서비스 워커에 추가해야 합니다. 이 는 알림을 클릭할 때마다 호출됩니다.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

이 예에서 볼 수 있듯이 클릭된 알림은 다음과 같이 액세스할 수 있습니다. event.notification 여기서 알림의 속성과 메서드에 액세스할 수 있습니다. 이 close() 메서드를 호출하고 추가 작업을 실행합니다.

작업

작업을 사용하면 클릭 한 번으로 사용자와 다른 수준의 있습니다.

버튼

이전 섹션에서는 showNotification()를 호출할 때 작업 버튼을 정의하는 방법을 알아봤습니다.

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

사용자가 작업 버튼을 클릭하면 noticationclick에서 event.action 값을 확인합니다. 이벤트를 사용하여 어떤 작업 버튼이 클릭되었는지 알려줍니다.

event.action에는 옵션에 설정된 action 값이 포함됩니다. 위의 예에서 event.action 값은 'coffee-action', 'doughnut-action', 'gramophone-action' 또는 'atom-action'입니다.

이를 통해 다음과 같이 알림 클릭 또는 작업 클릭을 감지합니다.

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

인라인 답장

이전 섹션에서는 알림에 인라인 답장을 추가하는 방법도 살펴봤습니다.

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply에는 사용자가 입력란에 입력한 값이 포함됩니다.

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

태그

tag 옵션은 기본적으로 '그룹화'하는 문자열 ID입니다. 알림을 함께 제공하여 여러 알림이 사용자에게 표시되는 방식을 결정하는 방법입니다. 가장 쉽게 설명할 수 있는 것은 살펴보겠습니다

알림을 표시하고 'message-group-1' 태그를 지정해 보겠습니다. 인코더와 디코더가 다음 코드를 포함하는 알림입니다.

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

첫 번째 알림이 표시됩니다.

메시지 그룹 1의 태그가 포함된 첫 번째 알림

다음과 같이 'message-group-2'라는 새 태그가 있는 두 번째 알림을 표시해 보겠습니다.

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

그러면 사용자에게 두 번째 알림이 표시됩니다.

메시지 그룹 2의 두 번째 태그가 있는 2개의 알림.

이제 세 번째 알림을 표시하되 'message-group-1'의 첫 번째 태그를 재사용해 보겠습니다. 수행할 작업 첫 번째 알림이 닫히고 새 알림으로 대체됩니다.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

이제 showNotification()가 세 번 호출되었지만 알림이 2개 있습니다.

두 개의 알림에서 첫 번째 알림이 세 번째 알림으로 대체됩니다.

tag 옵션은 단순히 메시지를 그룹화하여 새 알림과 같은 태그가 있으면 닫힙니다.

tag 사용의 미묘한 점은 알림을 대체할 때 소리 없이 대체한다는 점입니다. 진동입니다.

이때 renotify 옵션이 사용됩니다.

다시 알림

이 내용은 이 문서 작성 시점의 휴대기기에 주로 적용됩니다. 이 옵션을 설정하면 알림이 진동하고 시스템 사운드가 재생됩니다.

사용자에게 알리지 않고 교체 알림을 통해 사용자에게 알리도록 할 수도 있습니다. 자동으로 업데이트됩니다. 채팅 애플리케이션이 좋은 예입니다. 이 경우 tag 및 renotify에서 true(으)로

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);
드림

무음

이 옵션을 사용하면 새 알림을 표시할 수 있지만, 기본 진동 기능은 알림음이 울리고 기기 화면이 켜집니다.

이 설정은 알림에 사용자가 즉각적으로 주의를 기울이지 않아도 되는 경우에 이상적입니다.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

상호작용 필요

데스크톱의 Chrome에서 알림을 숨기기 전에 일정 기간 동안 표시합니다. Chrome 사용 Android에는 이러한 동작이 없습니다. 알림은 사용자가 상호작용할 때까지 표시됩니다.

사용자가 상호작용할 때까지 알림이 계속 표시되도록 하려면 requireInteraction를 추가합니다. 옵션을 선택합니다. 그러면 사용자가 알림을 닫거나 클릭할 때까지 알림이 표시됩니다.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

이 옵션은 신중하게 사용하세요. 알림을 표시하고 사용자가 무엇을 중지하도록 강제 너무 당황스러울 수 있습니다

다음 섹션에서는 모든 웹 페이지를 위해 웹에서 사용되는 몇 가지 일반적인 패턴을 알림 관리 및 작업 수행(예: 알림 클릭 시 페이지 열기)

다음에 수행할 작업

Codelab