利用 Firebase Javascript PHP 做訊息推播

利用 Firebase Javascript PHP 做訊息推播

以下為簡單 Code
測試環境為 Apache with Let's Encrypt SSL 網站，不確定沒 SSL 能不能運作

*. 還在研究怎麼對離線 Device 補傳訊息(應該有這個方法)

---

首先到 Firebase 網站 https://console.firebase.google.com/ 新增專案
專案名稱自取，建立好之後點選【專案設定】

中下方點擊: 【將 Firebase 加入您的網路應用程式】

將這串 Code 複製起來等下貼到 HTML 檔案中

再到 Clould Messaging 頁籤
複製伺服器金鑰 (Server Key / Authorization key) 及 寄件者ID (messagingSenderId)




上述準備完成後開始網頁與程式部份，以下共有四個檔案，放在相同路徑中
紅字部份按照 Firebase 提供的資訊填入

瀏覽 HTML (必須為實際運作之 Web Server)
按下【Request Permission】按鈕，在按【允許】顯示通知權限
下方會出現 Device Token
將該 Device Token 複製起來放到 PHP 檔的 Device Token 陣列變數中
執行該 PHP，即可在剛剛瀏覽的 HTML 畫面中出現訊息

manifest.json 檔 (Hard Code 不可變更其中數字，此非 Project Sender ID):

---

{
  "gcm_sender_id": "103953800507"
}

---

firebase-messaging-sw.js 檔:

---

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

var config = {
    messagingSenderId: "000000000000"
};

firebase.initializeApp(config);
messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    console.log('Received background message ', payload);

});

console.log("Loaded SW..");

---

HTML 檔:

---

  <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js"></script>
<script>
   var messaging = null;

        $(document).ready(function () {

// Firebase 專案設定開始
var config = {
apiKey: "AIooooooooooooooooooooooooooooooooooooo",
authDomain: "FirebaseProjectName.firebaseapp.com",
databaseURL: "https://FirebaseProjectName.firebaseio.com",
projectId: "FirebaseProjectName",
storageBucket: "FirebaseProjectName.appspot.com",
messagingSenderId: "000000000000"
};
firebase.initializeApp(config);
// Firebase 專案設定開始

// 指定 firebase-messaging-sw.js 的路徑與本　html 檔相同
navigator.serviceWorker.register('firebase-messaging-sw.js')
.then((registration) => {
messaging.useServiceWorker(registration);
});
// 指定 firebase-messaging-sw.js 的路徑與本　html 檔相同

// 啟動　Firebase Messaging
            messaging = firebase.messaging();
// 啟動　Firebase Messaging

// 收到訊息時的處理
            messaging.onMessage(function (payload) {
                $('#MessageZone').append("Message received :" + JSON.stringify(payload) + "<br><br>")
// 視窗提示訊息
                if (Notification.permission === 'granted') {
notifyMe(JSON.stringify(payload));
                };
// 視窗提示訊息
            });
// 收到訊息時的處理

// 離開網頁 (關閉視窗) 時的反應
window.onbeforeunload = function() {
return "Did you save your stuff?";
};
// 離開網頁 (關閉視窗) 時的反應

// 刪除　Device Token 的動作
$("#deleteToken").click(function() {
messaging.getToken().then(function(currentToken) {
messaging.deleteToken(currentToken).then(function() {
console.log('Token deleted.');
}).catch(function(err) {
console.log('Unable to delete token. ', err);
});
}).catch(function(err) {
console.log('Error retrieving Instance ID token. ', err);
});
});
// 刪除　Device Token 的動作

// 要求　Device Token 的動作
$("#requestPermission").click(function() {
messaging.requestPermission().then(function() {
console.log('Notification permission granted.');

// 將要到的　Device Token 顯示在　Token Div 中
messaging.getToken().then(function (currentToken) {
if (currentToken) {
$("#Token").html("<br/>Device Token:<br/><br/>"+currentToken);
} else {
$('#Token').html('Get Token Failed');
};
}).catch(function(err) {
$('#Token').html('Unable to get permission to send message 1');
});
// 將要到的　Device Token 顯示在　Token Div 中
}).catch(function(err) {
$('#Token').html('Unable to get permission to send message 2');
});

});
// 要求　Device Token 的動作

        });

// 視窗提示訊息
function notifyMe(MessageContent) {
if (!("Notification" in window)) {
console.log("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
var notification = new Notification(MessageContent);
setTimeout(notification.close.bind(notification), 2000);
} else if (Notification.permission !== 'denied' || Notification.permission === "default") {
Notification.requestPermission(function (permission) {
if (permission === "granted") {
var notification = new Notification(MessageContent);
setTimeout(notification.close.bind(notification), 2000);
};
});
};
};
// 視窗提示訊息

</script>

<button id="requestPermission">Request Permission</button>

<button id="deleteToken">deleteToken</button>

<div id="Token" style="max-width:300px;word-break: break-all;"></div>
<br><hr><br>
<div id="MessageZone"></div>

---

推播 PHP 檔:

---

<?php

define( 'API_ACCESS_KEY', "AAAAoooooooooooo...... Server Key" );

$registrationIds = array("Device Token 1", "Device Token 2");

$Title = array("Title 1", "Title 2");
$Body = array("Body 1", "Body 2");

$MSG = array
(
    'Title'     => $Title,
    'Body'      => $Body,
    'vibrate'   => 1,
    'sound'     => 1,
);
$Fields = array
(
    'registration_ids'  => $registrationIds,
    'data'      => $MSG,
    'priority'          => 10, // iOS 不加會收不到推播, Android 可不加
);

$Headers = array
(
    'Authorization: key=' . API_ACCESS_KEY,
    'Content-Type: application/json'
);

$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send' );
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $Headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $Fields ) );
$result = curl_exec($ch );
curl_close( $ch );
echo $result;

?>

---