プッシュ通知

概要

Firebase Cloud Messaging（FCM）を使ったプッシュ通知をサポートします。

機能	Android	iOS
FCM トークンの取得	✓	✓
フォアグラウンドでの受信	✓	✓
通知クリックの処理	✓	✓

対応プラン: Basic 以上

事前準備

Android

Firebase プロジェクトの設定が必要です。開発環境のセットアップドキュメントを参照して google-services.json をアプリに追加してください。

通知表示権限 POST_NOTIFICATIONS は AndroidManifest.xml にデフォルトで有効な状態で配布されます（Android 13+ ではランタイム権限のリクエストが必要）。コメント解除は不要です。

iOS

APNs（Apple Push Notification service）の設定が追加で必要です。

Apple Developer → Certificates, Identifiers & Profiles → Keys → APNs キーを作成（または APNs 証明書を発行）
Xcode → プロジェクトターゲットを選択 → Signing & Capabilities → + Capability → Push Notifications を追加
Firebase コンソール → プロジェクト設定 → Cloud Messaging → APNs キー（または証明書）をアップロード
GoogleService-Info.plist を Xcode プロジェクトに追加すると、APNs と FCM が自動的に連携されます。

フォアグラウンド通知の動作（iOS）

iOS はデフォルトでアプリがフォアグラウンドにある場合、通知バナーを表示しません。SDK がこれを処理してグローバル関数 window.onFCMReceived(...) を呼び出すため、アプリ内通知 UI を独自に実装してください。

FCM トークンの取得

アプリ起動後に FCM トークンを取得してサーバーに保存します。このトークンを使って特定の端末にプッシュを送信します。

unveilyBridge.fetchFCMToken(cb) はコアメソッドです。cb は結果を受け取るコールバック関数名の文字列です。省略するとデフォルトの 'onFCMTokenResult' が使用されます。コールバックは位置引数 (token, isSuccess) の形式で呼び出されます。

window.unveilyBridge.fetchFCMToken("onFCMTokenResult");

function onFCMTokenResult(token, isSuccess) {
  if (isSuccess && token) {
    savePushToken(token);
  }
}

async function savePushToken(token) {
  await fetch('/api/push-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token })
  });
}

サーバー側のトークン保存

// Express.js
app.post('/api/push-token', async (req, res) => {
  const { token } = req.body;
  const userId = req.session.userId;

  await db.query(
    'INSERT INTO push_tokens (user_id, token) VALUES (?, ?) ON DUPLICATE KEY UPDATE token = ?',
    [userId, token, token]
  );

  res.json({ ok: true });
});

// ASP.NET Core
[HttpPost("push-token")]
public async Task<IActionResult> SavePushToken([FromBody] PushTokenRequest request)
{
    var userId = User.GetUserId();
    await _db.PushTokens.Upsert(new PushToken {
        UserId = userId,
        Token = request.Token
    });
    return Ok(new { ok = true });
}

// Spring Boot
@PostMapping("/api/push-token")
public ResponseEntity<?> savePushToken(@RequestBody PushTokenRequest request,
                                        @AuthenticationPrincipal UserDetails user) {
    pushTokenService.upsert(user.getUsername(), request.getToken());
    return ResponseEntity.ok(Map.of("ok", true));
}

<?php
$data = json_decode(file_get_contents('php://input'), true);
$token = $data['token'];
$userId = $_SESSION['user_id'];

$stmt = $pdo->prepare(
    'INSERT INTO push_tokens (user_id, token) VALUES (?, ?)
     ON DUPLICATE KEY UPDATE token = ?'
);
$stmt->execute([$userId, $token, $token]);

header('Content-Type: application/json');
echo json_encode(['ok' => true]);

<%
Dim token, userId
token = Request.Form("token")
userId = Session("user_id")

Dim conn, sql
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open Application("ConnectionString")

sql = "IF EXISTS (SELECT 1 FROM push_tokens WHERE user_id = " & userId & ") " &
      "UPDATE push_tokens SET token = '" & token & "' WHERE user_id = " & userId &
      " ELSE INSERT INTO push_tokens (user_id, token) VALUES (" & userId & ", '" & token & "')"
conn.Execute sql

Response.ContentType = "application/json"
Response.Write "{""ok"": true}"
%>

プッシュの受信とクリックの処理

メッセージを受信したとき、またはユーザーが通知をタップしたとき、SDK はウェブアプリが定義したグローバル関数 window.onFCMReceived(title, body, dataJson) を呼び出します。第 3 引数 dataJson は、カスタムデータのペイロードを含む JSON 文字列です。

window.onFCMReceived = function (title, body, dataJson) {
  const data = dataJson ? JSON.parse(dataJson) : {};

  // ディープリンク（例: 通知タップ時に遷移する URL）
  if (data.url) {
    window.location.href = data.url;
    return;
  }

  // フォアグラウンド受信 — アプリ内通知 UI を表示する
  showInAppNotification({ title, body });
};

フォアグラウンド受信と通知クリックは、どちらも window.onFCMReceived（またはディープリンク）で渡されます。'unveily-event' CustomEvent や addEventListener は使用しません。クリック時の遷移は、データペイロードの url などのフィールドで直接分岐してください。

カスタムデータのペイロード例

送信時に data に入れた値が dataJson 文字列として渡されます。

{
  "title": "新しい注文が届きました",
  "body": "注文 #1234 を確認してください",
  "data": {
    "url": "/orders/1234",
    "orderId": "1234"
  }
}