Amazon Web Services ブログ
Amazon Pinpoint を使った Web Push 通知の送信方法
AWS のメッセージングツールを使って、任意の Web サイトへプッシュ通知を送信する方法
Web Push 通知は、ブラウザで受信する Web サイトからのメッセージです。これらのメッセージは、リッチでコンテキストに沿っており、かつタイムリーにパーソナライズされたもので、Web サイト訪問者のエンゲージメント、リエンゲージメント、リテンションを最適にすることを目的としています。例えば、Web サイトのオーナーは Web Push 通知を利用して、販売情報や重要なアップデート、新コンテンツなどをユーザーに通知することができます。
Web Push 通知と、ネイティブアプリの Push 通知の違い
ネイティブアプリの Push 通知は、ユーザーのモバイルアプリケーションの画面に直接表示される短いメッセージで、注文状況や販促情報、アプリケーション関連のニュースなど、タイムリーな情報やメッセージを提供します。
Web Push 通知は、Web ブラウザ（デバイス上のブラウザアプリケーション）を経由して送信される Push通知で、デスクトップ、モバイル、タブレットなど、様々なプラットフォームで機能します。ネイティブアプリの Push 通知よりも新しいチャネルであり、現在ではネイティブアプリの Push 通知、電子メール、SMSと並んで、現代のマーケティング戦略の一部となっています。
モバイルアプリの場合、Push 通知を受け取るには、ユーザーがアプリケーションをインストールする必要があります。Web Push の場合、アプリケーションをダウンロードする必要はなく、該当の Web サイトで 1 度クリックするだけです。
Web Push 通知 はなぜ便利なのか？
実際によくある例で考えてみます。例えば、商品購入できる EC サイトがあった場合、カスタマーは商品の購入が完了すると、荷物の配送状況や配達予定日、配達が完了しているかなどをリアルタイムで確認し、最新情報を得たいと考えるケースがあります。Web Push 通知は、このような最新情報を提供する際に優れた方法になります。モバイル端末で E メールにアクセスできない場合があることや、SMS では画像に対応できず長さの制限があることがあります。また、SMS は送信のコストが負担になる場合もあります。Web Push 通知は、このようなユースケースに最適です。ネイティブアプリを用いた Push 通知は、ユーザーが自分の端末にアプリをインストールする必要があるという制約がありますが、Web Push 通知は、管理者や利用者にアプリのインストールを促すことなく、Push 通知を提供することができます。
旅行や出版、レストラン、配送、金融、保険など、さまざまな分野のマーケティング担当者は、 Web Push 通知を利用して、目標までのコンバージョンを改善することができます。新コンテンツのお知らせや期間限定プロモーション、イベント開催予定などで、シンプルな Web Push はユーザーにとってわかりやすく、エンゲージメントやコンバージョン、リテンションを促進します。AWSのブログサイトを検索すると、Push 通知を使い、カスタマーに価値を提供した企業の事例が数多く紹介されています。以上のことから、Web Push 通知について以下の利点が挙げられます。
- 簡単にオプトインを対応: E メールや SMS など他のマーケティングチャネルとは異なり、Web Push 通知はシームレスなオプトイン体験をユーザーに提供します。ユーザーは、ブラウザの許可プロンプトで「許可」を選択するだけです。ユーザーは自身の名前やE メールアドレス、電話番号などの個人のデータを共有する必要がなく、アプリストアにアクセスして個別でアプリをインストールする必要はありません。
- エンゲージメントの向上: Push 通知は、ユーザーのデスクトップやモバイルの画面に表示され、素早く注意を引くことができます。リアルタイムで表示されるため、SMSや E メールのような他チャネルと比較して、一般的に高いクリック率（CTR）を享受することができます。
- ウェブサイトを閲覧中ではないユーザーにもリーチ: Web Push 通知は、ユーザーが他のサイトやアプリを利用している場合でも、Web サイトから配信すると、顧客に表示されます。このあたりの点は、ネイティブアプリの Push 通知によく似ています。Push 通知のキャンペーンを送信したときに購読者がオフラインだったとしても、次にオンラインになったときに Push 通知のメッセージを配信するようなこともできます。
- ネイティブアプリのインストールが不要: モバイルアプリをインストールする主な理由のひとつに、アプリのPush 通知によって、ユーザーが最新かつ最高の情報を常に入手できることがあります。しかし、アプリストアにアクセスしてインストールする労力は、ユーザーの行動を阻害する要因になりやすいです。特に、ストレージ容量が限られている低価格帯のモバイル端末を使用しているユーザーが多い国や地域では、この傾向が顕著に現れます。ユーザーは、他用途のスペースを確保するために、頻繁に使用しないアプリをアンインストールしなければならないことがよくあります。
- Web サイトを、よりリッチに、より印象的に: 開発者の部屋で、ウェブに欠けているモバイル機器の機能を尋ねると、プッシュ通知は常にリストの上位に挙げられています。ブラウザがウェブプッシュ通知をサポートするようになり、ウェブサイト所有者は、異なるプラットフォーム用に異なるネイティブアプリを開発・維持する代わりに、クロスプラットフォーム（デスクトップとモバイル、AndroidとiOS）の強力な選択肢を提供できるようになったからです。Webプッシュ通知は、ほとんどのスマートフォンでネイティブのモバイルプッシュと同じように表示されます。
- 低コスト: SMSのようなチャネルとは異なり、 Web Push 通知の送信は、ブラウザが Web Push のプロトコルに準拠することでサポートできるため、完全に無料です。発生するコストは、Amazon Pinpointの料金 にある Push 通知の送信費用のみです。
- 一般的なブラウザで Web Push 通知をサポート: Google Chrome や Firefox、Opera、Edge では、モバイルとデスクトップの両方で Web Push をサポートしています。Web Push のサポートは継続的に改善されており、ブラウザや方式ごとの最新のサポート状況については、このリンクを参照してください。
Amazon Pinpoint とは？
Amazon Pinpoint は、ターゲットを絞ったマルチチャネルコミュニケーションを、スケーラブルに実現できる AWS のサービスです。サービス提供者は Amazon Pinpoint を使い、Push 通知や E メール、SMS、アプリ内メッセージなど、様々な方法でカスタマーにメッセージを送信することができます。Amazon Pinpoint の詳細については、ウェブサイトとドキュメントを参照ください。
Firebase Cloud Messaging (FCM) における Web Push のサポート
Firebase は、Android や iOS、Web の通知サービスにクラウドサービスを使用しています。Firebase Cloud Messaging (FCM) は、トークン管理の基本原則に基づいて動き、各デバイスに対して一意のトークンが生成され、それをメッセージを送信する際に使用します。Web Push 通知の送信に FCM を使用する主な利点は2つあります。
- Push メッセージのための Web Push のプロトコルを導入する複雑さの回避: 3rdPartyを通さずに、直接 Web Push 通知を送信するには、Web Push のプロトコルをサポートできるように Web サイトを構築する必要があります。Web Push のプロトコルに準拠するには、管理者は VAPID の情報をヘッダーに追加することや Push メッセージのペイロードを暗号化するなど、Web Push 通知特有の手順が必要になります。もし、ネイティブアプリの Push 通知のためにすでに FCM を導入している企業であった場合、この FCM の利用は、一部機能を追加するような作業となります。Web Push 通知を送信するための FCM サーバーサイドアプリは、ネイティブアプリの場合とほとんど同じように動作し、Web Push メッセージ送信における、追加の複雑さを抽象化することができます。
- Amazon Pinpoint から FCM 経由で Push 通知を送信: Amazon Pinpoint は FCM との統合をサポートしています（ドキュメントを参照）。このブログ記事では、ネイティブの Android アプリに Push 通知を送信する方法と同様に Amazon Pinpoint に FCM のプロジェクトを追加し、Web Push 通知を送信する方法を説明します。
Amazon Pinpoint を使い Web Push 通知を送信するメリット
ここまでで、Web Push 通知によりカスタマーの満足度を高めることができ、FCM を使うことで送信の複雑さを抽象化できる、と理解できたと思います。では、 Amazon Pinpoint が必要な理由はなんでしょうか。
Amazon Pinpoint と統合する多くのメリットがありますが、例えば以下のようなことが挙げられます。
- FCM のトークンをユーザーやウェブアプリのインストールごとにマッピング: FCMは、Web PushをサブスクリプションしているWeb サイトの各ユーザーに対してトークンを提供します。大雑把に言うと、Push メッセージの送信権限を持つ web アプリをインストールするごとに FCM トークンが付与されます。これらのユーザーにメッセージを送信できるようにするには、「ユーザー」、「 Web アプリのインストール」、「ブラウザ」 ごとで FCM トークンを保存する必要があります。Amazon Pinpoint は各ブラウザをエンドポイントとして扱い、ネイティブアプリの「Push トークン」、「電話番号」、「Eメールアドレス」を保存するのと同じ方法で、エンドポイントの一次識別子として Push トークンを保存できるようにします。これにより、Push トークンの保存と管理という複雑さを気にすることなく、Pinpoint のエンドポイントにメッセージを送信することができます。
- ユーザーの属性を Push 通知のトークンにマッピングし、Web Push を効果的に送信: Pinpoint のエンドポイントは、Push 通知のトークンだけでなく、各デバイスの特性やユーザー ID、ユーザー属性などその他属性も保存することができます。これにより、ターゲットを絞った Web Push 通知の送信に使用できるダイナミックで複雑なセグメントを作成することができます。
- ネイティブの Android アプリへの Push通知と基本的に同様: FCM プロジェクトを作成し、FCM トークンを作成し、トークンを使って Pinpoint のエンドポイントを作成し、そのエンドポイントに Push 通知のキャンペーンを送信します。Android のネイティブコードをサービスワーカーに置き換え、クライアントで JavaScript を使えば、容易にWeb Push ができます。
- Web Push、ネイティブ Push、SMS、E メールなどマルチチャネルの配信: ワンストップですべてのチャネルでユーザーにアプローチすることができます。Pinpoint は、複数のチャネルのユーザーに、単一のバックエンドでアプローチできます。アプリユーザーにはネイティブアプリの Push 通知、Web ユーザーには Web Push 通知といったことが可能です。
- セグメンテーションやキャンペーン、イベント、分析などPinpointの各種機能: Amazon Pinpoint には、ユーザーをよりエンゲージメントするための機能が多くあります。ぜひ Amazon Pinpoint について読んでみてください。
このブログでは、AWS Amplify を使用して構築された Web サイトで Amazon Pinpoint を使用して Web Push 通知を送信する方法について説明します。
ソリューションの概要
FCMを「中継サービス」、Pinpoint を「アプリサーバー（FCM トークンをユーザーにマッピング）、Push 通知キャンペーン管理ツール」として、Web Push を実現します。Web Push のプロトコル、FCM、Amazon Pinpoint を統合した導入方法になります。
進め方
このブログ記事では、Web Push のサブスクリプションと Web Push メッセージ受信ができる Amplify を使用した簡単なデモ Web サイトを作成します。この Web サイトに FCM js sdk と Amazon Pinpoint を統合し、FCM の Push トークンを Pinpoint に格納します。 Amazon Pinpoint を使用し、FCM を中継した Web Push 通知を送信する方法を説明します。
上記内容は、各プロセスをそれぞれ以下のように分解することができます。
- FCMでプロジェクト作成
- FCMでプロジェクトを作成し、Web Push 通知用のサーバーキーを生成
- Amplify を使ってシンプルな Web アプリ（Web サイト）を作成
- Amazon Pinpoint プロジェクトの作成。※Amplify ウェブアプリのセットアップの一部として、1 行のコマンドで実現できます。
- amplifyの Web サイトを Web Push できるようにする。※ここで、Web Push のために FCM sdk と統合します。
- Pinpoint のプロジェクトを設定し、FCM と統合。※Pinpoint に FCM サーバーキーを追加するだけです。
- Amazon Pinpoint コンソールにアクセスし、Web サイトからテスト用の Web Push メッセージを送信してください。これで完了です。
- デモ Web サイトはこちらでチェックアウトできます。
このデモサイト（およびブログ）のソースコードは、こちらで入手できます。
前提条件 – 必須
前提条件は以下になります。
- AWS アカウントと FCM デベロッパーアカウント
- Firebase Developer Console で FCM のプロジェクトを作成 ※コンソールにアクセスするためには、FCMデベロッパーアカウントが必要です。
- Nodeとnpm
- AWS Amplify cli のセットアップ
- Web Push 通知とWeb Push のプロトコルをサポートするブラウザーを用意。ブラウザサポートマトリックスを参照してください。
前提条件 – 推奨
このブログ記事を最大限に活かすために、上記の必要な前提条件に加えて、以下の内容を確認されることを強くお勧めします。
- Web Push の基礎: Web Push 通知に関する基本的な知識を学び、関連するコードサンプルをいくつか読んでみてください。すべてを実装して理解する必要はありませんが、service workers、permissions、 push subscriptions 、 notifications api について基本的な理解をしておくと効率的です。
- イントロダクション: 複雑なセクションもいくつかあるため、一度にすべてのセクションを完全に理解する必要はありません。ただし、overview と how push works のセクションは詳細に見てみてください。
- 簡単なコードデモを解説付きで紹介しているため、ぜひ参考にしてください。
- FCM クライアントサイドのコード: FCM のアプリやコンソールは使用しないため、メッセージの送信セクションを確認する必要はありません。代わりに、Pinpoint コンソールを使って Push キャンペーンを管理します。
- amplifyでWebアプリの作成: このチュートリアルで、amplify を使った Web アプリケーションの構築とホスティングの方法を学ぶことができます。また、amplify の cli ツールに慣れることもできます。
- Amazon Pinpoint について読んでみてください。
デモ用 Web アプリのセットアップ
AWS Amplify を使ってデモの Web アプリをデプロイし、それぞれのパーツがどのように組み合わされているかを見てみてください。
サンプル Web アプリのコードをクローン
git clone git@github.com:arrohanamzn/ArrohanWebPushPoc.git (branch: PinpointBlog)
FCM開発者コンソールでFCMアカウントとプロジェクトを作成し、FCMプロジェクトでWebプッシュをチャネルとして追加します。
※ Firebase コンソールの UI は変更される可能性があります。掲載したスクリーンショットと UI に違いがある可能性がありますが、基本的な手順は同様です。
- エンゲージメント の下にある 「Messaging」 のタブをクリックします。 ページのURLは通常以下のようになります。
https://console.firebase.google.com/u/0/project/<name_of_your_project>/notification
- 「開始するにはアプリを追加してください」オプションで、「web/javascript」（</>マーク）をクリックします。
- プロジェクトを作成したら、プロジェクト設定画面に移動し、全般タブをクリックします。自身のプロジェクトの
main.jsの値を、firebaseConfigの値に変更します。
FCM cloud messaging のプロジェクト用の公開鍵、秘密鍵のキーペアを生成します。
- プロジェクトの設定画面で、「Cloud Messaging」タブに切り替えます。ウェブプッシュ証明書 の下にある generate key pairを クリックして、公開鍵、秘密鍵のキーペア を生成します。
- ソースコード内のファイル
main.jsの<YOUR PUBLIC KEY>を、前のステップで生成した鍵ペアに置き換えてください。
- API キーは、ピンポイントプロジェクトのセットアップ時に必要となりますので、控えておいてください。
AmplifyのWebアプリをセットアップし、pinpointと連携
- 該当のプロジェクトで
npm installを実行します。
パッケージのバージョンが古く、ビルドエラーになった場合（特に firebase は頻繁に更新され、大きな変更を伴います）、依存関係を最新バージョンに更新してください。この記事では、古くなった依存関係を特定し、アップデートする簡単な方法を紹介しています。 - Amplify のウェブアプリをセットアップします。このデモの目的では、シンプルな静的ウェブサイトの設定で問題ありません。
amplify initを実行し、必要な情報を入力します。基本的な設定で問題ありません。
- amplify cli を使い、Pinpoint プロジェクトを作成し、Webアプリと連携します。
amplify add analyticsを実行し、Pinpoint のプロジェクトを作成します。Analytics provider としてAmazon Pinpointを選択し、その他はデフォルトとします。- 注意: プロジェクトに 「analytics」を追加すると、次のようなプロンプトが表示されます。「Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (We recommend you allow this when getting started)」 これが表示されたら、Yes とします。
- AWS にプッシュします。
amplify pushを実行します。ソースディレクトリに設定ファイル (aws-exports.js) が追加されます。※main.js からこのファイルを呼び出しています。
Amazon Pinpoint のプロジェクト設定
先ほど作成した FCM のプロジェクトのAPI キーを取得します。
前のステップで作成した Pinpoint のプロジェクトを Pinpoint console で開きます。FCM のCloud Messaging API（レガシー）をプロジェクトに追加します。※このプロセスは、Android のネイティブアプリの場合と全く同じです。
web アプリを実行し、Push 通知を配信
npm startを実行すると、Web アプリが http://localhost:8080/index.html 上で実行されます。- enable push messages をクリックし、その後に表示されるブラウザの許可プロンプトで Allow(許可) をクリックします。有効化されると、ページに FCM トークンが表示されるため、そのトークンをコピーします。
Amazon Pinpoint のコンソールから Web Push 通知の送信
- 前のステップで作成した pinpoint プロジェクトを Pinpoint console で開きます。プロジェクトをクリックし、テストメッセージングに進みます。手順は、ネイティブアプリの場合と同じです。「送信先タイプ」で「デバイストークン」を選択し、前のステップでコピーした FCM トークンを貼り付けます。
- タイトル、本文、オプションのURLを入力します（「アクション」の「URLに移動」）。メッセージの送信をクリックすると、ブラウザに Push メッセージが表示されます。
次のステップ
アプリをホストします。amplify add hosting の後に amplify publish を実行するだけです。Web Push (service workers) が動作するためには、サイトが https である必要があります。
- Pinpoint のセグメント、キャンペーン、ジャーニーの機能を使った Web Push のメッセージの送信も試してみてください。
実装したコードに関する説明
- 対象のGithub リポジトリ : https://github.com/arrohanamzn/ArrohanWebPushPoc
- 各ファイルの説明:
- package.json: シンプルな npm の設定ファイルです。Web アプリで使用する依存関係のリストと、そのバージョン情報が含まれています。今回のケースでは、webpack とAWS Amplify が必要になります。
- package-lock.json: 各モジュールと
package.jsonの依存関係が解決した後に npm が生成する自動生成の設定ファイルです。 aws-exports.js: Amplify cli で作成される自動生成設定ファイルです。このファイルには、フロントエンドをバックエンドサービスにリンクさせるための設定とエンドポイントメタデータが含まれています。サンプルの設定ファイルと同じような構造になっています。- webpack.config.js: シンプルな webpackの設定ファイル です。
src: ウェブアプリのソースコードを含むフォルダです。内容は以下の通りです。- service-worker.js: Push 通知を表示するために登録するサービスワーカーです。サービスワーカーでは、Amazon Pinpoint 経由で送信された通知ペイロードを解析し、通知 API を呼び出し、適切なフィールドの Push 通知を表示します。
- index.html: 対象ウェブサイトの html です。
- main.js: Webアプリの中心となる処理を担います。パーミッションの処理、Push通知の管理、FCM や Amazon Pinpoint との連携を行います。
- images/icon-192×192.png: Push メッセージに表示される静的なアイコンで、対象ウェブサイトのロゴになります。
まとめ
このブログのシンプルなデモでは、Amazon Pinpoint を使用して Web Push 通知を送信する方法を紹介しました。実際の web サービスに対応したソリューションを考える次のステップとして、以下のことを検討することができます。
- Web Pushに関するより深い理解と専門知識の習得
- Push 通知チュートリアル: 全体を読んでみてください
Web push Book: 上記チュートリアルの著者であるMatt Gaunt のサイト
Push api の仕様: すぐに必要ではありませんが、後々役に立つリソース
Push api Mozilla doc: 概要、仕様、ブラウザの互換性、その他の有用な情報
サービスワーカーについて: ウェブ上での Push を可能にする、などの「ネイティブアプリのような」機能を実現するための技術基盤
- Push 通知チュートリアル: 全体を読んでみてください
- よりリッチでスマートな Push 通知: 大きな画像やアクションボタンの追加、タグを使った通知の置き換え（例：スポーツのスコア更新）など、show notifications api の他の機能をぜひ試してください。
- スマートな Push 通知: ペイロードにカスタムビジネスロジックを追加してみてください。ヒント: Pinpoint コンソールの “body” (“
pinpoint.notification.body“) のフィールドを使用して、カスタマイズした json 文字列を送信する。 - より多くのサブスクリプションを促進: Amplify Analytics を活用して、ユーザーがプッシュのサブスクリプションの UI をどのように操作しているかをトラッキングします。エンゲージメントを最大化するために、ユーザーにサブスクリプションを要求する場所と方法を検討してみましょう。
- 簡単なサブスクリプション解除: ブラウザの設定からブロックしなくても、ユーザーが簡単に Push 通知を無効にできるようにします。また、Pinpoint でそのエンドポイントを無効にすることも確認してみてください。ヒント:
updateEndpoint apiを使用し、引数として ‘ALL’ をoptOutに渡します。 - ターゲットを絞り込んでパーソナライズした Push 通知: Pinpoint のセグメントを活用し、ユーザーの興味や要件に応じたプッシュ通知を送信します。ヒント：エンドポイントにユーザーデータを追加し、フィルタリングしてターゲットセグメントを作成するために使用します。
- キャンペーン管理: キャンペーンやジャーニー、セグメント、分析、など、Pinpoint の機能を活用してみてください。
プロジェクトのクリーンアップ
このセクションでは、このデモのために作成したリソースを削除して、料金が発生しないようにするための手順を手早く説明します。
- Amazon Pinpoint プロジェクト、ホスティング用の S3 バケット（および追加した他のリソース）を含むすべての AWS リソースをクリーンアップします。コマンドラインでプロジェクトディレクトリから amplify delete を実行するだけです。
- FCMプロジェクトをクリーンアップします。プロジェクトを削除する手順については、 FCM のサポートページを参照してください –
https://support.google.com/firebase/answer/9137886- プロジェクト設定ページを開きます。URLは以下のような形式です。
https://console.firebase.google.com/u/0/project/<your_project_identifier>/settings/general - ページ下部のプロジェクト削除ボタンをクリックします。
- プロジェクト設定ページを開きます。URLは以下のような形式です。
この記事は、How to send web push notifications using Amazon Pinpoint を翻訳したものです。
翻訳は Solution Architect の中村 達也 が担当しました。