알림 표시

Alexey Rodionov

Matt Gaunt

알림 옵션은 두 섹션으로 나뉘어 있는데, 하나는 시각적 측면( 섹션)에서 알림의 행동적 측면을 설명하는 섹션 (다음 섹션)을 살펴보겠습니다.

다양한 플랫폼의 다양한 브라우저에서 다양한 알림 옵션을 사용해 볼 수 있습니다. Peter Beverloo의 알림 생성기.

시각적 옵션

알림을 표시하는 API는 간단합니다.

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

두 인수 title와 options는 모두 선택사항입니다.

제목은 문자열이며 옵션은 다음 중 하나일 수 있습니다.

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

시각적 옵션을 살펴보겠습니다.

제목 및 본문 옵션

Windows용 Chrome에서 제목과 옵션이 없는 알림은 다음과 같이 표시됩니다.

보시다시피 브라우저 이름은 제목으로 사용되며 '새 알림' 자리표시자: 알림 본문으로 사용됩니다.

프로그레시브 웹 애플리케이션이 기기에 설치된 경우 웹 앱 이름이 대신 사용됩니다. 다음과 같습니다.

다음 코드를 실행했다면

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

Linux용 Chrome에서 다음과 같은 알림이 표시됩니다.

Linux의 Firefox에서는 다음과 같습니다.

다음은 Chrome에서 제목과 본문에 많은 텍스트가 포함된 알림이 표시되는 모습입니다. Linux:

Linux의 Firefox에서는 알림 위에 마우스 커서를 올릴 때까지 본문 텍스트가 축소됩니다. 펼칩니다.

Windows의 Firefox에서 동일한 알림은 다음과 같이 표시됩니다.

보시다시피 동일한 알림이 다른 브라우저에서 다르게 보일 수 있습니다. 또한 동일한 브라우저에서 다른 플랫폼에 대한 내용이 다릅니다

Chrome과 Firefox는 이러한 기능이 있는 플랫폼에서 시스템 알림과 알림 센터를 사용합니다. 을(를) 사용할 수 있습니다.

예를 들어 macOS의 시스템 알림은 이미지 및 작업 (버튼 및 인라인)을 지원하지 않습니다. 답글).

Chrome에는 모든 데스크톱 플랫폼을 위한 맞춤 알림도 있습니다. 사용 설정하려면 chrome://flags/#enable-system-notifications 플래그를 Disabled 상태로 변경합니다.

아이콘

icon 옵션은 기본적으로 제목과 본문 텍스트 옆에 표시할 수 있는 작은 이미지입니다.

코드에 로드하려는 이미지의 URL을 제공해야 합니다.

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Linux용 Chrome에서 다음 알림이 표시됩니다.

및 Linux용 Firefox의 경우:

안타깝게도 아이콘에 어떤 크기의 이미지를 사용해야 하는지에 대한 구체적인 가이드라인은 없습니다.

Android는 64dp 이미지를 원하는 것으로 보임 (기기 픽셀 비율의 64배 배수)입니다.

기기에서 가장 높은 픽셀 비율이 3이라고 가정할 때, 192픽셀 이상의 아이콘 크기는 있습니다.

배지

badge은 알림 발송 위치를 사용자에게 알립니다.

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

이 배지는 Android용 Chrome에서만 사용됩니다.

다른 브라우저 (또는 배지가 없는 Chrome)에는 브라우저 아이콘이 표시됩니다.

icon 옵션과 마찬가지로 사용할 크기에 관한 실질적인 가이드라인은 없습니다.

Android 가이드라인 자세히 살펴보기 권장 크기는 24px에 기기 픽셀 비율을 곱한 값입니다.

즉, 72px 이상의 이미지가 적절해야 합니다 (최대 기기 픽셀 비율이 3이라고 가정).

이미지

image 옵션을 사용하면 사용자에게 더 큰 이미지를 표시할 수 있습니다. 특히 사용자에게 미리보기 이미지를 표시하는 데 유용합니다.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Linux용 Chrome에서 알림은 다음과 같이 표시됩니다.

