반응 앱에서 firebase 알림을 캡처하는 방법은 무엇입니까?

Question

반응 앱에서 브라우저가 아닌 알림을 받으려면 어떻게해야합니까? 중포 기지 메시징-sw.js의

firebase-messaging-sw.js 

코드 : 레이아웃에

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js'); 
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js'); 
var config = { 
    apiKey: "myapikey", 
    authDomain: "thank-you-posta.firebaseapp.com", 
    databaseURL: "https://thank-you-posta.firebaseio.com", 
    projectId: "thank-you-posta", 
    storageBucket: "thank-you-posta.appspot.com", 
    messagingSenderId: "403125505139" 
}; 
firebase.initializeApp(config); 
const messaging = firebase.messaging(); 
self.addEventListener('notificationclick', function(event) { 
    console.log('[Service Worker] Notification click Received.'); 
    event.notification.close(); 
    event.waitUntil(
    clients.openWindow('http://localhost:7000/#/messages/') 
); 
}); 

코드 :

var config = { 
     apiKey: "myapikey", 
     authDomain: "thank-you-posta.firebaseapp.com", 
     databaseURL: "https://thank-you-posta.firebaseio.com", 
     projectId: "thank-you-posta", 
     storageBucket: "thank-you-posta.appspot.com", 
     messagingSenderId: "403125505139" 
    }; 
    firebase.initializeApp(config); 
    const messaging = firebase.messaging(); 

    messaging.requestPermission() 
    .then(function() { 
     console.log('Notification permission granted.'); 
     messaging.getToken() 
     .then(function(currentToken) { 
      if (currentToken) { 
       console.log(currentToken); 
       _this.setState({ 
        pushToken: currentToken 
       }); 

      } else { 
       // Show permission request. 
       console.log('No Instance ID token available. Request permission to generate one.'); 
       // Show permission UI. 
      } 
     }) 
     .catch(function(err) { 
      console.log('An error occurred while retrieving token. ', err); 
     }); 
    }) 
    .catch(function(err) { 
     console.log('Unable to get permission to notify.', err); 
    }); 

    messaging.onMessage(function(payload) { 
     console.log("Message received. ", payload); 
     // ... 
    }); 

순간

난에 알림을받을

제 문제는 레이아웃의 모든 알림과 함께 드롭 다운을 만들기위한 알림을 받고 싶다는 것입니다. Thx 전체.

Answer 1

앱에 이러한 알림을 표시하려면 앱에 알림 구성 요소를 만들어야합니다. 가장 간단한 방법은 토스터와 같은 것을 사용하는 것입니다. https://github.com/tomchentw/react-toastr

기본적으로 루트 구성 요소에 토스터 조각을 추가 한 다음 토스터에 피드를 제공합니다. 자신의 코드에서 서비스 직원에게 보내는 알림을 저장하는 위치는 분명하지만 토스트로 리디렉션되는 곳이면 어디에서나 명확합니다. 당신이 중포 기지 콘솔에서 새 메시지를 작성하는 경우 당신이 .onMessage

messaging.onMessage(function(payload) { 
     console.log("Message received. ", payload); 
     // the container bit below is from the toast demo in the link above 
     container.success(payload, { 
      closeButton: true, 
     }) 
    }); 

토스터를 지정할 때 다음 잠시 후 사라 화면 상단에 기본적으로 토스트 단지 사업부 그들을 리다이렉트. 자신 만의 솔루션을 구축 할 수 있습니다. 토스터 및 기타 프로젝트는이 목적으로 사용됩니다.

모든 알림이 포함 된 맞춤 드롭 다운 구성 요소를 만들고 싶다면 다른 구성 요소처럼 맞춤 설정해야합니다. 구성 요소가 설치되면 위의 .onMessage 스 니펫 안에있는 firebase/firestore 데이터베이스에 메시지를 저장 한 다음 새 알림 구성 요소에서 메시지를 검색하십시오.