Event Notifications 사용하여 푸시 알림을 만들어 Chrome 웹으로 보내기

Event Notifications 서비스를 작성하고 Chrome 푸시 알림에 푸시 대상을 추가하고 Chrome 웹 디바이스로 메시지를 전송하십시오.

Event Notifications의 개념

{{{site.data.keyword.en_short}} IBM Cloud 계정에서 발생하는 중요한 이벤트에 대해 알려주거나 웹훅을 사용하여 자동화된 작업을 트리거하는 이벤트 알림 라우팅 서비스입니다. IBM Cloud 서비스에서 Availability Monitoring 같은 이벤트 알림을 이메일, SMS, 푸시 알림 및 웹훅으로 필터링하고 라우팅할 수 있습니다.

클라이언트는 Chrome 웹 푸시 알림을 어떻게 사용하나요?

다음 다이어그램은 클라이언트가 Chrome 웹 푸시 알림을 사용하는 방법을 보여줍니다.

{: caption="사용하는 방법고객이 푸시 알림을 사용하는 방법고객이 푸시 알림을 사용하는 " caption-side="bottom"}

목표

이 학습서는 다음과 같이 푸시 알림을 보내는 방법에 대해 설명합니다.

Event Notifications을(를) 사용하여 웹 사이트를 작성하십시오.
Chrome 웹 신임 정보를 가져옵니다.
SDK를 다운로드하고 알림 설정을 완료합니다.
브라우저에 Chrome 웹 푸시 알림을 구성하고 전송합니다.

시작하기 전에

다음과 같은 전제조건이 준비되어 있어야 합니다.

코드 편집기를 다운로드하여 설치하면 HTML, CSS, js를 사용하여 웹사이트 코드를 수정할 수 있습니다.
발신인 ID와 서버 API 키를 가져오기 위해 Firebase 콘솔에 로그인하는 Google 계정.
IBM Cloud 계정 없는 경우, IBM Cloud 계정을 작성하십시오.

Event Notifications 서비스 인스턴스 작성

IBM Cloud 계정에 로그인하십시오.
IBM Cloud 카탈로그에서' Event Notifications > Event Notifications'을 검색합니다.
지원되는 지역 목록에서 Region을(를) 선택하고 pricing plan을(를) 선택하십시오.
Service name을(를) 제공하십시오.
resource group을(를) 선택하십시오.
선택란을 클릭하여 라이센스 계약 및 조항에 동의하십시오.
Create을(를) 클릭하십시오.

FCM 신임 정보 가져오기

FCM(Firebase Cloud Messaging)은 Chrome 웹 디바이스에 푸시 알림을 전달하는 게이트웨이입니다. 콘솔에서 Chrome 웹 푸시 대상을 설정하려면, FCM 신임 정보(서버 키)를 가져와야 합니다. 서버 키는 안전하게 저장되며 Event Notifications 서비스에서 FCM 서버에 연결할 때 사용됩니다.

Firebase 콘솔로 이동하십시오. Google 사용자 계정이 필요합니다.
Create a project을(를) 클릭하십시오. 프로젝트가 이미 있는 경우 Add Project을(를) 클릭하십시오.
Create a project window에 프로젝트 이름을 입력하고, 이용 약관에 동의한 후 토글 스위치를 선택하여 Google 애널리틱스(선택사항)를 사용 또는 사용 안함으로 설정하고 Continue을(를) 클릭하십시오.
Google 애널리틱스를 사용하는 경우에는 Configure Google Analytics 창에서 Analytics location을(를) 선택하고 이용 약관에 동의하십시오.
Create Project을(를) 클릭하십시오.
새 프로젝트가 준비되면 Continue을(를) 클릭하십시오.
탐색 패널에서 Project Overview 옆에 있는 settings 아이콘을 선택하고 Settings > Project settings을(를) 선택하십시오.
Cloud Messaging 탭을 클릭하여 프로젝트 신임 정보를 보십시오. Server Key.

일반 API 소스 추가

다음 단계를 수행하십시오.

Event Notifications 대시보드의 Sources 섹션으로 이동하십시오.
Add을(를) 클릭하고 API 소스를 선택하십시오.
이름 및 선택적 설명을 입력하고 Add을(를) 클릭하십시오.

Event Notifications 대상 작성

Event Notifications 콘솔에서 Destinations을(를) 클릭하고 다음 대상 세부사항을 추가하십시오.

Name: 대상의 이름을 추가합니다.
Description: 대상에 대한 선택적 설명을 추가합니다.
Type: 드롭다운 목록에서 ' Chrome Push Notifications 유형을 선택합니다.
대상 계획 (사전 프로덕션 대상 또는 프로덕션 대상) 을 선택하십시오.
- Pre-production destination-개발 및 테스트 환경에 대해 이 대상을 저비용 푸시 대상으로 선택하십시오.
- Production destination-이 대상의 전체 기능을 사용합니다. 무제한 디바이스 및 아웃바운드 메시지가 허용됩니다.
웹사이트 URL을 추가하여 허용 목록에 추가합니다.
Get FCM credentials 섹션에서 가져온 Server Key을(를) 추가하십시오.
추가 를 클릭하십시오.
Chrome 대상이 작성되면 작성된 대상을 편집하여 웹 SDK에 필요한 공용 vapId 키를 가져오십시오.

Destination Edit — Receive notifications

Event Notifications 주제 작성

Event Notifications 콘솔에서 Topics을(를) 선택하고 Create을(를) 클릭하십시오. 다음 주제 세부사항을 입력하십시오.

Name: 주제의 이름을 입력하십시오.
Description: 주제에 대한 선택적 설명을 추가하십시오.
Source: 드롭 다운 목록에서 소스를 선택하십시오.
Event type: 드롭 다운 목록에서 이벤트 유형을 선택하십시오.
Event sub type 이벤트 하위 유형 드롭 다운 목록에서 이벤트 하위 유형을 선택합니다.
Severity: 심각도 드롭 다운 목록에서 심각도를 선택하십시오.
Advanced conditions: 사용자 정의 조건을 작성합니다. jsonpath 스펙을 준수해야 합니다.

Event Notifications 구독 작성

Event Notifications 콘솔에서 Subscriptions을(를) 클릭하십시오. 다음 구독 세부사항 입력:

Click을 클릭하여 구독 마법사를 표시하십시오.
다음 구독 세부사항 완료:
- Subscription name: 구독의 이름입니다.
- Subscription description: 선택적 설명을 추가합니다.
Subscribe to a topic 섹션 아래의 드롭 다운 목록에서 주제를 선택하고, 대상 드롭 다운 목록에서 대상을 선택하십시오.
Destination type: Destination 아래에서 유형을 선택하고 Add을(를) 클릭하십시오.

Event Notifications Chrome 웹 SDK 설정

Chrome 웹 SDK를 사용하면 Chrome 웹 사이트에서 푸시 알림을 받을 수 있습니다. 다음 단계를 완료하여 Event Notifications Chrome 웹 SDK를 설치하고, SDK를 초기화하고, 웹 사이트에 대한 알림을 등록하십시오.

프로젝트에 SDK를 포함하려면 프로젝트 루트 폴더에 ' ENPushSDK.js,ENPushServiceWorker.js' , ' manifest_Website.json ' 파일을 추가합니다.
manifest_Website.json 파일을 편집하십시오.
```
{
   "name": "YOUR_WEBSITE_NAME"
}
```
manifest_Website.json 파일 이름을 manifest.json으로 변경하십시오.

HTML 파일의 ' manifest.json ' 태그에 ' <head> '를 포함하세요.

<link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">

스크립트에 IBM Cloud 웹 푸시 SDK를 포함하세요.

<script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>

다음 단계를 완료하여 웹사이트가 SDK를 초기화할 수 있도록 합니다.

var enPush = new ENPush()

function callback(response) {
   alert(response.response)
}

var initParams = {
   "instanceGUID": "<instance_guid>",
   "apikey": "<instance_apikey>",
   "region": "<region>",
   "deviceId": "<YOUR_DEVICE_ID>",
   "chromeDestinationId": "<chrome_destination_id>",
   "chromeApplicationServerKey": "<Chrome_VapId_public_key>"
}

enPush.initialize(initParams, callback)

region: Event Notifications 인스턴스의 지역입니다. 예를 들어, us-south,eu-gb, au-syd, eu-de 또는 eu-es 입니다.
deviceId: 디바이스 등록의 경우 선택사항 deviceId 입니다.

알림을 등록하려면 register() 또는 registerWithUserId() API를 사용하여 Event Notifications 서비스로 디바이스를 등록하십시오. 다음 옵션 중에서 선택하십시오.
- UserId없이 등록:
```
enPush.register(function(response) {
   alert(response.response)
})
```
- ' userId'로 등록합니다. ' userId ' 기반 알림의 경우, 등록 메서드는 ' userId' 매개변수를 하나 더 허용합니다.
```
bmsPush.registerWithUserId("UserId",function(response) {
   alert(response.response)
})
```
  UserId은(는) 푸시 서비스 인스턴스에 디바이스를 등록할 사용자 ID 값입니다.
subscribe API는 태그에 대한 디바이스를 등록합니다. 디바이스가 특정 태그를 구독하고 나면, 디바이스는 해당 태그에 대해 전송되는 알림을 수신할 수 있습니다. 다음 코드 스니펫을 웹 애플리케이션에 추가하여 태그 목록에 등록하십시오.
```
enPush.subscribe(tagName, function(response) {
   alert(response.response)
})
```
설치가 완료되면 애플리케이션을 실행하고 푸시 알림을 등록하십시오.

Chrome 웹 디바이스에 알림 보내기

알림 송신 API를 사용하여 Chrome 웹 디바이스에 대한 푸시 알림을 전송하십시오. API를 직접 호출하는 대신 Node 또는 Go 관리 SDK를 사용할 수 있습니다.

MacOS의 Chrome 웹 사이트에서 알림을 받았습니다.

받기