署名付きURLに変えたらキャッシュが効かなくなった — expo-image のキーを URL から切り離す

// URL は毎回変わってよい。キーだけを固定すれば、取得も保存も同じ棚に揃います
<Image
  source={{ uri: signedUrl, cacheKey: "v1:/wallpapers/w042.webp?w=1080&fm=webp" }}
  cachePolicy="memory-disk"
  style={styles.thumb}
/>

// lib/imageKey.ts
 
/** キーに含める変換パラメータ。ここに無いクエリは同一性に影響させません */
const VARIANT_PARAMS = ["w", "h", "fm", "q", "dpr"] as const;
 
/** キー体系のバージョン。方式を変えたい日にここだけを上げます */
const KEY_VERSION = "v1";
 
/**
 * 署名付きURLから、署名に依存しない安定キーを導きます。
 * 同期関数です。同じオブジェクト・同じ変換なら、署名が変わっても同じ文字列を返します。
 */
export function stableImageKey(url: string): string {
  const u = new URL(url);
 
  // 変換パラメータのみを、配列の順序に固定して取り出す
  const variant = VARIANT_PARAMS
    .map((p) => {
      const v = u.searchParams.get(p);
      return v === null ? null : `${p}=${v}`;
    })
    .filter((s): s is string => s !== null)
    .join("&");
 
  // ホスト名は含めません。CDN 移行でキャッシュ全滅を起こさないためです
  const path = u.pathname.replace(/\/+$/, "").toLowerCase();
 
  return variant
    ? `${KEY_VERSION}:${path}?${variant}`
    : `${KEY_VERSION}:${path}`;
}
 
// 期待する出力（署名だけが違う2つのURL）
// stableImageKey(".../w042.webp?w=1080&X-Amz-Signature=6f1c...")
//   → "v1:/wallpapers/w042.webp?w=1080"   同じ
// stableImageKey(".../w042.webp?w=1080&X-Amz-Signature=a93e...")
//   → "v1:/wallpapers/w042.webp?w=1080"   同じ
// stableImageKey(".../w042.webp?w=540&X-Amz-Signature=a93e...")
//   → "v1:/wallpapers/w042.webp?w=540"    変換が違うので別キー

// lib/imageCache.ts
import { Image, type ImageRef } from "expo-image";
import * as FileSystem from "expo-file-system";
import { stableImageKey } from "./imageKey";
 
type Resolver = (objectPath: string) => Promise<string>; // 署名付きURLを発行する関数
 
/**
 * 安定キーで先にキャッシュを引き、無ければ署名を取り直して取得・保存します。
 * 返り値は ImageRef で、<Image source={ref} /> にそのまま渡せます。
 */
export async function resolveCachedImage(
  objectPath: string,        // 例: "/wallpapers/w042.webp"
  variantQuery: string,      // 例: "w=1080&fm=webp"
  sign: Resolver
): Promise<ImageRef | null> {
  // キー導出は署名を必要とせず、同期で終わります
  const key = stableImageKey(
    `https://placeholder.invalid${objectPath}?${variantQuery}`
  );
 
  const cached = await Image.readFromCacheAsync(key);
  if (cached) {
    return cached; // 署名を一度も発行せずに返せます
  }
 
  // ここで初めて署名を発行する。発行回数そのものが減ります
  const signed = await sign(`${objectPath}?${variantQuery}`);
 
  // writeToCacheAsync はローカルファイルを取ります。いったん端末へ落としてから渡します
  const tmp = `${FileSystem.cacheDirectory}${encodeURIComponent(key)}`;
  const { uri: localUri } = await FileSystem.downloadAsync(signed, tmp);
  await Image.writeToCacheAsync(localUri, key); // 返り値は void
 
  return Image.readFromCacheAsync(key);
}

// components/WallpaperThumb.tsx
import { Image } from "expo-image";
import { stableImageKey } from "../lib/imageKey";
 
