Reactで、タブのタイトルとアイコンに未読の件数を出す方法

export function formatCount(count: number) {
  return count > 99 ? '99+' : String(count);
}

export function UnreadTitle({ count, title }: { count: number; title: string }) {
  // <title> の中身は文字列1つにする
  const text = count > 0 ? `(${formatCount(count)}) ${title}` : title;
  return <title>{text}</title>;
}

import { formatCount } from './UnreadTitle';

const SIZE = 32;

export function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 別オリジンの画像は CORS で読み込む
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`画像を読み込めません: ${src}`));
    img.src = src;
  });
}

export function drawBadgeIcon(base: HTMLImageElement, count: number): string {
  const canvas = document.createElement('canvas');
  canvas.width = SIZE;
  canvas.height = SIZE;
  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('canvas に描けません');

  ctx.drawImage(base, 0, 0, SIZE, SIZE);

  const label = formatCount(count);
  ctx.font = `bold ${label.length === 1 ? 20 : 15}px sans-serif`;
  const width = Math.max(20, ctx.measureText(label).width + 6);
  const height = 20;
  const x = SIZE - width;
  const y = 0;

  // 右上に、数字の幅に合わせた角丸の四角を描く
  ctx.fillStyle = '#d85878';
  ctx.beginPath();
  ctx.roundRect(x, y, width, height, height / 2);
  ctx.fill();

  ctx.fillStyle = '#ffffff';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(label, x + width / 2, y + height / 2 + 1);

  return canvas.toDataURL('image/png');
}

import { useEffect } from 'react';
import { drawBadgeIcon, loadImage } from './drawBadgeIcon';

function getIconLink() {
  return document.querySelector<HTMLLinkElement>('link[rel="icon"]');
}

export function useFaviconBadge(count: number, baseHref: string) {
  useEffect(() => {
    const link = getIconLink();
    if (!link) return;
    if (count <= 0) {
      link.href = baseHref;
      return;
    }
    let ignore = false;
    loadImage(baseHref)
      .then((img) => {
        if (!ignore) link.href = drawBadgeIcon(img, count);
      })
      .catch((error) => {
        console.warn('ファビコンにバッジを描けません', error);
      });
    return () => {
      ignore = true; // 古い件数の描画が、あとから上書きしないようにする
    };
  }, [count, baseHref]);

  // 画面から外れたら、元のアイコンに戻す
  useEffect(() => {
    return () => {
      const link = getIconLink();
      if (link) link.href = baseHref;
    };
  }, [baseHref]);
}

import { useState } from 'react';
import { UnreadTitle } from './UnreadTitle';
import { useFaviconBadge } from './useFaviconBadge';

export function Inbox({ iconHref = '/favicon.png' }: { iconHref?: string }) {
  const [unread, setUnread] = useState(0);
  useFaviconBadge(unread, iconHref);

  return (
    <main>
      <UnreadTitle count={unread} title="猫のメモ" />
      <h1>猫のメモ</h1>
      <p className="unread">
        未読 <output data-testid="unread">{unread}</output> 件
      </p>
      <button onClick={() => setUnread((n) => n + 1)}>新着を1件受け取る</button>
      <button onClick={() => setUnread(0)}>すべて既読にする</button>
    </main>
  );
}

<title>猫のメモ</title>
<link rel="icon" type="image/png" href="/favicon.png">