사전작업
※ 이하 웹앱(PWA)은 사전작업을 통해 생성한 프로젝트를 지칭합니다.
Firebase SDK 설정
메시징 서비스를 사용하기 위하여 Firebase SDK를 웹앱(PWA)에 추가합니다.
여러 가지 방법이 있지만 Firebase 호스팅 사용 포스팅에서 생성한 프로젝트를 바탕으로 한다면, <head></head> 태그 사이에 아래 내용(인증, 데이터베이스, 메시징, 스토리지 서비스 사용을 위한 SDK 설정)이 이미 삽입되어 있습니다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script src="/__/firebase/7.16.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script src="/__/firebase/7.16.0/firebase-auth.js"></script>
<script src="/__/firebase/7.16.0/firebase-database.js"></script>
<script src="/__/firebase/7.16.0/firebase-messaging.js"></script>
<script src="/__/firebase/7.16.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script src="/__/firebase/init.js"></script>
... 중략 ...
</head> ▲ index.html
※ 버전(7.16.0)을 의미하는 숫자는 프로젝트 생성 시의 최신 버전 값으로 진행 시점에 따라 차이가 있습니다.
firebase-messaging-sw.js 생성
기본적으로 메시징 서비스가 동작하려면 firebase-messaging-sw.js 파일이 필요합니다. 프로젝트에 firebase-messaging-sw.js 라는 이름으로 빈 파일을 만들어 도메인의 루트에 저장합니다.
내용은 다음과 같이 작성합니다. 메세징객체(firebase.messaging())를 초기화합니다.
importScripts("/__/firebase/7.16.0/firebase-app.js");
importScripts("/__/firebase/7.16.0/firebase-messaging.js");
importScripts("/__/firebase/init.js");
const messaging = firebase.messaging();▲ firebase-messaging-sw.js
앱에서 웹 사용자 인증 정보 구성 - 옵션
우리가 이용할 푸시 서비스인 FCM(Firebase Cloud Messaging)에서 (APN 등) 다른 푸시 서비스로 메시지 요청을 보낼 때 usePublicVapidKey 메서드를 통해 VAPID 키 사용자 인증 정보를 사용할 수 있습니다. FCM에서 웹 사용자 인증 정보 구성의 안내에 따라 생성하거나 가져온 키를 사용하여 메시지 객체를 획득 후 코드에 추가할 수 있습니다.
프로젝트의 index.html의 <body> 태그 내부에 있는 document.addEventListener('DOMContentLoaded', function () {부분을 찾아 다음과 같이 수정합니다.
<body>
... 중략 ...
<script>
document.addEventListener('DOMContentLoaded', function () {
// Firebase Messaging 객체 획득
const messaging = firebase.messaging();
// Add the public key generated from the console here.
messaging.usePublicVapidKey("BBO_8w ... Mlfrw8eo");
... 중략 ...
</script>
</body>▲ index.html
BBO_8w ... Mlfrw8eo 항목은 자신의 프로젝트의 인증값으로 교체합니다.
FCM 등록 토큰(FCM registration token) 관리
푸시 서비스에서 개별 장치로 푸시 메시지를 전송하려면 FCM 등록 토큰이 필요합니다. FCM 등록 토큰에는 메시지를 수신할 기기의 식별자 정보가 담겨 있으며, 푸시 서비스는 이를 바탕으로 메시지를 전송합니다.
FCM 등록 토큰 획득
웹앱(PWA)을 실행하고 있는 또는 웹에 접속한 기기의 토큰을 획득하려면 getToken()을 호출해야 합니다. 토큰을 획득하기 위해 index.html에서 getToken() 메서드를 호출합니다.
<body>
... 중략 ...
<script>
document.addEventListener('DOMContentLoaded', function () {
... 중략 ...
messaging.getToken().then((currentToken) => {
if (currentToken) {
// 토큰 반환
console.log(`Token get. ${currentToken}`);
} else {
// 알림 권한 요청
console.log('No Instance ID token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
</script>
</body> ▲ index.html
외부에서 발송한 푸시 메시지가 기기에 표시되려면 사용자가 브라우저에 알림을 수신할 수 있는 권한이 필요합니다. 따라서 getToken() 메서드는 토큰을 획득하기 전에 브라우저에 알림 권한이 부여되었는지 확인합니다.
알림 권한이 없다면 사용자에게 알림 권한을 요청합니다. 이미 권한이 부여된 경우 토큰을 반환하고, 사용자가 권한 부여를 거부하였을 경우와 같이 오류가 있으면 프라미스를 거부합니다.
토큰 갱신 모니터링
토큰은 여러 가지 이유로 갱신될 수 있습니다. 토큰이 새로 생성될 때마다 onTokenRefresh 콜백이 실행됩니다. 이 콜백의 콘텍스트에서 다시 getToken()을 호출하면 갱신된 토큰을 획득할 수 있습니다.
// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
messaging.getToken().then((refreshedToken) => {
console.log('Token refreshed.');
}).catch((err) => {
console.log('Unable to retrieve refreshed token ', err);
});
});▲ index.html
테스트 알림 메시지 보내기
getToken와 onTokenRefresh를 호출한 것뿐이지만 기본적으로 앞서 만들었던 firebase-messaging-sw.js에는 푸시메시지를 수신할 수 있는 기본적인 로직이 삽입되어 있기 때문에 이미 백그라운드 상태에서는 알림 메시지를 수신할 수 있습니다.
PC
-
firebase serve로 웹앱(PWA)을 실행합니다. 웹브라우저로127.0.0.1:5000에 접속합니다. -
앞서 추가한
getToken()메서드가 실행되어 권한 요청 팝업이 발생하면 허용을 누릅니다.
- F12 버튼을 이용하여 개발도구를 통해 획득한 토큰을 복사합니다.
-
웹브라우저를 닫아 앱을 백그라운드 상태로 만듭니다.
-
파이어베이스 알림 작성기를 열고 [새 알림]을 선택합니다.
-
알림의 제목과 텍스트를 입력합니다. [테스트 메시지 전송]을 선택합니다.
- [FCM 등록 토큰에 추가] 필드에 앞서 복사해 놓은 토큰(
etJTY...y61u6)을 입력한 후 [+]를 선택하여 추가합니다. [테스트]를 클릭합니다.
- 타겟팅된 클라이언트 기기(백그라운드 상태의 앱)의 브라우저에 알림이 수신됩니다.
스마트폰
알림 메시지를 사용하는 주요 용도는 폰에서 메시지를 수신하는 것이므로 스마트폰에서 메시지의 수신 동작도 확인합니다. firebase deploy --only hosting명령을 사용해 현재까지 만든 웹앱(PWA)을 호스팅 서비스에 배포하도록 합니다.
sergio@Sergio:~/PWA$ firebase deploy --only hosting
=== Deploying to 'fcm-push-pwa'...
i deploying hosting
i hosting[fcm-push-pwa]: beginning deploy...
i hosting[fcm-push-pwa]: found 3 files in public
✔ hosting[fcm-push-pwa]: file upload complete
i hosting[fcm-push-pwa]: finalizing version...
✔ hosting[fcm-push-pwa]: version finalized
i hosting[fcm-push-pwa]: releasing new version...
✔ hosting[fcm-push-pwa]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/fcm-push-pwa/overview
Hosting URL: https://fcm-push-pwa.web.app스마트 폰에서는 PC와 같이 개발자 도구를 사용해 console.log 의 출력으로 토큰을 획득할 수 없기 때문에 프로젝트에 등록된 모든 기기에 메시지를 보내도록 합니다. (물론, 토큰을 확보할 다른 방법도 얼마든지 있습니다만, 확인 및 설정은 간단한 것이 좋습니다.)
-
웹브라우저로 웹앱(PWA)을 배포한 주소(
https://fcm-push-pwa.web.app)로 접속합니다. -
권한 요청 팝업이 발생하면 허용을 누릅니다.
-
파이어베이스 알림 작성기를 열고 [새 알림]을 선택합니다.
-
알림의 제목과 텍스트를 입력한 후, [테스트 메시지 전송]가 아닌 하단의 [다음]을 선택합니다.
-
[▼]를 선택하여 파이어베이스 프로젝트(
fcm-push-pwa)를 선택한 후, [다음]을 선택합니다.
- [검토]를 선택한 후, 팝업 된 메시지 검토 창에서 [게시]를 눌러 메시지를 전송합니다.
- 타겟팅된 클라이언트 기기(백그라운드 상태의 앱)의 브라우저에 알림이 수신됩니다.
요약
-
Firebase SDK를 사용해 웹앱(PWA)에서 간단히 푸시 메시지를 수신하도록 설정하였습니다.
-
Firebase에서 제공해주는 메시지 전송 도구를 사용해 설정한 푸시 메시지 수신 기능을 확인하였습니다.
참고
'모듈, 프레임웍 > Firebase' 카테고리의 다른 글
| Firebase JavaScript SDK 7.18.0 - Cloud Messaging (0) | 2020.08.17 |
|---|---|
| Firebase Cloud Messaging - 푸시 메시지 유형 및 수신 (0) | 2020.08.11 |
| Firebase 호스팅 사용하기 - Custom Domain 연결 (0) | 2020.07.21 |
| 파이어베이스(Firebase) 앱 등록 (=키 발급) (0) | 2020.07.02 |
| Firebase 호스팅 사용하기 (0) | 2020.07.02 |
