通知の許可は一度しか聞けない — Rork アプリにソフトアスク（事前確認）を実装して opt-in を底上げする

// hooks/useNotificationPermission.ts
import { useCallback, useEffect, useState } from "react";
import * as Notifications from "expo-notifications";
 
type PermState = "loading" | "notDetermined" | "authorized" | "denied";
 
export function useNotificationPermission() {
  const [state, setState] = useState<PermState>("loading");
 
  const refresh = useCallback(async () => {
    const settings = await Notifications.getPermissionsAsync();
    if (settings.granted) {
      setState("authorized");
    } else if (settings.canAskAgain) {
      // canAskAgain が true = まだ system prompt を出せる
      setState("notDetermined");
    } else {
      setState("denied");
    }
  }, []);
 
  useEffect(() => {
    refresh();
  }, [refresh]);
 
  // 実際に system prompt を撃つのはここだけ
  const requestSystemPrompt = useCallback(async () => {
    const result = await Notifications.requestPermissionsAsync();
    await refresh();
    return result.granted;
  }, [refresh]);
 
  return { state, refresh, requestSystemPrompt };
}

// components/SoftAskModal.tsx
import { Modal, View, Text, Pressable, StyleSheet } from "react-native";
 
type Props = {
  visible: boolean;
  onAllow: () => void;
  onDefer: () => void;
};
 
export function SoftAskModal({ visible, onAllow, onDefer }: Props) {
  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.backdrop}>
        <View style={styles.card}>
          <Text style={styles.title}>新しい壁紙をお届けします</Text>
          <Text style={styles.body}>
            お気に入りに近いテイストの壁紙が追加されたとき、
            さっとお知らせします。頻度は控えめ、いつでもオフにできます。
          </Text>
          <Pressable style={styles.primary} onPress={onAllow}>
            <Text style={styles.primaryText}>通知をオンにする</Text>
          </Pressable>
          <Pressable style={styles.secondary} onPress={onDefer}>
            <Text style={styles.secondaryText}>あとで</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  );
}
 
const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "center", padding: 24 },
  card: { backgroundColor: "#fff", borderRadius: 20, padding: 24 },
  title: { fontSize: 20, fontWeight: "700", marginBottom: 8 },
  body: { fontSize: 15, lineHeight: 22, color: "#444", marginBottom: 20 },
  primary: { backgroundColor: "#111", borderRadius: 14, paddingVertical: 14, alignItems: "center" },
  primaryText: { color: "#fff", fontSize: 16, fontWeight: "600" },
  secondary: { paddingVertical: 12, alignItems: "center", marginTop: 4 },
  secondaryText: { color: "#888", fontSize: 15 },
});

// lib/softAskTrigger.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
 
const KEY = "softask.v1";
 
type SoftAskRecord = { deferred: number; lastShownAt: number | null };
 
export async function shouldShowSoftAsk(): Promise<boolean> {
  const raw = await AsyncStorage.getItem(KEY);
  const rec: SoftAskRecord = raw ? JSON.parse(raw) : { deferred: 0, lastShownAt: null };
 
  // 「あとで」を 2 回押されたら、もう自動では出さない（うるさくしない）
  if (rec.deferred >= 2) return false;
 
  // 直近 3 日以内に出していたら間隔を空ける
  if (rec.lastShownAt && Date.now() - rec.lastShownAt < 3 * 24 * 60 * 60 * 1000) {
    return false;
  }
  return true;
}
 
export async function recordShown() {
  const raw = await AsyncStorage.getItem(KEY);
  const rec: SoftAskRecord = raw ? JSON.parse(raw) : { deferred: 0, lastShownAt: null };
  rec.lastShownAt = Date.now();
  await AsyncStorage.setItem(KEY, JSON.stringify(rec));
}
 
export async function recordDeferred() {
  const raw = await AsyncStorage.getItem(KEY);
  const rec: SoftAskRecord = raw ? JSON.parse(raw) : { deferred: 0, lastShownAt: null };
  rec.deferred += 1;
  await AsyncStorage.setItem(KEY, JSON.stringify(rec));
}

// 保存ボタンのハンドラ内
import { shouldShowSoftAsk, recordShown, recordDeferred } from "../lib/softAskTrigger";
 
function WallpaperDetail() {
  const { state, requestSystemPrompt } = useNotificationPermission();
  const [askVisible, setAskVisible] = useState(false);
 
  const handleSave = async () => {
    await saveWallpaper(); // 本来の保存処理
 
    // 未許可で、きっかけ条件を満たすときだけ提示
    if (state === "notDetermined" && (await shouldShowSoftAsk())) {
      await recordShown();
      track("softask_shown");       // ← 計測イベント①
      setAskVisible(true);
    }
  };
 
  const handleAllow = async () => {
    setAskVisible(false);
    track("softask_accepted");      // ← 計測イベント②
    const granted = await requestSystemPrompt();
    track(granted ? "os_permission_granted" : "os_permission_denied"); // ← ③
  };
 
  const handleDefer = async () => {
    setAskVisible(false);
    await recordDeferred();
    track("softask_deferred");
  };
 
  return (
    <>
      {/* 画面本体は省略 */}
      <SoftAskModal visible={askVisible} onAllow={handleAllow} onDefer={handleDefer} />
    </>
  );
}

import * as Linking from "expo-linking";
import { Alert } from "react-native";
 
function promptOpenSettings() {
  Alert.alert(
    "通知はオフになっています",
    "設定アプリから通知をオンにすると、新着をお知らせできます。",
    [
      { text: "閉じる", style: "cancel" },
      { text: "設定を開く", onPress: () => Linking.openSettings() },
    ]
  );
}

{
  "expo": {
    "android": {
      "permissions": ["POST_NOTIFICATIONS"]
    }
  }
}