Android의 Chrome에서는 자르기와 비율이 다릅니다.

데스크톱과 모바일의 비율 차이를 고려할 때 가이드라인을 참조하세요.

데스크톱의 Chrome은 사용 가능한 공간을 채우지 못하고 비율이 4:3이므로 접근 방식은 이 비율로 이미지를 제공하고 Android가 이미지를 자를 수 있도록 하는 것입니다. 그럼에도 불구하고 image 옵션은 계속 변경될 수 있습니다.

Android의 유일한 가이드라인은 450dp로 설정합니다.

이 가이드라인을 사용할 경우 너비가 1350픽셀 이상인 이미지가 적합합니다.

작업 (버튼)

알림과 함께 버튼을 표시하도록 actions를 정의할 수 있습니다.

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      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);

각 작업에 title, action (본질적으로 ID), icon, type 제목과 아이콘은 알림에 표시됩니다. ID는 PersistentVolumeClaim에 작업 버튼을 클릭했는지 확인합니다 (이에 대해서는 다음 섹션에서 자세히 설명함). 유형 'button'가 기본값이므로 생략할 수 있습니다.

작성 시점에는 Android용 Chrome과 Opera만 지원 작업이 가능합니다.

위의 예에는 4개의 액션이 정의되어 있으므로 한 것보다 더 많은 작업을 정의할 수 있습니다. 표시됩니다. 브라우저에서 표시할 작업 수를 확인하려면 window.Notification?.maxActions를 확인할 수 있습니다.

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

데스크톱에서는 작업 버튼 아이콘이 색상으로 표시됩니다 (분홍색 도넛 참고).

Android 6 이하에서는 시스템 색 구성표와 일치하도록 아이콘 색상이 지정됩니다.

Android 7 이상에서는 작업 아이콘이 전혀 표시되지 않습니다.

Chrome은 데스크톱에서의 동작을 Android와 일치하도록 변경할 것입니다 (즉, 적절한 색 구성표가 필요합니다. 그동안 아이콘을 #333333 색상으로 하여 Chrome의 텍스트 색상과 일치시킬 수 있습니다.

Android에서는 아이콘이 선명하게 보이지만 데스크톱에서는 선명하게 표시되지 않는다는 점을 언급하는 것도 좋습니다.

데스크톱 Chrome에서 작업할 수 있는 최적의 크기는 24px x 24px입니다. 슬프게도 제자리를 벗어났네요 .

이러한 차이점에서 참고할 수 있는 권장사항은 다음과 같습니다.

• 아이콘의 색 구성표를 일관성 있게 유지하여 적어도 모든 아이콘이 일관되게 유지되도록 합니다. 사용자에게 표시됩니다.
• 일부 플랫폼에서는 흑백으로 표시될 수 있으므로 흑백으로 작동하는지 확인하세요.
• 크기를 테스트하여 어느 것이 적합한지 확인하세요. 128px × 128px가 Android에서 잘 작동하지만 나쁨 화질을 개선하는 데 도움이 되셨기를 바랍니다.
• 작업 아이콘이 전혀 표시되지 않을 수도 있습니다.

알림 사양은 다양한 크기의 아이콘을 정의하는 방법을 모색하고 있지만, 합의에 앞서 시간이 걸릴 수 있습니다.

작업 (인라인 답장)

'text' 유형으로 작업을 정의하여 알림에 인라인 답장을 추가할 수 있습니다.

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Android에서 다음과 같이 표시됩니다.

작업 버튼을 클릭하면 텍스트 입력란이 열립니다.

텍스트 입력란의 자리표시자를 맞춤설정할 수 있습니다.

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Windows의 Chrome에서 작업을 클릭하지 않아도 텍스트 입력란이 항상 표시됨 버튼:

인라인 답장을 두 개 이상 추가하거나 버튼과 인라인 답장을 결합할 수 있습니다.

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);

방향

dir 매개변수를 사용하면 텍스트가 표시되는 방향을 정의할 수 있습니다. 오른쪽에서 왼쪽으로 또는 왼쪽에서 오른쪽으로

