FCM(Firebase Cloud Messaging)でWeb Pushする方法 #iOS

2025-01-10 はじめに< /h1> FCM（Firebase Cloud Messaging）でWeb Pushする記事はいくつかありますが、2023年6月20日に非推奨になっているCloud Messaging API（レガシー）を使用した記事が多いので、最新のFirebase Cl

はじめに< /h1>

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アプリケーションで利用され、ユーザーがサービスにアクセスしていないときでも、重要な情報を届けることができます。

こんな人に読んでほしい< /h1>

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

Firebase登録< /h1>

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

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


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


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


ソースコード作成< /h1>

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

. ├── front │ ├── index.html │ ├── firebase-message-sw.js │ ├── manifest.json │ └── service-worker.js └── server ├── push.php └── XXXXXXXXXX.json < /code>< /pre> index.html< /h1> 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 i d="allow_push_notification">トークン取得</button> <p i d="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-message.js"; // Your web app 's Firebase configuration const firebaseConfig = { apiKey: "XXXXXXXXXX", authDomain: "XXXXXXXXXX", projectId: "XXXXXXXXXX", storageBucket: "XXXXXXXXXX", messageSenderId: "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 ! = = " deny ") { //if(Notification.permission ! = = " deny ") { Notification.requestPermission().then( (permission) => { const message = getMessaging() ; // Add the public key generated from the console here. gettoken(message, {vapi dKey: "★鍵ペア★"} ) .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> < /code>< /pre> 「"XXXXXXXXXX"」の部分は、FirebaseのCDNのコードに変更してください。「★鍵ペア★」の部分は、Firebaseの鍵ペアに変更してください。 firebase-message-sw.js< /h1> FCMのService Workerであり、Web Push通知を受信した際に動作します。 firebase-message-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 } ) ) ; } ) ; < /code>< /pre> manifest.json / service-worker.js< /h1> 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 テスト " } < /code>< /pre> service-worker.js var cache_name = ' pwasample '; var urlsToCache = [ '/apps/pwa/', ' /apps / pwa / index.html ' ]; self.addEventListener('install', function(event) { event.waituntil( cache .open(cache_name) .then(function(cache) { return cache.addAll(urlsToCache) ; } ) ) ; } ) ; self.addEventListener('fetch', function(event) { event.respondWith( cache .match(event.request) .then(function(response) { return response ? response : fetch(event.request) ; } ) ) ; } ) ; < /code>< /pre> Webアプリの実行< /h1> service Workerを実行するためにはHTTPS化が必要です。とりあえず動かしたいのであれば、下記記事を参考にしてホスティングしてください。爆速で静的WEBをHTTPSホスティングする方法 ブラウザ表示後、「トークン取得」ボタンを押すとFCMトークンが表示されます。これをコピーしてください。 push.php< /h1> ここからはサーバー側の実装になります。コマンドラインでさくっと実行したいのでphpで実装してみます。 push.php <?php require 'vendor/autoload.php'; //アクセストークン取得 $ client = new google_client() ; $ client->setAuthConfig(' xxxxxxxxxx.json ') ; $ client->addScope('https://www.googleapis.com/auth/firebase.message') ; $ client->refreshTokenWithAssertion() ; $ access_token = $ client->getAccessToken() ; // 送るメッセージ is tokenに登録トークンを設定　 tokenに登録トークンを設定 $ json = '{ "message":{ "notification":{"title": "ここにタイトルを入力", "body": "ここにボディを入力"}, "token":"★FCNトークン★"} }'; // curlの初期化 $ch2 = curl_init() ; // アクセストークンをhttpヘッダーに設定 $ header = 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 => $ header, CURLOPT_SSL_VERIFYPEER => false, CURLOPT_POST => true, CURLOPT_RETURNTRANSFER => true, CURLOPT_POSTFIELDS => $ json )) ; // push送信 $ response = curl_exec($ch2) ; curl_close($ch2) ; < /code>< /pre> 「XXXXXXXXXX.json」は秘密鍵のjsonファイル名に変更してください。またpush.phpと同じフォルダに秘密鍵のjsonファイルを置いてください。「 ★ fcnトークン ★ 」はwebアプリに表示されているfcmトークンに変更してください。「★FCNプロジェクトID★」はFCMのプロジェクトIDに変更してください。 Google API Clientライブラリのインストール< /h1> 下記コマンドを実行し、ライブラリをインストールします。 composer is require require google / apiclient:^2.15.0 < /code>< /pre> サーバーからPUSH送信< /h1> 実行結果< /h1> 代表的なOS/ブラウザでのWeb Push実行結果を添付します。 OS< /th> 表示結果< /th> < /tr> < /thead> Windows11< /td> chrome edge FireFox < /td> < /tr> Mac< /td> chrome Safari < /td> < /tr> Androi d13< /td> chrome < /td> < /tr> iOS17.5.1< /td> PWA < /td> < /tr> < /tbody> < /table> 最後に< /h1> 今回はFCMでWeb Pushするための最低限のコードを書いてみました。いろいろカスタマイズできるので、興味のある方は調べてみるとよいと思います。 Eratool についてプライバシーお問い合わせ © Copyright 2019-2020. 19 SQLクエリの合計 0.581 おかわり

OS< /th>	表示結果< /th> < /tr> < /thead>
Windows11< /td>	chrome edge FireFox < /td> < /tr>
Mac< /td>	chrome Safari < /td> < /tr>
Androi d13< /td>	chrome < /td> < /tr>
iOS17.5.1< /td>	PWA < /td> < /tr> < /tbody> < /table> < /span>< /i>最後に< /h1> 今回はFCMでWeb Pushするための最低限のコードを書いてみました。いろいろカスタマイズできるので、興味のある方は調べてみるとよいと思います。< /p> Eratool についてプライバシーお問い合わせ © Copyright 2019-2020. 19 SQLクエリの合計 0.581 おかわり