Chrome WebPush - node.js (客製化訊息 - 需加密)

Web Push

之前介紹的Google Chrome Web Push (客製化訊息 - 需加密)是使用Java來傳送加密的客製化訊息，其中有提到Google有提供了一個node.js版本的webpush程式，其中已經把加密的方法封裝好了，可以很容易地幫助我們傳送客製化的Web Push訊息。

在使用之前記得把node.js安裝好，可以去node.js官網下載適合版本安裝。

Google製作的webPush project的github連結在這，web-push，
要安裝只要下以下指令即可：

npm install web-push --save

即著在同一個資料夾建立一個webPushTest.js來測試，其中內容如下，需要說明的部份已寫在註解中：

webPushTest.js：

const webpush = require('web-push');  //引入web-push模組

webpush.setGCMAPIKey('XXXXXXXXXXXX');  //打入FireBase Server Key或Google API Key

// This is the same output of calling JSON.stringify on a PushSubscription
const pushSubscription = {
  endpoint: 'XXXXXX',  //webpush註冊後得到的endpoint，前面會跟據Webpush Server而不同，
                       //例如Google可能是https://updates.push.services.mozilla.com/wpush/v1/，
                       //FireFox可能是https://updates.push.services.mozilla.com/wpush/v1/
  keys: {
    auth: 'XXXXX',  //加密金鑰的其中一個，auth
    p256dh: 'XXXXX'  //加密金鑰的其中一個，p256dh
  }
};

webpush.sendNotification(pushSubscription, '{"myText": "Hugo Test", "myIcon": "https://www.vermontteddybear.com/media/wysiwyg/VTB-CMS-Content/featuredcat-KBKF36004-20170119.jpg"}');

Google Chrome Web Push (客製化訊息 - 需加密)

Google Chrome Web Push是Google的一項服務，可以讓管理者向User主動推播訊息，
跟之前介紹的對Android GCM推播很像(如何向GCM Server傳送資料、如何接收GCM Server發送的Registration ID訊息，以php、Java及JSP為例，以php、Java及JSP為例)，事實上Google Chrome Web Push目前也是利用GCM服務來實現的。

Google Chrome Web Push可以寫死彈跳訊息的code在client端(註冊時會記錄)，也可以動態訊息給client，不過因為安全的問題，必須使用Google規定的方式來加密訊息。

在這邊就來一步步展示如何做一個簡單的Google Chrome Web Push實現：

如何接收GCM Server發送的Registration ID訊息，以php、Java及JSP為例

在行動裝置安裝了有GCM功能的App之後，會根據App的功能進行Registration ID的註冊，接著將會將Registration ID傳送到後台，後台收到Registration ID後就可以對之做相應的處理，例如此篇文章就採取將Registration ID存進資料庫的處理。

以下後台的範例程式有兩個版本，一個為php、另一為Java，共同的環境為:

1.資料庫此例為MySql，假設相關資訊為
   Host : localhost
   User : userName
   Password :  pass
   Database :  DB_Name
   Table      :   TB_Name
   Table只有一個欄位，名為regId，存放著Registration ID

2.行動裝置使用了POST傳送方式，資料內容沒有使用JSON等格式，為最普通的名值對，如以下所示

regId=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
一、首先是php版本

<?php
    //建立跟資料庫的連接
    $dbhost = 'localhost';
    $dbuser = 'userName';
    $dbpass = 'pass';
    $dbname = 'DB_Name';
    $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error with MySQL connection');
    mysql_query("SET NAMES 'utf8'");
    mysql_select_db($dbname);
   //從行動裝置的傳來訊息中，獲取Registration ID
    if(isset($_POST['regId']))
    {
        $regId = $_POST['regId'];
        $sql = "INSERT INTO TB_Name(regId) VALUES ('$regId')";    新增資料進資料庫中
        mysql_query($sql) or die('MySQL query error');
    }
?>

二、JAVA版本(使用Apache的HttpClient)

如何向GCM Server傳送資料，以php、Java及JSP為例

向Google申請GCM成功，得到API Key、行動裝置也成功向GCM Server註冊得到Registration ID後，就可以開始由後台向GCM Server發送訊息，GCM成功拿到訊息之後，就會開始向對應Registration ID的行動裝置轉送訊息，當然，GCM Server並不會儲存Registration ID，Registration ID要由後台連同訊息一起傳給GCM Server才行。

以下的程式碼之先行作業為:
1.已向Google申請並得到API Key，假設為apiKey

2.行動裝置已經向GCM Server註冊得到了Registration ID，並已經將Registration ID傳給後台並存進資料庫中

3.資料庫此例為MySql，假設相關資訊為
   Host : localhost
   User : userName
   Password :  pass
   Database :  DB_Name
   Table      :   TB_Name
   Table只有一個欄位，名為regId，存放著Registration ID

一、先從php開始