このページは Cloud Translation API によって翻訳されました。

ウェブプッシュライブラリでのメッセージの送信

Matt Gaunt

ウェブプッシュを使用する場合の課題の一つは、プッシュメッセージのトリガーが「巧妙な」と言えます。push メッセージをトリガーするには、アプリケーションで push への POST リクエストをウェブプッシュ後にサービスが提供されます。プロトコルをご覧ください。すべてのプロバイダで push を使用するには、 VAPID を使用する必要があるブラウザ（アプリケーションサーバーキーとも呼ばれる）。基本的には、値を証明する値を持つヘッダーを設定する必要があります。ユーザーにメッセージを送信できます。push メッセージでデータを送信するには、データを暗号化ありと特定のヘッダーブラウザがメッセージを正しく復号できるように、追加する必要があります。

push のトリガーに関する主な問題は、問題が発生した場合に診断が困難になることです。解決します。時間が経つにつれて、ブラウザがサポートされるようになると改善されますが、簡単ではありません。対象暗号化、フォーマット、および暗号化を処理するライブラリを push メッセージのトリガーです。

ライブラリの機能について詳しく知りたい場合は説明します。ここでは、サブスクリプションの管理と、既存のウェブプッシュライブラリを使用して push リクエストを行います。

このセクションでは、web-push ノードを使用して、ライブラリ。他の言語では違いがありますが、それほど類似していませんここでは Node を確認しています。これは JavaScript であり、最もアクセスしやすい設定になっています

手順は次のとおりです。

購読をバックエンドに送信して保存します。
保存済みのサブスクリプションを取得し、push メッセージをトリガーします。

定期購入を保存しています

データベースからの PushSubscription の保存とクエリは、サーバー側の言語とデータベースは異なりますが、具体的な例を見てみましょう。

デモのウェブページでは、シンプルな POST リクエストを行って PushSubscription をバックエンドに送信します。

function sendSubscriptionToBackEnd(subscription) {
  return fetch('/api/save-subscription/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(subscription),
  })
    .then(function (response) {
      if (!response.ok) {
        throw new Error('Bad status code from server.');
      }

      return response.json();
    })
    .then(function (responseData) {
      if (!(responseData.data && responseData.data.success)) {
        throw new Error('Bad response from server.');
      }
    });
}

このデモの Express サーバーには、 /api/save-subscription/ エンドポイント:

