얼마 전, 율토리 마을이 안전한 마을로 거듭났다. ( SSL 적용 포스트 보러가기 )
사실 SSL 적용은 이 작업을 해보고 싶어서였던 것.
★ 반드시, Https 프로토콜을 사용하여야만 구현이 가능하다. ★
FCM을 이용하여 웹 브라우저로 Push Message 발송하기 !!
드디어!!! App 이 아니어도 Web 브라우저로도 Push 를 받을 수 있구나!
기대감에 촌장은 무척이나 신이 났었다.
하.지.만 !!
iphone 으로 테스트를 하던 중 알게 된 사실.
apple 계열은 FCM 으로 보내는 Push Message 를 못 받는다는 것. ㅠ_ㅠ
( Push 만 필요한 경우라면, App 에서 탈출할 수 있을 줄 알았다. feat. 좌절한 율 촌장 )
그래도... 기왕 했으니까 일지는 써야지.... 써야지.... 써야지......... 또르르....T_T.....
의욕 저하로
FCM 에 프로젝트를 만들고 하는 사전 작업 설명들은 Firebase Document 링크로 끝내겠다....
https://firebase.google.com/docs/web/setup#add-sdks-initialize
자바스크립트 프로젝트에 Firebase 추가 | Firebase
이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한 클라이언트(예: Node.js 데스크톱 또는 IoT 애플리케이션에서)로 Firebase 자바스크립트 SDK를 사용하는 방법을 설명합니다. 권한이 있는 환경(예: 서버)에서 관리 액세스를 설정하려면 대신 Firebase Admin SDK를 설정합니다. 시작하기 전에 원하는 편집자 또는 IDE를 설치합니다. 자바스크립트 프로젝트(웹 또는 Node.js)를 엽니다. Google 계정을 사용하여 Fir
firebase.google.com
Web Push 는 브라우저에 service worker 를 이용하여 수신이 되는데,
App 개발 과정과 동일하다.
JS 로 브라우저의 token 을 발급받고, 서버 단에서 message 를 전송하면 끝.
Test 구현을 위해서는 총 3가지 코드 파일이 필요한데
Client :
1. firebase-massaging-sw.js ( Firebase 메시징 서비스 워커 정의 파일 )
2. index.html
Server :
1. Send_Push.php ( message 를 전송하기 위해 FCM 과 통신하는 파일. )
1. [ Client ] firebase-messaging-sw.js 예제 코드
importScripts('https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.1/firebase-messaging.js');
// Initialize Firebase
var config = {
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"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload){
const title = "Hello World";
const options = {
body: payload.data.status
};
return self.registration.showNotification(title,options);
});
2. [ Client ] index.html 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>FCM 메세지</h1>
<script src="./assets/scripts/jquery-3.4.1.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
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"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
//token 값 알아내기
messaging.requestPermission()
.then(function(permission){
console.log(permission + " : Have permission");
return messaging.getToken();
})
.then(function(token){
console.log('token : ' + token);
$('#_token').html(token);
})
.catch(function(arr){
console.log("Error Occured");
console.log(arr);
});
</script>
<span id='_token'></span>
</body>
</html>
3. [ Server ] Send_Push.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Send_push extends MY_Controller {
public function __construct ()
{
parent::__construct();
}
public function index()
{
$tokens = 'index.html 에서 얻은 Token 값';
$url = 'https://fcm.googleapis.com/fcm/send';
$fields = array(
'to' => $tokens,
'notification' => array(
'title' => 'Web PUSH Test - Title',
'body' => 'Web Push Message',
'click_action' => 'https://yultory.com/'
)
);
$fcm_sever_key = '내 FCM 서버 Key';
$headers = array(
'Authorization:key =' . $fcm_sever_key,
'Content-Type: application/json'
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
$result = curl_exec($ch);
if ($result === FALSE) {
die('Curl Failed: ' . curl_error($ch));
}
curl_close($ch);
}
}
실제 서비스를 위해서는,
예외처리 등을 포함하여 Web APP이 포어그라운드 일때, 백그라운드 일때 등등
Document 를 보면서 추가 세부 구현들이 필요하겠지만.
촌장은 Web 브라우저에서 Push 를 받을 수 있는지 테스트가 목적이었기 때문에
일단 Send 까지 구현하고 Test 해보았다.
율 촌장의 폰은 안드로이드 여서 마구마구 텐션이 Up 됐으나,
IOS 에서 테스트 하는 순간 ! 모든 의욕 저하.
더 많은 걸 해볼 생각이었으나 촌장의 FCM Web Push 구현은 여기까지....
더 자세한 내용은 FCM Document 를 참조하길 바란다.. ( feat. 그냥 쉬고싶은 율 촌장 )
https://firebase.google.com/docs/cloud-messaging/js/receive?hl=ko
자바스크립트 클라이언트에서 메시지 수신 | Firebase
메시지의 동작은 페이지가 포커스를 갖는 포그라운드 상태인지, 백그라운드 상태인지, 다른 탭 뒤에 숨겨져 있는지, 완전히 닫혀 있는지에 따라 다릅니다. 어떠한 경우든 페이지는 onMessage 콜백을 처리해야 합니다. 하지만 백그라운드 상태인 경우에는 setBackgroundMessageHandler를 처리하거나 사용자가 웹 앱을 포그라운드로 전환할 수 있도록 화면 알림을 구성해야 할 수도 있습니다. 앱 상태 알림 데이터 모두 포그라운드 onMessage
firebase.google.com