ReactJS 애플리케이션에 밀어넣기 알림 추가 방법

알림을 푸시하는 것은 사용자를 끌어들이고 붙잡는 데 유용한 도구이다.이 강좌에서, 우리는 ReactJS 응용 프로그램에서 전송 알림을 사용할 수 있도록 원시그널과 무료로 통합하는 방법을 보여 드리겠습니다.

OneSignal & 브라우저의 푸시 API

브라우저의 푸시 API는 웹 응용 프로그램이 프론트 데스크톱에 있든 현재 사용자 에이전트에 불러오든 서버에서 메시지를 받을 수 있도록 합니다.이렇게 하면 가입을 선택한 사용자에게 비동기적인 알림과 업데이트를 제공하여 새로운 내용에 더욱 신속하게 참여할 수 있습니다.
이 자습서는 일반적인 설정 프로세스를 사용하여 OneSignal 푸시 알림을 응용 프로그램에 통합하는 방법에 대해 설명합니다.이 설명서의 첫 번째 부분에서는 OneSignal 설정 프로세스에 대해 설명합니다.이 설명서의 두 번째 부분에서는 기본 설정 방법을 사용하여 ReactJS와 통합하는 방법에 대해 설명합니다.세 번째 부분에서는 기본 설정을 완성한 후에 실현할 수 있는 고급 설정 방법을 소개했다.고급 설정은 당신의 사이트나 응용 프로그램에 더 많은 메시지 맞춤형 설정과 자동화 기회를 해제할 것입니다.

설명서 개요

Part 1: Set Up Your OneSignal Account

Web Configuration

Part 2: Quick Push Notification Setup In ReactJS

Allow Web Push Notifications

Send Web Push Notifications

Part 3: Advanced Push Notification Setup In ReactJS

이 자습서에는 React의 기본 지식이 필요합니다.나는 Create React App를 사용하여 나의 프로젝트와 NodeJS 버전 14.16을 생성하고 있다.
추가 설정 리소스:

Quick React Setup

Advanced React Setup

React 애플리케이션 작성

터미널 내부에서 다음 명령을 실행하여 create React Apps를 사용하여 새로운 React 프로젝트를 만듭니다.

npx create-react-app react-onesignal
cd react-onesignal
npm start

Create React 애플리케이션에 대한 공식 문서를 보려면 here를 클릭합니다.

섹션 1: OneSignal 계정 설정

먼저 login OneSignal 계정 또는 create a free account에 액세스하십시오.그리고 '새 프로그램/사이트' 라는 파란색 단추를 누르면 OneSignal 계정을 응용 프로그램이나 사이트에 맞게 설정합니다.

응용 프로그램이나 사이트의 이름을 삽입합니다.플랫폼으로 네트워크 Push를 선택합니다.

"다음: 플랫폼 구성"이라는 파란색 버튼을 클릭합니다.

네트워크 구성

통합 선택에서 일반 사이트 옵션을 선택합니다.
"사이트 설정"부분에서 선택한 사이트 설정을 입력하십시오.내 예에서 구성은 다음과 같습니다.

테스트 목적으로 로컬 호스트 URLhttp://localhost:3000을 입력하고 있습니다.만약 당신도 이렇게 한다면, 로컬 테스트 옵션을 눌렀는지 확인하십시오.이렇게 하면 HTTP localhost가 HTTPS로 간주되어 테스트됩니다.
권한 프롬프트 설정에서 화면 맨 오른쪽에 있는 작업 제목 아래에 세 개의 수직 파란색 점이 표시됩니다.파란색 점을 클릭하고 드롭다운 메뉴에서 편집을 선택합니다.

구성push notification Slide Prompt이 표시된 창이 열립니다.자동 프롬프트가 활성화되었는지 확인합니다(오른쪽으로 전환).
"표시 시간"에서 두 번째 증량을 변경하여 사용자가 페이지에 접근한 후 슬라이드 알림의 지연 시간을 변경할 수 있습니다.메시지를 더 빨리 표시할 수 있도록 원상태로 유지할 수도 있고, 초를 줄일 수도 있습니다.선택한 지연 증가 값을 입력한 후 창 오른쪽 아래에 있는 회색 완료 버튼을 클릭합니다.

[완료]를 클릭한 후 페이지 아래쪽으로 스크롤한 다음 [저장]을 클릭하여 자동 프롬프트 선택을 저장합니다.
SDK 파일을 다운로드하는 중요한 단계가 있는 다른 페이지로 리디렉션됩니다.를 클릭하여 나중에 읽어들일 수 있도록 ONESIGNAL SDK 파일을 다운로드하고 컴퓨터에 저장합니다.

