【IT】Webアプリ開発におけるSafari（PC版）対応ポイントまとめ

皆さま
こんにちは

本日は、
SafariでWebアプリを開発・運用する際の注意点を
まとめました。

今回の環境は、
PC：MacBook Air（M1)
フレームワーク：SvelteKit V5

✅ 1. `<input type="time">` が正しく動作しない（PC Safari）

• 症状：ピッカーUIが表示されず、入力が難しい

• 対策：

  • `type="text"` に変更して手入力対応

  • `pattern="[0-2][0-9]:[0-5][0-9]"` を付けてバリデーション

  • `placeholder="例：14:30"` など入力例を明示

  • SafariのPC版以外と分岐

{#if $isPcSafari}
	<!-- 使用時刻（Safari PC用） -->
	<div class="flex-1 min-w-0 mt-4 md:mt-0">
		<label for="used_time" class="block mb-1 text-base font-bold text-gray-700">使用時刻</label>
		<!-- Safari PC版のみ：手入力＋バリデーション -->
		<input
			id="used_time"
			type="text"
			name="used_time"
			bind:value={usedTime}
			pattern="[0-2][0-9]:[0-5][0-9]"
			placeholder="例：14:30"
			required
			class="w-full border rounded px-3 py-2 text-xl"
			inputmode="numeric"
			autocomplete="off"
		/>
	</div>

{:else}
	<!-- 使用時刻（Safari PC以外、Chrome等 -->
	<div class="flex-1 mt-4 md:mt-0">
		<label for="used_time" class="block mb-1 text-base font-bold text-gray-700">使用時刻</label>
		<input
			id="used_time"
			type="time"
			name="used_time"
			required
			class="w-full border rounded px-3 py-2 text-xl"
			max={$todayDate === today ? maxTime : undefined}
		/>
	</div>
{/if}

✅ 2. `new Date('YYYY-MM')` が `Invalid Date` になる（PC Safari）

• 症状：ピッカーUIが表示されず、入力が難しい

• 対策：SafariのPC版は、手動で入力と注釈が表示されるように表示

{#if $isPcSafari}
	<p class="text-sm text-gray-500 mt-1">
		※ Safariでは使用期日を「YYYY-MM」形式で手入力してください。
	</p>
{/if}

✅ 3. `window.open()` がポップアップブロックされやすい

※Safariは特に厳格で、非同期イベント内だと失敗しやすい

• 対策：

  • window.open() をまず即時で実行（ユーザー操作に反応）

  • その後、localStorage にデータを保存し、location.href で遷移

  • 開かなかった場合はアラートを表示

export async function openCsvInNewWindow() {
  // ✅ Safari対応：ユーザー操作直後に空ウィンドウを開いておく
  const newWindow = window.open('', '_blank');
  if (!newWindow) {
    alert('ポップアップがブロックされました。Safariの設定をご確認ください。');
    return;
  }

  // 🔸 データ取得
  const { getAllLogs } = await import('$lib/local-db');
  const logs = await getAllLogs();

  if (!logs || logs.length === 0) {
    newWindow.document.write('<p>CSV表示用のデータが見つかりませんでした。</p>');
    newWindow.document.close();
    return;
  }

  // 🔸 localStorage 経由で渡す
  localStorage.setItem('csvPreviewData', JSON.stringify(logs));

  // ✅ URL遷移（すでに開いているウィンドウで）
  newWindow.location.href = '/csv-preview.html';
}

✅ 4. `IndexedDB` は基本的に動作OK（ただし容量注意）

• 状況：Safariでも動作は安定（v13以降）だが、他ブラウザより保存容量が少ない

• 対策：

  • 定期的なCSV出力を促すUI設計にする

  • ログは短期保存前提（長期保存を避ける設計）

✅ 5. CSSの :hover は iOS Safariで誤反応の可能性

• 症状：タップ操作で :hover が発火し、ボタンなどが押されたままの状態になる

• 対策：:hover を使用する場合は、PCなどhover対応デバイスに限定する

css

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: #333;
  }
}

✅ 6. SafariでのPWA対応まとめ（2025年7月時点）

🔹 iOS Safari（iPhone / iPad）

• Safariの「共有」→「ホーム画面に追加」でPWAとして利用可能

• beforeinstallprompt は使えないため、独自UIで案内が必要

• Service Worker は動作するが、通知・ストレージ制限あり

• :hover の誤反応や window.open() の制限もあり

🔹 Mac Safari（PC）

• manifest.json や Service Worker は認識するが、PWAインストールUIはなし

• ChromeやEdgeのようにスタンドアロン表示は不可

• 現時点では「PWA未対応ブラウザ」として扱うべき

では