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

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

Event Notifications의 개념

Event Notifications IBM Cloud 계정에서 발생하는 중요한 이벤트를 알려주거나 웹훅을 통해 자동화된 작업을 실행하는 이벤트 알림 라우팅 서비스입니다. Availability Monitoring 와 같은 IBM Cloud 서비스에서 전송되는 이벤트 알림을 필터링하고, 이메일, SMS, 푸시 알림, 웹훅 등으로 전달할 수 있습니다.

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

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

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

목표

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

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

시작하기 전에

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

HTML, CSS, 자바스크립트( JavaScript )를 사용하여 웹사이트 코드를 작성하려면 코드 편집기를 다운로드하여 설치하세요.
발신인 ID와 서버 API 키를 가져오기 위해 Firebase 콘솔에 로그인하는 Google 계정.
IBM Cloud 계정 없는 경우, IBM Cloud 계정을 작성하십시오.

Event Notifications 서비스 인스턴스 작성

IBM Cloud 계정에 로그인하십시오.
IBM Cloud 카탈로그 에서 ‘ Event Notifications > Event Notifications ’를 검색해 보세요.
지원되는 지역 목록에서 지역을 선택하고 요금제를 선택하세요.
서비스 이름을 제공하십시오.
리소스 그룹을 선택하십시오.
선택란을 클릭하여 라이센스 계약 및 조항에 동의하십시오.
작성을 클릭하십시오.

FCM 신임 정보 가져오기

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

Firebase 콘솔로 이동하십시오. Google 사용자 계정이 필요합니다.
프로젝트 작성을 클릭하십시오. 이미 프로젝트가 있다면 ‘프로젝트 추가’를 클릭하세요.
‘프로젝트 만들기’ 창에서 프로젝트 이름을 입력하고, 이용 약관에 동의한 후, 토글 스위치를 선택하여 ‘ Google ’ 분석 기능을 활성화하거나 비활성화한 다음(선택 사항), ‘계속’을 클릭합니다.
Google Analytics를 사용하는 경우 Google Analytics 구성 창에서 분석 위치를 선택하고 약관에 동의하십시오.
프로젝트 작성을 클릭하십시오.
새 프로젝트가 준비되면 계속을 클릭하십시오.
탐색 패널에서 ‘프로젝트 개요 ’ 옆에 있는 설정 아이콘을 선택한 다음, ‘설정’ > ‘프로젝트 설정’을 선택합니다.
‘클라우드 메시징 ’ 탭을 클릭하여 프로젝트 인증 정보( 서버 키 )를 확인하세요.

일반 API 소스 추가

일반 API 소스를 생성하려면:

Event Notifications 인스턴스에서 [ 소스 ]를 클릭합니다.
‘생성’을 클릭한 다음, ‘소스 생성’ 대화 상자에서 API 소스를 선택합니다.
이름과 (선택 사항인) 설명을 입력한 다음 ‘소스 생성’을 클릭하세요.

Event Notifications 대상 작성

Event Notifications 인스턴스에서 [ Destinations ]를 클릭한 다음 [ Create ]를 클릭합니다.

‘목적지 생성’ 대화 상자에 다음 목적지 세부 정보를 입력하십시오.

이름: 대상의 이름을 입력하세요.
설명: 대상에 대한 선택적 설명을 추가합니다.
유형: 드롭다운 목록에서 Chrome 푸시 알림 유형을 선택합니다.
대상 계획 (사전 프로덕션 대상 또는 프로덕션 대상) 을 선택하십시오.
- 사전 프로덕션 대상- 개발 및 테스트 환경을 위한 저비용 푸시 대상으로 이 대상을 선택합니다.
- 프로덕션 대상- 이 대상의 모든 기능을 사용합니다. 기기 수와 발신 메시지 수에 제한이 없습니다.
웹사이트 URL 을 허용 목록에 추가하세요.
FCM 자격 증명 가져오기 섹션에서 받은 서버 키를 추가합니다.
'대상 만들기 '를 클릭합니다.
Chrome 목적지가 생성되면 목적지를 편집하여 웹 SDK에 필요한 공개 vapID 키를 받습니다.

Event Notifications 주제 작성

Event Notifications 인스턴스에서 [ 주제 ]를 클릭한 다음 [ 만들기 ]를 클릭합니다. 주제 상세 정보 및 이벤트 필터 단계에서 다음 주제 및 필터 세부 정보를 입력하십시오:

이름: 주제의 이름을 입력하세요.
설명: 주제에 대한 선택적 설명을 추가합니다.
출처: 드롭다운 목록에서 출처를 선택하십시오.
이벤트 유형: 드롭다운 목록에서 이벤트 유형을 선택하십시오.
이벤트 하위 유형: 이벤트 하위 유형 드롭다운 목록에서 이벤트 하위 유형을 선택하십시오.
중요도: 중요도 드롭다운 목록에서 중요도를 선택하십시오.
고급 조건: 사용자 지정 조건을 직접 작성하며, 이 조건은 jsonpath 사양을 따라야 합니다. Jsonpath 표현식의 유효성을 검사할 수 있습니다 jsonpath.com 또는 extendsclass.com.

Event Notifications 구독 작성

'구독 ' 단계로 진행하세요. ‘만들기’를 클릭한 다음, ‘구독 만들기’ 대화 상자에 다음 구독 세부 정보를 입력합니다.

구독 이름: 구독 이름을 입력하세요.
목적지 유형: 목적지 유형을 선택하십시오.
목적지: 목적지를 선택하세요.

구독 작성을 클릭하십시오.

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 을 포함시키세요.

<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` 기반 알림의 경우, register 메서드는 `userId` 라는 매개변수를 하나 더 받습니다.

```js
   enPush.registerWithUserId("UserId",function(response) {
      alert(response.response)
   })
   ```

   `UserId`은(는) 푸시 서비스 인스턴스에 디바이스를 등록할 사용자 ID 값입니다.

subscribe API는 태그에 대한 디바이스를 등록합니다. 디바이스가 특정 태그를 구독하고 나면, 디바이스는 해당 태그에 대해 전송되는 알림을 수신할 수 있습니다. 다음 코드 스니펫을 웹 애플리케이션에 추가하여 태그 목록에 등록하십시오.
```
enPush.subscribe(tagName, function(response) {
   alert(response.response)
})
```
설치가 완료되면 애플리케이션을 실행하고 푸시 알림을 등록하십시오.

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

알림 송신 API를 사용하여 Chrome 웹 디바이스에 대한 푸시 알림을 전송하십시오. 를 사용할 수 있습니다 Node, 이동 Python 또는 Java 관리자 SDK를 사용할 수 있습니다.

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

받기