サーチ…


GCM(Google Cloud Messaging System)を使用してウェブ通知を送信する

このような例では、 PWA (プログレッシブWebアプリケーション)間の広範な普及を知っています。この例では、 NodeJSES6を使用して簡単なバックエンド通知を送信します

  1. インストールノード-GCMモ​​ジュール: npm install node-gcm

  2. Socket.ioをインストールします。npm npm install socket.io

  3. Googleコンソールを使用してGCM対応アプリケーションを作成します

  4. GCMアプリケーションIDに格付けする(後で必要になります)

  5. あなたの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:Socket.ioをExpressで動作させるために特別なハックを使用しています。これは単にボックス外で動作しないためです。

今すぐ.jsonファイルを作成し、名前をManifest.jsonとし 、ファイルを開き、

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

それを閉じて、アプリケーションのROOTディレクトリに保存します。

PS:Manifest.jsonファイルはルートディレクトリにある必要があります。そうしないと動作しません。

上のコードでは、私は次のことをしています:

  1. 私はセットアップし、socket.ioも使用する通常のindex.htmlページを送った。
  2. フロントエンド 、つまりindex.htmlの フロントエンドから呼び出された接続イベントをリッスンしています (新しいクライアントが定義済みのリンクに正常に接続されると解消されます)
  3. 私は特別なトークンがsocket.io new_userイベントを経由して私のindex.htmlからの登録トークンとしてのを知って、そのようなトークンは、当社のユーザーのユニークなパスコードされ送ることだし、各コードは、Web通知APIについてサポートしているブラウザから通常生成される(続きを読みますここに。
  4. 私は単純にnode-gcmモジュールを使って通知を送信します。通知は後で処理され、 サービスワーカーを使って表示されます。

これはNodeJSの観点からのものです。他の例では、プッシュメッセージにカスタムデータ、アイコンなどを送信する方法を示します。

PS:あなたはここでフルデモを見つけることができます



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow