Webでプッシュ通知を試してみる

投稿者: | 2017年12月21日

こんにちは。GMOアドマーケティングのK.Mです。

最近よく聞くPWAという概念があります。ざっくりいうと「アプリのようなWeb」ということで、プッシュ通知や、アプリのようにリッチなオフライン体験、バックグラウンド処理などをWebにもたらそうとする取り組みやそういったWebアプリのことを指します。

サービスワーカーと呼ばれるブラウザがWebページとは別にバックグラウンドで実行するプログラムが肝となっており、具体的にはこのサービスワーカーが働くことによって「アプリっぽいWeb」を実現可能とします。

今回は、いざアプリっぽいWebをということで、Webアプリにプッシュ通知を追加するということを試してみました。プッシュ通知は、メルマガ等に比べてリーチしやすいことが多いと思いますし、それをしたいがためにネイティブアプリ化するようなケースも聞くところだったりしますので、既存のWebアプリにお手軽にプッシュ通知を追加できるならそれは一つの良い選択肢になりそうです。

手順概要

  • Firebase Cloud Messaging (FCM) のセットアップ
  • Webアプリの実装
  • サービスワーカーの実装
  • プッシュ通知の実行

手順詳細

Firebase Cloud Messaging (FCM) のセットアップ

Webアプリの実装にあたってFCMが提供するJavascript APIを利用すると便利です。
公式ドキュメントの手順に沿って進め、コードスニペットを取得します。

Webアプリの実装

Webアプリを実装していきます。ここでは index.html とします。
取得したコードスニペットにて初期化されたFirebaseのAPIを使って、通知の受信許可の確認やトークンの取得などを行います。サービスワーカーの登録も行います。

manifest.jsonを記述して読み込みます。

これで、通知の受信許可の確認と、許可された場合はトークンを取得してコンソールに出力することができるようになります。ブラウザで対象ページにアクセスして、受信許可をして、取得したトークンを手元に控えます。プッシュ通知を実行する際に使います。

サービスワーカーの実装

サービスワーカーを実装していきます。ここでは sw.js とします。
前述の通りサービスワーカーは、ブラウザがWebページとは別にバックグラウンドで実行するスクリプトです。登録されているスコープで発生するイベントを監視して、発生したイベントに応じた処理を記述することができます。今回は、pushイベントに応じて通知を表示するという処理を行います。

プッシュ通知の実行

それではプッシュ通知を実行してみます。取得したトークンを指定してFCMにPOSTリクエストを送ります。

プッシュ通知が届きました。

感想

Webでプッシュ通知を実現するための大まかなイメージを掴むことができました。
プッシュ通知に限らず、サービスワーカーを使い倒すことでより一層リッチな体験をお届けするWebアプリが実現できそうです。いろいろ試してみようと思います。

The following two tabs change content below.

K.M

最新記事 by K.M (全て見る)