"사이트에 코드 추가"부분에서 코드 세션을 복사할 수 있는 회색 단추를 볼 수 있습니다.회색 복사 코드 버튼을 클릭합니다.

섹션 2: ReactJS의 퀵 푸시 알림 설정

ReactJS 프로젝트 폴더에서 공용 폴더로 이동하여 색인을 엽니다.html 파일.head HTML 태그 내에서 OneSignal 페이지에서 복사한 코드를 붙여 넣습니다.
컴퓨터에서 다운로드한 SDK 파일을 찾아서 ReactJS 프로그램의 src 폴더에 삽입합니다.

웹 푸시 알림 허용

ReactJS 애플리케이션을 실행하고 웹 사이트를 방문하십시오.선택한 지연 시간 간격을 설정하면 다음 프롬프트가 표시됩니다.

파란색 허용 버튼을 클릭하여 브라우저에서 밀어넣기 알림을 활성화합니다.

네트워크 푸시 알림 보내기

당신의 첫 번째 추신 통지를 보낼 때가 되었습니다!이 작업을 수행하려면 OneSignal 계정에 로그인하고 Dashboard 탭으로 이동합니다.계기판의 "새로 만들기"단추를 누르십시오.

새 창으로 리디렉션됩니다. 이 창은 알림을 사용자 정의로 전송할 수 있습니다.시청자에서 가입자에게 보내기를 선택했는지 확인합니다.그런 다음 메시지 제목, 컨텐트 및 이미지를 추가하여 메시지를 생성합니다.구독자가 받을 첫 번째 알림이기 때문에 간단한 환영 메시지를 작성하여 구독을 확인하고 알림이 제공할 가치를 높일 수 있습니다.
Delivery Schedule 섹션에서 현재 웹 푸시 구독자에게 전송할 모든 사람에게 즉시 전송하고 동시에 전송할 것을 선택합니다.만약 OneSignal 계정 설정을 막 끝냈다면, 첫 번째이자 유일한 구독자일 가능성이 높습니다.만약 응용 프로그램이나 사이트의 데이터가 매우 많고 다른 사용자가 전송 알림을 받기로 선택했다면, 특정한 세분 시장으로 보내는 것을 선택하여 특정한 시청자들에게 메시지를 테스트해야 할 수도 있다.메시지를 보낼 준비가 되었을 때, 화면 밑에 있는 파란색 댓글과 보내기 단추를 눌러라.

정보를 볼 수 있는 작은 팝업 창이 나타납니다.만족하면 파란색 메시지 보내기 버튼을 클릭합니다.너는 반드시 너의 설비에서 네트워크 전송 통지를 받을 것이다.🚀

섹션 3: ReactJS의 고급 푸시 알림 설정

전체 ReactJS 응용 프로그램에서 OneSignal을 사용하려면 빠른 푸시 알림 설정을 완성한 후 고급 푸시 알림 설정 절차를 완료하십시오.
너의 색인 안에 있다.html 파일, 다음 코드 삭제:

<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
  OneSignal.init({
    appId: "YOUR-APP-ID",
  });
});
</script>

CDN 링크가 유지되는지 확인합니다.
응용 프로그램에서js 파일에서 다음 코드 행을 입력합니다.

window.OneSignal = window.OneSignal || [];
const OneSignal = window.OneSignal;

위의 코드는 window 대상이 OneSignal 속성을 알게 할 것이다.이것은 OneSignal SDK를 웹 응용 프로그램에 불러온 후에 이 SDK의 속성에 접근할 수 있도록 합니다.
같은 파일에 useEffect를 만들 것입니다.이 갈고리는 원시그널을 터치하는 데 필요한 초기화 코드를 가지고 있을 것이다.의존항수 그룹 [] 을 useEffect 갈고리에 추가하는 것을 기억하십시오.원시그널의 init() 방법은 한 번만 호출할 수 있으며, 의존항수 그룹은 여러 번 터치하는 init() 방법을 피하고useEffect를 터치하는 데 도움을 줄 것입니다.

useEffect(() => {
 OneSignal.push(() => {
   OneSignal.init({
     appId: "YOUR-APP-ID"
   })
 });
},[]);

현재 OneSignal 변수를 다른 구성 요소에 전달함으로써, ReactJS 프로그램에서 OneSignal SDK의 다양한 기능을 사용할 수 있도록 코드를 계속 확장할 수 있습니다.custom code setup ReactJS 프로그램 내부에서 알림부호의 설정을 수정할 수 있으며, OneSignal 대시보드를 사용할 필요가 없습니다.Web Push SDK에 대한 자세한 내용은 Web PushSDK documentation를 참조하십시오.