export function WallpaperThumb({
  objectPath,
  signedUrl,
}: {
  objectPath: string;
  signedUrl: string | undefined;
}) {
  const cacheKey = stableImageKey(
    `https://placeholder.invalid${objectPath}?w=1080&fm=webp`
  );
 
  return (
    <Image
      // uri が未取得でも undefined にしない（後述の落とし穴③）
      source={{ uri: signedUrl ?? "", cacheKey }}
      cachePolicy="memory-disk"
      recyclingKey={cacheKey}   // FlashList で前の行の絵が残らないように
      style={{ width: 120, height: 213 }}
      transition={120}
    />
  );
}

// cache_sim.mjs — node cache_sim.mjs
// 署名付きURL環境でのキャッシュキー方式の比較（LRU・ディスク上限あり）
const CATALOG = 300, VIEWS = 60, SESSIONS = 20;
const AVG = 1.8 * 1024 * 1024, CAP = 256 * 1024 * 1024;
 
// 再現可能な擬似乱数（mulberry32）
function rng(seed) {
  return function () {
    seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
 
// べき乗分布の累積テーブル
function zipf(n, s) {
  const w = []; let sum = 0;
  for (let i = 1; i <= n; i++) { const x = 1 / Math.pow(i, s); w.push(x); sum += x; }
  const c = []; let a = 0;
  for (const x of w) { a += x / sum; c.push(a); }
  return c;
}
 
function pick(c, r) {
  let lo = 0, hi = c.length - 1;
  while (lo < hi) { const m = (lo + hi) >> 1; if (r <= c[m]) hi = m; else lo = m + 1; }
  return lo;
}
 
function run(mode, s, seed) {
  const c = zipf(CATALOG, s), rand = rng(seed), lru = new Map();
  let used = 0, hit = 0, miss = 0, dl = 0, ev = 0;
  for (let ss = 0; ss < SESSIONS; ss++) {
    const sig = `sig${ss}`;                    // セッションごとに署名が変わる
    for (let v = 0; v < VIEWS; v++) {
      const id = pick(c, rand());
      const size = Math.round(AVG * (0.6 + 0.8 * rand()));
      const key = mode === "url"
        ? `/img/${id}.webp?w=1080&${sig}`      // 既定: URL 全体
        : `/img/${id}.webp?w=1080`;            // 安定キー
      if (lru.has(key)) {                      // ヒット時は LRU の末尾へ
        hit++; const b = lru.get(key); lru.delete(key); lru.set(key, b); continue;
      }
      miss++; dl += size; lru.set(key, size); used += size;
      while (used > CAP) {                     // 上限超過分を古い順に退避
        const o = lru.keys().next().value;
        used -= lru.get(o); lru.delete(o); ev++;
      }
    }
  }
  return { h: hit / (hit + miss), g: dl / 1073741824, e: ev };
}
 
const seeds = [1,2,3,4,5,6,7,8,9,10];
for (const s of [0.6, 0.8, 1.0, 1.2, 1.5, 2.0, 2.2]) {
  const agg = (m) => {
    let h = 0, g = 0, e = 0;
    for (const sd of seeds) { const r = run(m, s, sd); h += r.h; g += r.g; e += r.e; }
    return { h: h / seeds.length, g: g / seeds.length, e: e / seeds.length };
  };
  const a = agg("url"), b = agg("stable");
  console.log(
    `s=${s}\tURL ${(a.h*100).toFixed(1)}% ${a.g.toFixed(2)}GB\t安定 ${(b.h*100).toFixed(1)}% ${b.g.toFixed(2)}GB\t削減 ${((1-b.g/a.g)*100).toFixed(1)}%`
  );
}

// lib/fetchWithResign.ts
const RESIGNABLE = new Set([401, 403]);
 
/**
 * 署名切れ（401/403）のときだけ一度だけ署名を取り直して再試行します。
 * 404 や 5xx で再署名しても意味がないので、対象を絞ります。
 */
export async function fetchWithResign(
  objectPath: string,
  variantQuery: string,
  sign: (p: string) => Promise<string>
): Promise<Response> {
  const target = `${objectPath}?${variantQuery}`;
  let res = await fetch(await sign(target));
 
  if (RESIGNABLE.has(res.status)) {
    res = await fetch(await sign(target)); // 再署名は1回まで
  }
  return res;
}
 
// 期待する挙動
// 200 → そのまま返る（署名発行1回）
// 403 → 再署名して200（署名発行2回）
// 404 → 再署名せずそのまま404（無駄な発行をしない）