테스트 결과 방향은 주로 이 텍스트보다는 텍스트로 결정되는 것 같았습니다. 매개변수 값으로 사용됩니다. 사양에 따르면 이는 브라우저에 레이아웃 옵션을 제안하기 위한 것입니다. 차이가 없었습니다.

가능한지 정의하는 것이 가장 좋습니다. 그렇지 않으면 브라우저가 올바른 작업을 수행하도록 해야 합니다. 확인할 수 있습니다.

매개변수는 auto, ltr 또는 rtl로 설정해야 합니다.

Linux의 Chrome에서 사용되는 오른쪽에서 왼쪽으로 쓰는 언어는 다음과 같습니다.

Firefox에서 마우스를 가져가면 다음과 같은 내용이 표시됩니다.

진동

진동 옵션을 사용하면 알림이 있을 때 실행할 진동 패턴을 정의할 수 있습니다. 사용자의 현재 설정에서 진동을 허용한다고 가정합니다 (예: 기기가 진동을 무음 모드).

진동 옵션의 형식은 진동 옵션의 수를 나타내는 숫자 배열이어야 합니다. 밀리초 단위로 기기가 진동해야 하며 밀리초 단위로 표시됩니다. 진동하지 않습니다.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

이 문제는 진동을 지원하는 기기에만 영향을 미칩니다.

소리

알림음 매개변수를 사용하면 알림을 받을 때 재생할 소리를 정의할 수 있습니다.

이 문서를 작성하는 시점을 기준으로 이 옵션을 지원하는 브라우저는 없습니다.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

타임스탬프

Timestamp를 사용하면 푸시를 초래한 이벤트가 발생한 시간을 플랫폼에 알릴 수 있음 알림이 전송됩니다.

timestamp은 1970년 1월 1일 00:00:00 UTC 이후의 밀리초 단위여야 합니다. UNIX 에포크를 나타냅니다.

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

UX 권장사항

알림에서 본 가장 큰 UX 문제는 확인할 수 있습니다

푸시 메시지를 보낸 이유를 먼저 고려하고 알림 옵션은 사용자가 알림을 읽은 이유를 이해하는 데 도움이 됩니다.

솔직히 말해서 예시를 보고 '그런 실수는 하지 않을 것'이라고 생각하기 쉽습니다. 더 쉽고 함정에 빠질 수 있습니다.

피해야 할 일반적인 문제는 다음과 같습니다.

• 제목이나 본문에 웹사이트를 포함하지 마세요. 브라우저는 복사하지 않도록 합니다.
• 가능한 모든 정보를 활용합니다. 누군가가 '새 메시지'라는 제목을 사용하지 않고 사용자에게 메시지를 보낸 사용자 '여기를 클릭하여 읽어 보세요.' 'John이 방금 새 메시지를 보냈습니다'라는 제목 사용 알림 본문을 부분을 참조하세요.

브라우저 및 기능 감지

이 문서를 작성하는 시점에서 Chrome과 Firefox 사이에는 알림 기능 지원을 제공합니다.

다행히 window.Notification를 살펴보면 알림 기능 지원을 확인할 수 있습니다. 프로토타입을 제작합니다.

알림이 작업 버튼을 지원하는지 확인하려면 다음을 실행합니다.

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

이를 통해 사용자에게 표시되는 알림을 변경할 수 있습니다.

다른 옵션과 마찬가지로 위와 동일하게 'actions'를 원하는 값으로 바꿉니다. 매개변수 이름을 입력합니다.

다음에 수행할 작업

• 웹 푸시 알림 개요
• 푸시 작동 방식
• 사용자 구독
• 권한 UX
• 웹 푸시 라이브러리를 사용하여 메시지 보내기
• 웹 푸시 프로토콜
• 푸시 이벤트 처리
• 알림 표시
• 알림 동작
• 일반 알림 패턴
• 푸시 알림 FAQ
• 일반적인 문제 및 버그 신고

Codelab

• 푸시 알림 클라이언트 빌드
• 푸시 알림 서버 빌드