push-notification-setup について
モバイルおよびWebでプッシュ通知を実装する開発者向けのセットアップスキルです。React Native、iOSネイティブ、Androidでの権限要求、トークン処理、メッセージ受信を扱います。
主な機能
- 01FCMプッシュ通知の設定
- 02iOSネイティブの認証と登録
- 03Androidのメッセージ処理
- 04トークン更新と通知チャンネルの指針
- 05ディープリンクとペイロード安全性の指針
活用シーン
- 01React Nativeで通知権限を要求しトークンを送信
- 02iOSアプリでリモート通知を登録
- 03Androidサービスでプッシュメッセージを処理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ secondsky/ claude-skills --skill push-notification-setupインストール後、Claude Code で/push-notification-setupを入力して読み込まれたか確認します。
詳細
プッシュ通知の設定
モバイルとウェブのプラットフォーム全体でプッシュ通知を実装します。
Firebase Cloud Messaging(React Native)
import messaging from '@react-native-firebase/messaging';
// Request permission
async function requestPermission() {
const status = await messaging().requestPermission();
if (status === messaging.AuthorizationStatus.AUTHORIZED) {
const token = await messaging().getToken();
await sendTokenToServer(token);
}
}
// Handle foreground messages
messaging().onMessage(async message => {
console.log('Foreground message:', message);
showLocalNotification(message);
});
// Handle background/quit messages
messaging().setBackgroundMessageHandler(async message => {
console.log('Background message:', message);
});
// Handle token refresh
messaging().onTokenRefresh(token => {
sendTokenToServer(token);
});
iOS ネイティブ(Swift)
import UserNotifications
func requestAuthorization() {
UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in
if granted {
DispatchQueue.main.async {
UIApplication.shared.registerForRemoteNotifications()
}
}
}
}
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
let token = deviceToken.map { String(format: "%02.2hhx", $0) }.joined()
sendTokenToServer(token)
}
Android(Kotlin)
class MyFirebaseService : FirebaseMessagingService() {
override fun onNewToken(token: String) {
sendTokenToServer(token)
}
override fun onMessageReceived(message: RemoteMessage) {
message.notification?.let {
showNotification(it.title, it.body)
}
}
private fun showNotification(title: String?, body: String?) {
val channelId = "default"
val notification = NotificationCompat.Builder(this, channelId)
.setContentTitle(title)
.setContentText(body)
.setSmallIcon(R.drawable.ic_notification)
.build()
NotificationManagerCompat.from(this).notify(0, notification)
}
}
ベストプラクティス
- 適切なタイミングで権限をリクエストする
- トークンの更新を処理する
- 通知チャンネル(Android)をサポートする
- ディープリンクを実装する
- ペイロードに機密データを含めない
- 実機でテストする
コメント
Markdown 対応