Facebook Twitter Google Maps RSS
Home webサイト PepperからWebブラウザへプッシュ通知を送る
formats

PepperからWebブラウザへプッシュ通知を送る

こんにちは。陽気なシステム屋のうっちーです。

あけましておめでとうございます。ご挨拶がすっかり遅くなってしまいましたが 2016年はどんな一年になるのでしょうか。個人的にはProgressive Web Appsが一般化するかもしれないなーなどと思っています。

弊社ではこのところPepperのアプリなんかも作っておりまして、先日チームのメンバーから「来訪されたお客様が受付のPepperに触ったら社員へプッシュ通知を飛ばしたい。」と相談を受けました。というわけで、Webプッシュをやってみましょう。

・Chrome Dev Summit 2015 で振り返る プログレッシブ ウェブ アプリ
http://googledevjp.blogspot.jp/2016/01/chrome-dev-summit-2015.html

以下の CodeLabsに沿ってやっていきます。このハンズオンは GCM (Google Cloud Messaging) を使用していますね。
https://developers.google.com/web/fundamentals/getting-started/push-notifications/

まずは、通知先を登録する Webページを作成します。このページは localhostか HTTPSでホスティングする必要があるので、S3と CloudFrontを使いました。AWS Certificate Manager (ACM) を使うと、サクッと独自ドメインで SSLを使用することができます。

「許可」を押下すると、pushManagerが GCMの registrationIdを受け取ります。

プッシュ通知を送信する際に送信先を識別する必要がありますので、この registrationIdをどこかに保存しておきます。
今回は、Amazon API Gatewayを使って DynamoDBに保存しておきますね。

次に送信側を作成します。

と言っても、送信ロジックは全て API化しちゃいます。Pepperから送信できる必要がありますから。

これで、事前に登録された registrationIdの端末たちに通知が送信されます。

最後に、通知を受けて内容を表示するロジックを書きます。これは Service Workerのイベントハンドラに書きます。
表示する内容を APIで取得するようにします。

ついでに、ユーザーが通知をクリックしたら、アイエンターのホームページを表示するように設定します。

では、実際にプッシュ通知を送ってみます。


以下のように表示されます。

Amazon API Gatewayを使用して、サーバーレスで Webプッシュ通知を実現することができました。
なお、このプッシュ通知は Androidの Chromeでも受信することができます。

API実装の中身については次回以降に解説しますね。

※アイエンターではAmazon Web Services(AWS)を用いたサイト構築、ソリューション提案の実績が多数あります。様々なサービスに対する豊富な知見をもとに最適なご提案を行うことが可能です。お気軽にアイエンターへご相談ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*