使用 GCM 傳送 Web 通知（Google Cloud Messaging System）

這樣的例子知道 PWA （漸進式 Web 應用程式） 之間的廣泛傳播，在這個例子中，我們將使用 NodeJS 和 ES6 傳送一個簡單的後端，如通知 ****

1. 安裝 Node-GCM 模組：npm install node-gcm

2. 安裝 Socket.io：npm install socket.io

3. 使用 Google 控制檯建立啟用 GCM 的應用程式。

4. Grabe 你的 GCM 應用程式 ID（稍後我們將需要它）

5. Grabe 你的 GCM 應用密碼。

6. 開啟你最喜歡的程式碼編輯器並新增以下程式碼：

    'use strict';
   
    const express = require('express');
    const app = express();
    const gcm = require('node-gcm');
    app.io = require('socket.io')();
   
    // [*] Configuring our GCM Channel.
    const sender = new gcm.Sender('Project Secret');
    const regTokens = [];
    let message = new gcm.Message({
        data: {
            key1: 'msg1'
        }
    });
   
    // [*] Configuring our static files.
    app.use(express.static('public/'));
   
    // [*] Configuring Routes.
    app.get('/', (req, res) => {
        res.sendFile(__dirname + '/public/index.html');
    });
   
    // [*] Configuring our Socket Connection.
    app.io.on('connection', socket => {
        console.log('we have a new connection ...');
        socket.on('new_user', (reg_id) => {
            // [*] Adding our user notification registration token to our list typically hided in a secret place.
            if (regTokens.indexOf(reg_id) === -1) {
                regTokens.push(reg_id);
   
                // [*] Sending our push messages
                sender.send(message, {
                    registrationTokens: regTokens
                }, (err, response) => {
                    if (err) console.error('err', err);
                    else console.log(response);
                });
            }
        })
    });
   
    module.exports = app
   

PS：我在這裡使用一個特殊的 hack 來使 Socket.io 與 Express 一起工作，因為它只是在盒子外面不起作用。

現在建立一個 .json 檔案並將其命名為： Manifest.json ，開啟它並超過以下內容：

{
    "name": "Application Name",
    "gcm_sender_id": "GCM Project ID"
}

關閉它並儲存在你的應用程式 ROOT 目錄中。

PS：Manifest.json 檔案需要在根目錄中，否則無效。

在上面的程式碼中，我正在做以下事情：

1. 我釋出了一個普通的 index.html 頁面，它也將使用 socket.io。
2. 我正在偵聽從前端（ 也就是我的 index.html 頁面） 觸發的連線事件 （一旦新客戶端成功連線到我們的預定義連結，它就會被觸發） **** ****
3. 我通過 socket.io new_user 事件從我的 index.html 傳送一個特殊令牌知道作為註冊令牌，這樣的令牌將是我們使用者唯一的密碼，每個程式碼通常來自 Web 通知 API 的支援瀏覽器 （閱讀更多這裡。 **** ****
4. 我只是使用 node-gcm 模組傳送我的通知，這些通知將在稍後使用 Service Workers` 進行處理和顯示。

這是從 NodeJS 的角度來看的。在其他示例中，我將展示如何在推送訊息中傳送自定義資料，圖示..etc。

PS：你可以在這裡找到完整的工作演示。