Ugo

Webエンジニアのためのプログラミング情報サイト

Angularでプッシュ通知を実装する！FCM（Firebase Cloud Messging）。

Angularでプッシュ通知を実装する！FCM（Firebase Cloud Messging）。

この記事では、FCM（Firebase Cloud Messging）を利用したAngularアプリへのプッシュ通知の実装方法を紹介する。

最近では、プッシュ通知はWebやモバイルで頻繁に使用されるようになってきており、モダンなWebアプリケーションにおいては欠かせない技術となってきている。

ぜひとも、自分のアプリに組み込んでユーザビリティの向上や集客に役立ててほしい。

Windows10のプッシュ通知の例
目次

FCM（Firebase Cloud Messaging）

FirebaseはGoogleのサービスでおもにクラウドデータベースなどの機能を提供している。

一部、有料の機能もあるが、多くの機能は無料で使用できる。

Fire Cloud MessagingはFirebaseのサービスのひとつで、プッシュ通知の機能を提供する。

プッシュ通知はWebやモバイルアプリの世界ではスタンダードな技術であり、以下のような目的で使用される。

  • ニュースやセール情報の送信
  • ユーザ設定の更新通知
  • プッシュ通知を使った二段階認証

Firebaseはクロスプラットフォーム対応しており、ひとつのFirebaseアプリに複数のWebサイトやモバイルアプリを紐づけて使用することができる。

この記事では、Webアプリケーションにおけるプッシュ通知の実装例を紹介する。

Angularでプッシュ通知を実装する

ではプッシュ通知の実装例を見ていこう。

このチュートリアルでは既に存在するAngularプロジェクトでFCMを使用することを想定している。

まだ、Angularのプロジェクトを作っていない場合はこちらの記事を参考にプロジェクトを用意しておいてほしい。

firebaseプロジェクトを作成する

firebaseコンソールを開き新しいFirebaseプロジェクトを作成する。

プロジェクト名はAngularでのプロジェクト名と合わせておくと管理しやすいだろう。

Firebaseコンソールの「プロジェクト設定 ⇒ 全般 ⇒ マイアプリ」からfirebaseの情報をコピーする。

環境ファイルにfirebaseの設定を記述する

angularプロジェクトには環境ファイル（environment.ts）があり、環境ごとのアプリの設定を記述しておくことができる。

ここに先の章でコピーしたapiKeyを始めとするfirebaseの情報をペーストする。

export const environment = {
  production: false,
  firebase: {
    // ここに設定をコピーする。
  }
};

environment.tsに記述した設定はAngularプロジェクトの全体からアクセスすることができる。

また、複数の環境ファイルを準備しておけば、ローカル・テスト・本番などの環境によって異なるFirebaseを使いわけることができる。

AngularFireをインストールする

次にAngularプロジェクトにFirebaseをインテグレーションするための公式ライブラリである「AngularFire」をインストールする。

AngularFire GitHub:: https://github.com/angular/angularfire

AngularFireをインストールするには以下のコマンドを実行する。

ng add @angular/fire

コマンドが完了したらapp.module.tsに、AngularFireModuleとAngulatFireMessagingModuleを追記する。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireMessagingModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Manifestファイルを作成する

Firebase Cloud MessagingをWebアプリにてプッシュ通知を受信する場合はService Workerと呼ばれる技術を使用する。

*Service Wokerについて詳しく知りたい人はこちらの記事を参考にしてほしい。

Service Workerを登録するためにマニフェストファイル（manifest.json）を作成して送信者IDを記述する。

{
  "gcm_sender_id": "123456789123"
}

送信者IDはFirebaseコンソールのプロジェクト設定から見つけることができる。

manifest.jsonを作成したらindex.html内にリンクを追記する。

<head>
  <link rel="manifest" href="/manifest.json">
</head>

firebase-messaging-sw.jsを作成する

次にFCMの動作を指定するメインのファイルとなるfirebase-messageing-sw.jsを作成する。

このファイルでは、Service Workerやプッシュ通知の挙動などを指定することができるが今回はテストのために最低限の内容をのみを記述する。

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');

firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
});

firebase.messaging();

Service Workerをブラウザに登録する

次に作成したfirebase-messageing-sw.jsをメインファイル（main.ts）にて読み込む。

function loadFirebase(): void {
    initializeApp(environment.firebase);
    navigator.serviceWorker
      .register('firebase-messaging-sw.js')
      .then()
      .catch((err) =>
        console.error('Service worker registration failed with:', err)
      );
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => loadFirebase())
  .catch(err => console.error(err));

ここではnavigatorオブジェクトを使用してServiceWorkerをブラウザに登録している。

通知の権限を要求する

プッシュ通知を受信するためには、URLに対して通知を送ることが許可されていないといけない。

通知の許可を得るために権限のリクエストを要求する。

AngularFireのreuqestTokenメソッドでは、デバイストークンを取得するとともに通知の許可がされていない場合は自動で許可を要求するダイアログを表示する。

this.angularFireMessaging.requestToken.subscribe(
  (token) => {
	console.log(token);
  },
  (err) => {
	console.error('Unable to get permission to notify.', err);
  }
);

Google Chromeの権限要求ダイアログ

メッセージを送信する

実際にメッセージを送信してプッシュ通知を表示してみよう。

FCMの通知を送信する方法には以下のようなパターンがある。

  1. Cloud Messagingコンソールから送信する
  2. Postmanで送信する
  3. コマンドツールcurlを使用して送信する

この記事では、1と2のパターンを紹介する。

Cloud Messagingコンソールから送信する

まずは一番簡単なCloud Messagingコンソールを使った方法を紹介しよう。

コンソールにて「Cloud Messaging」メニューを開き、「send your first message」ボタンをクリックする。

通知の作成画面が開くので必要な項目を記入して送信する。

すべてが動作していれば以下のような通知が届くはずだ。

Postmanで送信する

次にPostmanを使ってメッセージを送信してみよう。

プッシュ機能のテストのために通知を送る場合は素早く送信できるのでこちらの方法を使ったほうがいいだろう。

ヘッダ情報の入力

URLは「https://fcm.googleapis.com/fcm/send」をリクエストのタイプは「POST」を選択する。

AuthorizationとContent-Typeをヘッダとして使用する。

Authorizationには「key=」の後にサーバーキーを入力する。

サーバーキーはFirebaseコンソールの「プロジェクトの設定 ⇒ Cloud Messaging」から見つけることができる。

Content-Typeは「application/json」を選択する。

コンテンツの入力

Bodyタブに切り替え送信したいコンテンツを次のフォーマットで入力する。

「to」プロパティにはFirebaseから取得したトークンを入力する。

トークンは、この記事のサンプルコードを使用した場合であれば、アプリの起動の際にコンソールに出力されているはずだ。

「Send」ボタンをクリックすれば通知が送信される。

なお、ブラウザ内でAngularアプリのタブがアクティブになっている状態と通知が表示されないかと思う。

その場合は他のページをアクティブにしたうえで再度、送信してみてほしい。

MENU