Progressive Web App (PWA) と Firebase Cloud Messaging (FCM) を組み合わせてPWAからプッシュ通知を送信する仕組みとサンプルコード

PWA（プログレッシブウェブアプリ）

2023.10.15

この記事は約5分で読めます。

Progressive Web App (PWA) と Firebase Cloud Messaging (FCM) を組み合わせて、PWAからプッシュ通知を送信する仕組みと、サンプルコードを説明します。

Firebase プロジェクトのセットアップ
Firebase SDK の設定
Service Worker の登録
プッシュ通知の許可
プッシュ通知の受信
まとめ

Firebase プロジェクトのセットアップ

最初に、Firebase プロジェクトを作成または既存のプロジェクトに移動します。Firebase コンソールで新しいプロジェクトを作成し、Firebase プロジェクトの設定を行います。

Firebase SDK の設定

Firebase SDK をウェブアプリに統合するために、Firebase SDK を追加します。以下のスクリプトをHTMLファイルに追加します。

<!-- Firebase JavaScript SDK の読み込み -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js"></script>

<script>
  // Firebase の設定
  var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  // Firebase の初期化
  firebase.initializeApp(firebaseConfig);

  // メッセージングオブジェクトの取得
  const messaging = firebase.messaging();
</script>

Service Worker の登録

PWA のサービスワーカーを登録し、Firebase プッシュ通知を受信できるようにします。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
}

プッシュ通知の許可

プッシュ通知を受信するために、ユーザーから許可を得る必要があります。通常、ボタンやダイアログを表示してユーザーに許可を求めます。

許可が得られたら、以下のコードで通知の設定を行います。

messaging.requestPermission()
  .then(function() {
    console.log('Permission granted');
    // トークンの取得
    return messaging.getToken();
  })
  .then(function(token) {
    console.log('Token:', token);
    // サーバーにトークンを送信するなどの処理を行う
  })
  .catch(function(error) {
    console.error('Permission denied:', error);
  });

プッシュ通知の受信

プッシュ通知を受信するために、以下のコードを使用します。

サービスワーカー内でプッシュ通知を処理し、メッセージを表示します。

self.addEventListener('push', function(event) {
  const options = {
    body: event.data.text(),
    icon: 'icon.png', // 通知アイコンのパス
  };

  event.waitUntil(
    self.registration.showNotification('プッシュ通知', options)
  );
});