onemedics-push-web-test v0.0.64

OneMedics Push Web SDK

목차

• 요약
• 기능
• 설치
• 사용
• 참조

1. 요약

이 프로젝트는 웹에서 푸시 기능을 간편하게 만들수 있도록 SDK를 제공하는데 그 목적이 있습니다.

• 예제 바로가기

2. 기능

• 알림 메시지 구독하기

• 푸시서버 인증 토큰 설정하기

• FCM 토큰 등록하기

• 권한수정하기

• 로그아웃시 푸시 토큰 초기화

• 알람 메시지 이력 확인하기

3. 설치

$ npm install onemedics-push-web

모듈을 설치하면 두개의 파일이 [프로젝트/public] 폴더에 추가됩니다.

• pushWebConfig.json
• firebase-messaging-sw.js

3-1. 기본 설정 파일

pushWebConfig.json

기본 firebase 및 푸시서버에 연결하기 위한 config 내용이 담긴 파일입니다. firebaseConfig에 대한 자세한 사항은 firebase js 세팅 를 통해 확인하시면 됩니다.

{
  "firebaseConfig": {
    "apiKey": "api-key",
    "authDomain": "project-id.firebaseapp.com",
    "databaseURL": "https://project-id.firebaseio.com",
    "projectId": "project-id",
    "storageBucket": "project-id.appspot.com",
    "messagingSenderId": "sender-id",
    "appId": "app-id",
    "measurementId": "G-measurement-id"
  },
  "coreModuleConfig": {
    "url": "push-url",
    "clientId": "client-id"
  }
}

firebase-messaging-sw.js

화면이 비활성화된 상태에서 알림을 받기위해 선언합니다. onBackgroundMessage 내부 함수를 변경하여 알림수정이 가능합니다.

...
messaging.onBackgroundMessage((payload) => {
  /**
   * 해당 위치에서 알림 내용을 수정 가능합니다.
   */
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: 'icon 경로',
  };

  self.registration.showNotification(notificationTitle??'알림',
    notificationOptions);
});
...

index.tsx

모듈은 firebase에 대한 초기 설정을 해야합니다.

import { PushWebModule } from 'onemedics-push-web';

PushWebModule.getInstance();

## 4. 사용

### 4-1. 모듈 사용

### 4-1-1. 로그인 후 토큰 및 리스너 등록
> 모듈은 로그인 후 다음 순서를 통해 선언되어야 합니다.
```typescript
import { PushWebModule } from 'onemedics-push-web';

//1. 푸시서버 엑세스 토큰 세팅
PushWebModule.getInstance().setAccessToken('ACCESS_TOKEN');
//2. FCM 토큰 발급 및 서버에 토큰 등록하기
PushWebModule.getInstance().registerPushToken()
  .then(pushToken=>{
    /* fcmtoken */
  });
//3. 알림 메시지 구독하기
PushWebModule.getInstance().onMessage((payload)=>{
  /**
   * 해당 위치에서 알림 내용을 수정 가능합니다.
   */
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icon-dosoo.png'
  };
});

4-1-2. 권한 수정하기

사용자가 권한 수정시 해당 호출을 통하여 서버에 저장된 사용유무를 변경합니다.

import { PushWebModule } from 'onemedics-push-web';

PushWebModule.getInstance().modifyPermission(boolean) .then(booleanResult=>{ / success or fail / });

### 4-1-3. 로그아웃시 푸시 토큰 초기화
> 로그아웃시 해당 호출을 통하여 웹에 저장된 토큰을 제거합니다.
```typescript
import { PushWebModule } from 'onemedics-push-web';

PushWebModule.getInstance().resetPushToken();

4-1-4. 알림 메시지 이력 확인하기

사용자가 자신에게 왔던 알림 이력을 확인합니다.

추가 예정입니다.

5. 참조

참고(https://firebase.google.com/docs/web/setup?hl=ko)

참고(https://firebase.google.com/docs/cloud-messaging/js/receive?hl=ko)

참고(https://graphql.org/learn/)

참고(https://www.apollographql.com/docs/)

⬆ 위로가기