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

Codelab: プッシュ通知クライアントを作成する

Kate Jeffreys

Kayce Basques

この Codelab では、プッシュ通知クライアントをビルドする方法を順を追って説明します。この Codelab を終了すると、次のクライアントが作成されます。

ユーザーをプッシュ通知に登録します。
プッシュメッセージを受信し、通知として表示します。
プッシュ通知からユーザーの登録を解除します。

この Codelab は、実践による学習を支援することに重点を置いていますが、コンセプトについてよく話します。チェックアウトプッシュ通知はどのように機能しますか？プッシュ通知の概念を学びましょう。

この Codelab のサーバーコードはすでに完成しています。データはこの Codelab ではクライアントの実装方法を学びます。新しい P-MAX キャンペーンをプッシュ通知サーバーについては、Codelab: プッシュ通知を作成するできます。

push-notifications-client-codelab-complete を確認してください。（出典）でコード全体を確認してください。

ブラウザの互換性

この Codelab は、次のオペレーティングシステムとブラウザの組み合わせで動作することが確認されています。

Windows: Chrome、Edge
macOS: Chrome、Firefox
Android: Chrome、Firefox

この Codelab は、次のオペレーティングシステムでは動作しないことが確認されています。（またはオペレーティングシステムとブラウザの組み合わせ）:

macOS: Brave、Edge、Safari
iOS

セットアップ

コードの編集可能なコピーを取得する

手順の右側に表示されるコードエディタの名前を Glitch UI を見ていきましょう。

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。

で確認できます。

認証を設定する

プッシュ通知を機能させるには、次のセットアップが必要です認証キーを使用してサーバーとクライアントを保護します。ウェブの push プロトコルリクエストに署名するをご覧ください。をご覧ください。

Glitch UI で [Tools] をクリックし、次に [Terminal] をクリックして、Glitch Terminal を開きます。
Glitch ターミナルで npx web-push generate-vapid-keys を実行します。秘密鍵をコピーするあります。
Glitch UI で .env を開き、VAPID_PUBLIC_KEY と VAPID_PRIVATE_KEY を更新します。セット VAPID_SUBJECT から mailto:test@test.test に変更。これらの値はすべて二重引用符で囲みます。更新すると、.env ファイルは次のようになります。次のようになります。

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Glitch ターミナルを閉じます。

で確認できます。

環境変数の値（.env にあるもの）は、1 つの Glitch プロジェクトに固有のものです。プロジェクトをリミックスする場合、.env の値はコピーされません。

public/index.js を開きます。
VAPID_PUBLIC_KEY_VALUE_HERE は、公開鍵の値に置き換えます。

Service Worker を登録する

クライアントが最終的に、受信と表示のために Service Worker が必要になります。通知を受け取れます。Service Worker はできるだけ早く登録することをおすすめします。 push されたメッセージを通知をご覧ください。

// TODO add startup logic here コメントを次のコードに置き換えます。

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。

で確認できます。

Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[Console]（コンソール）タブをクリックします。次のメッセージが表示されます。 Service worker was registered. がコンソールにログインしました。

で確認できます。

プッシュ通知権限をリクエストする

ページの読み込み時にプッシュ通知を送信する権限をリクエストしないでください。その代わりに UI で、プッシュ通知を受信するかどうかをユーザーに尋ねる必要があります。（ボタンのクリックなどによって）明示的に確認できたら、次のことができます。ブラウザからプッシュ通知の許可を得るための正式なプロセスを開始します。

Glitch UI で [View Source] をクリックしてコードに戻ります。
public/index.js の // TODO コメントを置き換えます subscribeButtonHandler() は、次のコードで置き換えます。

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

アプリのタブに戻り、[Subscribe to push] をクリックします。ブラウザまたはオペレーティングシステムから、ウェブサイトにアクセスを許可するかどうかを尋ねるメッセージが表示されます。プッシュ通知が送信されます。[Allow]（または同等のフレーズ）をクリックします。記録します。コンソールに、次の内容に関するメッセージが表示されます。リクエストが承認されたか拒否されたかを示します。

で確認できます。

プッシュ通知に登録する

サブスクリプションプロセスには、Google Compute Engine で制御される プッシュサービスと呼ばれる、ブラウザベンダーから提供されます。完了したら、サーバーに送信するために必要なプッシュ通知の登録情報サーバーで長期間データベースに保存することもできますクライアントをプッシュ通知に登録するをご覧ください。をご覧ください。

以下のハイライト表示されたコードを subscribeButtonHandler() に追加します。

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

userVisibleOnly オプションは true にする必要があります。いつかは変わるかもしれませんユーザーに表示される通知を表示せずにメッセージをプッシュ（サイレントプッシュ）ですが、現在のところブラウザではその機能を使用できません。プライバシーが懸念されるからです。

applicationServerKey 値は、次の処理を実行するユーティリティ関数に依存します。 base64 文字列を Uint8Array に変換します。この値は必要があります。

プッシュ通知の登録を解除

ユーザーがプッシュ通知に登録したら、UI で以下を行う必要があります。ユーザーが気が変わった場合に配信停止の手続きを行えるようにするプッシュ通知の受信を希望されなくなりました。

unsubscribeButtonHandler() の // TODO コメントを置き換えるこれを次のコードに置き換えます。

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

プッシュメッセージを受信して通知として表示する

前述したように、Cloud Storage バケットをクライアントに push されたメッセージの受信と表示取得します。push されたメッセージを通知をご覧ください。

public/service-worker.js を開いて // TODO コメントと置き換えますを、Service Worker の push イベントハンドラ内で、次のコードに置き換えます。

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

アプリのタブに戻ります。
[通知を受け取る] をクリックします。プッシュ通知が届きます。
他のブラウザ（またはサブスクリプションワークフローを実行し、 [すべて通知] をクリックします。先ほどと同じプッシュ通知が登録しているすべてのブラウザに表示されます。参照: ブラウザの互換性: ブラウザ/OS のリストを表示します。組み合わせることもできます。

通知はさまざまな方法でカスタマイズできます。参照: ServiceWorkerRegistration.showNotification() をご覧ください。

Service Worker の install リスナーでの self.skipWaiting() の呼び出しについて理解しておくことが重要です。詳細については、待機フェーズをスキップするをご覧ください。これを行わないと、Service Worker に加えた変更が直ちに有効になりません。ニーズに応じて、この機能を自社のウェブサイトで使用する場合もあれば、使用しない場合もありますが、いずれにしてもその効果を理解することが重要です。

ユーザーが通知をクリックしたときに URL を開く

実際の環境では、通知は会話のきっかけとしてサイトへのアクセスを促すことができます。そのためには、Service Worker をもう少し構成する必要があります。

Service Worker の notificationclick の // TODO コメントを置き換えますイベントハンドラを次のコードで置き換えます。

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

アプリのタブに戻り、別の通知を自分に送ってから、通知をクリックします。ブラウザで新しいタブが開き、 https://web.dev。

次のステップ

ServiceWorkerRegistration.showNotification() を確認します。では、通知をカスタマイズするさまざまな方法を確認できます。
プッシュ通知の概要をご確認ください。
Codelab: プッシュ通知サーバーを構築するを確認する。購読を管理し、ウェブプッシュプロトコルを送信するサーバーを構築する方法を学ぶできます。
Notification Generator を試す通知のカスタマイズ方法をすべて試してみてください。

Codelab: プッシュ通知クライアントを作成する

ブラウザの互換性

セットアップ

コードの編集可能なコピーを取得する

認証を設定する

Service Worker を登録する

プッシュ通知権限をリクエストする

プッシュ通知に登録する

プッシュ通知の登録を解除

プッシュ メッセージを受信して通知として表示する

ユーザーが通知をクリックしたときに URL を開く

次のステップ

プッシュメッセージを受信して通知として表示する