はじめに

FCM（Firebase Cloud Messaging）でWeb Pushする記事はいくつかありますが、2023年6月20日に非推奨になっているCloud Messaging API（レガシー）を使用した記事が多いので、最新のFirebase Cloud Messaging API（V1）で動かしてみます。

・FCMとは
　Googleが提供するクラウドベースのメッセージングソリューションです。主にモバイルおよびWebアプリケーション向けに設計されており、リアルタイムでメッセージを送受信するためのサービスです。
・Web Pushとは
　Webブラウザを介してユーザーに対してリアルタイムで通知を送信する技術です。主にWebサイトやWebアプリケーションで利用され、ユーザーがサービスにアクセスしていないときでも、重要な情報を届けることができます。

こんな人に読んでほしい

・Web Push導入を検討している方

Firebase登録

まず初めに、下記記事を参考にして、プロジェクトとマイアプリをFirebaseに登録します。
https://ralacode.com/blog/post/register-firebase/

登録後、下記情報をコピーしておきます。
・「プロジェクトの設定」-「全般」-「マイアプリ」のプロジェクトIDとCDNのコード

・「プロジェクトの設定」-「Cloud Messaging」の鍵ペア

・「プロジェクトの設定」-「サービスアカウント」の新しい秘密鍵を生成(jsonファイルのダウンロード)

ソースコード作成

次にソースコードを作成していきます。
ファイル構成は以下の通りです。

.
├── front
│   ├── index.html
│   ├── firebase-messaging-sw.js
│   ├── manifest.json
│   └── service-worker.js
└── server
    ├── push.php
    └── XXXXXXXXXX.json

index.html

Web Pushを受信するWebアプリで、「トークン取得」ボタン押下時にFCMトークンを取得し、ブラウザに表示します。
本来であればFCMトークンはサーバーで適切に管理する必要がありますが、今回は検証目的なので簡易的に実装しています。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8/'>
  <link rel="manifest" href="./manifest.json">
  <script>
    // service workerが有効なら、service-worker.js を登録します
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js');
   }
  </script>
</head>
<body>
    <button id="allow_push_notification">トークン取得</button>
    <p id="output"></p>
    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
        import { getMessaging, getToken } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-messaging.js";

        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "XXXXXXXXXX",
            authDomain: "XXXXXXXXXX",
            projectId: "XXXXXXXXXX",
            storageBucket: "XXXXXXXXXX",
            messagingSenderId: "XXXXXXXXXX",
            appId: "XXXXXXXXXX"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);

        // 通知を許可するボタンが押された時のアクション
        const btn = document.getElementById('allow_push_notification');
        btn.addEventListener("click", function () {
            //let promise = Notification.requestPermission();
            //console.log("promise: ",promise);
            if (!("Notification" in window)) {
                // ブラウザーが通知に対応しているか調べる
                alert("このブラウザーはデスクトップ通知には対応していません。");
            } else if (Notification.permission !== "denied") {

            //if(Notification.permission !== "denied") {
                Notification.requestPermission().then((permission) => {
                    const messaging = getMessaging();
                    // Add the public key generated from the console here.
                    getToken(messaging, {vapidKey: "★鍵ペア★"})
                        .then((token) => {
                            if (token) {
                                // tokenを出力
                                //document.getElementById('output').textContent = `${token.Promise}`;
                                console.log( "token", token);
                                document.getElementById('output').textContent = token;
                            }else{
                                console.log('登録トークンがありません。生成する許可をリクエストします。');
                            }
                        })
                        .catch((err) => {
                            console.log('getToken Error',err);
                        });
                });
            }
        });
    </script>
</body>
</html>

「"XXXXXXXXXX"」の部分は、FirebaseのCDNのコードに変更してください。
「★鍵ペア★」の部分は、Firebaseの鍵ペアに変更してください。

firebase-messaging-sw.js

FCMのService Workerであり、Web Push通知を受信した際に動作します。

firebase-messaging-sw.js

// Push通知を受け取ると呼ばれる
self.addEventListener('push', function (event) {
    // メッセージを表示する
    var data = {};
    if (event.data) {
      data = event.data.json();
    }
    var title = data.notification.title;
    var message = data.notification.body;
    event.waitUntil(
      self.registration.showNotification(title, {
        'body': message
      })
    );
});

manifest.json / service-worker.js

iOSでWeb Pushを受信する場合はPWA化が必要です。
PWA化する場合は下記２つのファイルを作成します。
(iOSで使用しない場合は不要です)

manifest.json

{
    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
    "name": "Web Push Test",
    "short_name": "Push Test",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#fff",
    "description": "Web Push テスト"
}

service-worker.js

var CACHE_NAME = 'pwasample';
var urlsToCache = [
    '/apps/pwa/',
    '/apps/pwa/index.html'
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches
            .match(event.request)
            .then(function(response) {
                return response ? response : fetch(event.request);
            })
    );
});

Webアプリの実行

Service Workerを実行するためにはHTTPS化が必要です。
とりあえず動かしたいのであれば、下記記事を参考にしてホスティングしてください。
爆速で静的WEBをHTTPSホスティングする方法

ブラウザ表示後、「トークン取得」ボタンを押すとFCMトークンが表示されます。
これをコピーしてください。

push.php

ここからはサーバー側の実装になります。
コマンドラインでさくっと実行したいのでphpで実装してみます。

push.php

<?php
require 'vendor/autoload.php';

//アクセストークン取得
$client = new Google_Client();
$client->setAuthConfig('XXXXXXXXXX.json');
$client->addScope('https://www.googleapis.com/auth/firebase.messaging');
$client->refreshTokenWithAssertion();
$access_token = $client->getAccessToken();

// 送るメッセージ　tokenに登録トークンを設定
$json = '{
    "message":{
        "notification":{"title": "ここにタイトルを入力",
        "body": "ここにボディを入力"},
        "token":"★FCNトークン★"}
}';

// curlの初期化
$ch2 = curl_init(); 

// アクセストークンをhttpヘッダーに設定
$headers = array(
    'Content-Type: application/json',
    'Authorization: Bearer ' . $access_token["access_token"]
);

curl_setopt_array($ch2, array(
    CURLOPT_URL => 'https://fcm.googleapis.com/v1/projects/★FCNプロジェクトID★/messages:send',
    CURLOPT_HTTPHEADER => $headers,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => $json
));

// push送信
$response = curl_exec($ch2);

curl_close($ch2);

「XXXXXXXXXX.json」は秘密鍵のjsonファイル名に変更してください。
またpush.phpと同じフォルダに秘密鍵のjsonファイルを置いてください。
「★FCNトークン★」はWebアプリに表示されているFCMトークンに変更してください。
「★FCNプロジェクトID★」はFCMのプロジェクトIDに変更してください。

Google API Clientライブラリのインストール

下記コマンドを実行し、ライブラリをインストールします。

composer require google/apiclient:^2.15.0

サーバーからPUSH送信

php push.php

実行結果

代表的なOS/ブラウザでのWeb Push実行結果を添付します。

OS	表示結果
Windows11	Chrome Edge FireFox
Mac	Chrome Safari
Android13	Chrome
iOS17.5.1	PWA

最後に

今回はFCMでWeb Pushするための最低限のコードを書いてみました。
いろいろカスタマイズできるので、興味のある方は調べてみるとよいと思います。