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

Matt Gaunt

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

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

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

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

注: 別の言語のライブラリが必要な場合は、GitHub の web-push-libs 組織をご確認ください。

手順は次のとおりです。

1. 購読をバックエンドに送信して保存します。
2. 保存済みのサブスクリプションを取得し、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;
};

注: このルートでは、エンドポイントのみを確認します。ペイロードのサポートが必要な場合は、auth キーと p256dh キーも必ず確認してください。

購読が有効な場合は、それを保存し、適切な 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:[e-mail]',
  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() を拒否。

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

注: この段階で問題が発生した場合は、Chrome の前に Firefox のエラーログを確認することをおすすめします。Mozilla プッシュ サービスには、Chrome / FCM よりもはるかに有用なエラー メッセージが表示されます。

サブスクリプションをループした後で、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}'`
    }
}));
});

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

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

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

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

次のステップ

• ウェブのプッシュ通知の概要
• Push の仕組み
• ユーザーを登録する
• 権限の UX
• ウェブプッシュ ライブラリによるメッセージの送信
• ウェブプッシュ プロトコル
• push イベントの処理
• 通知を表示する
• 通知の動作
• 一般的な通知パターン
• プッシュ通知に関するよくある質問
• 一般的な問題とバグの報告

Codelab

• プッシュ通知クライアントをビルドする
• プッシュ通知サーバーを構築する