ウェブプッシュを使用する場合の課題の一つは、プッシュ メッセージのトリガーが 「巧妙な」と言えます。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 メッセージをトリガーします。
このデモでは、架空の管理パネルを使用してプッシュ メッセージをトリガーします。
![管理ページのスクリーンショット。](https://web.dev/static/articles/sending-messages-with-web-push-libraries/image/screenshot-the-admin-pag-7bb2e26069ffc.png?authuser=9&hl=ja)
[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 の仕組み
- ユーザーを登録する
- 権限の UX
- ウェブプッシュ ライブラリによるメッセージの送信
- ウェブプッシュ プロトコル
- push イベントの処理
- 通知を表示する
- 通知の動作
- 一般的な通知パターン
- プッシュ通知に関するよくある質問
- 一般的な問題とバグの報告