app.post('/api/save-subscription/', function (req, res) {

この方法では、リクエストに問題がなく、 garbage:

const isValidSaveRequest = (req, res) => {
  // Check the request body has at least an endpoint.
  if (!req.body || !req.body.endpoint) {
    // Not a valid subscription.
    res.status(400);
    res.setHeader('Content-Type', 'application/json');
    res.send(
      JSON.stringify({
        error: {
          id: 'no-endpoint',
          message: 'Subscription must have an endpoint.',
        },
      }),
    );
    return false;
  }
  return true;
};

購読が有効な場合は、それを保存し、適切な JSON レスポンス:

return saveSubscriptionToDatabase(req.body)
  .then(function (subscriptionId) {
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify({data: {success: true}}));
  })
  .catch(function (err) {
    res.status(500);
    res.setHeader('Content-Type', 'application/json');
    res.send(
      JSON.stringify({
        error: {
          id: 'unable-to-save-subscription',
          message:
            'The subscription was received but we were unable to save it to our database.',
        },
      }),
    );
  });

このデモでは、nedb を使用してサブスクリプションを保存します。シンプルなファイルベースのデータベースですが、任意のデータベースを使用できます。これは単に設定も不要です本番環境では、より信頼性の高いものを使用します。（古い MySQL を使い続けることです）。

function saveSubscriptionToDatabase(subscription) {
  return new Promise(function (resolve, reject) {
    db.insert(subscription, function (err, newDoc) {
      if (err) {
        reject(err);
        return;
      }

      resolve(newDoc._id);
    });
  });
}

push メッセージの送信

push メッセージの送信に関しては、最終的にユーザーにメッセージを送信します一般的な方法は、管理ページを作成し、 push メッセージを構成してトリガーします。しかし、ローカルまたは任意の環境で実行するためのプログラムを PushSubscription のリストにアクセスし、コードを実行して push メッセージをトリガーします。

このデモでは、push をトリガーできますこれは単なるデモなので公開ページです。

デモを実施するための各手順を説明します。赤ちゃんが生まれる手順を確認できるようにして、Node を初めて使用する人も含め、誰でも手順に沿って進めることができます。

ユーザーのサブスクライブについて説明しましたが、applicationServerKey を subscribe() オプション。この秘密鍵が必要になるのはバックエンドです。

デモでは、これらの値を同じように Node アプリに追加します（退屈なコードですが、魔法などはないことがわかります）。

const vapidKeys = {
  publicKey:
    'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
  privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
};

次に、Node サーバー用の web-push モジュールをインストールする必要があります。

npm install web-push --save

次に、Node スクリプトで web-push モジュールが必要になります。次のようになります。

const webpush = require('web-push');

これで、web-push モジュールの使用を開始できます。まず、web-push モジュールにアプリケーションサーバーのキーです。（VAPID 鍵とも呼ばれるあります）。

const vapidKeys = {
  publicKey:
    'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
  privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
};

webpush.setVapidDetails(
  'mailto:web-push-book@gauntface.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey,
);

また、「mailto:」も使用します。この文字列は、URL か mailto のいずれかにする必要があります入力します。この情報は、メッセージの一部としてウェブプッシュサービスに送信されます。 push をトリガーしますこの処理が行われるのは、ウェブプッシュサービスに送信者と連絡を取れるように、いくつかの情報があります。

これで、web-push モジュールを使用する準備が整いました。次のステップでは、push メッセージをトリガーします。

このデモでは、架空の管理パネルを使用してプッシュメッセージをトリガーします。

[Trigger Push Message] をクリックします。ボタンをクリックすると、/api/trigger-push-msg/ に対して POST リクエストが行われます。これはバックエンドが push メッセージを送信するためのシグナルで、を表現します。

app.post('/api/trigger-push-msg/', function (req, res) {

このリクエストが届くと、データベースから登録チャンネルが取得され、 push メッセージをトリガーします。

return getSubscriptionsFromDatabase().then(function (subscriptions) {
  let promiseChain = Promise.resolve();

  for (let i = 0; i < subscriptions.length; i++) {
    const subscription = subscriptions[i];
    promiseChain = promiseChain.then(() => {
      return triggerPushMsg(subscription, dataToSend);
    });
  }

  return promiseChain;
});

関数 triggerPushMsg() は、ウェブ push ライブラリを使用してメッセージを。

const triggerPushMsg = function (subscription, dataToSend) {
  return webpush.sendNotification(subscription, dataToSend).catch((err) => {
    if (err.statusCode === 404 || err.statusCode === 410) {
      console.log('Subscription has expired or is no longer valid: ', err);
      return deleteSubscriptionFromDatabase(subscription._id);
    } else {
      throw err;
    }
  });
};

webpush.sendNotification() を呼び出すと、Promise が返されます。もしメッセージは正常に送信されました。Promise は解決され、何もする必要はありません。Promise が拒否された場合は、 PushSubscription がまだ維持されているかどうかを通知します。あります。

push サービスからのエラーのタイプを判断するには、ステータスコードを調べることをおすすめします。エラー push サービスによってメッセージに違いがあり、中には他よりも有用なものもあります。

この例では、ステータスコード 404 と 410 をチェックします。これらは、 '見つかりませんでした'表示されます。いずれかの通知を受け取った場合、サブスクリプションの有効期限が切れています無効になっている可能性があります。このような場合は、データベースから定期購入を削除する必要があります。

その他のエラーが発生した場合は、単に throw err を実行します。これにより、Promise が返されます。 triggerPushMsg() を拒否。

その他のステータスコードについては、次のセクションでウェブプッシュについて説明します。詳しく説明します。

サブスクリプションをループした後で、JSON レスポンスを返す必要があります。

.then(() => {
res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify({ data: { success: true } }));
})
.catch(function(err) {
res.status(500);
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({
    error: {
    id: 'unable-to-send-messages',
    message: `We were unable to send messages to all subscriptions : ` +
        `'${err.message}'`
    }
}));
});

主要な実装手順を見てきました。

ウェブページからバックエンドに購読を送信する API を作成するデータベースに保存できるようにすることです。
push メッセージ（この場合は、 API が架空の管理パネルから呼び出されます）。
バックエンドからすべてのサブスクリプションを取得する各サブスクリプションに web-push ライブラリ。

バックエンド（Node、PHP、Python など）に関係なく、push を実装する手順は変わらないでしょう。

次は、これらのウェブプッシュライブラリが実際に何をしているのでしょうか。

ウェブプッシュ ライブラリでのメッセージの送信

定期購入を保存しています

push メッセージの送信

次のステップ

Codelab

ウェブプッシュライブラリでのメッセージの送信