Import Maps · ESM · integrity · Safari · Chromium · リモート Mac · 2026
2026 リモート Mac フロント公開検収：
Import Maps とネイティブ ES Modules の Safari／Chromium 差異対照表と三歩チェックリスト
2026.04.16
フロント／モジュール
約 8 分
想定読者：import map と type=module を運用するフロント。WebKit の順序とワーカー は Linux Chromium だけでは抜けやすいです。対照表・三歩・integrity・自動化を整理します。関連：デプロイ後 Safari 検証、Service Worker 検収、Playwright／HAR。
01 import map ロールアウトが検収で落ちる理由
1) ステージングと本番のマップがずれ、Chromium は暖キャッシュで通っても Safari は bare が一斉失敗します。
2) integrity と CDN バイトが非同期にずれ、グラフ全体が止まります。
3) マップだけ外し type=module が bare のみだと白画面のままです。
02 Safari／Chromium 差異対照表（Import Maps・ESM）
差は 解決順、integrity、失敗の見え方です。
| 観点 | Safari／WebKit | Chromium |
|---|---|---|
| マップ順 | 最初の type=module より前に importmap を登録。遅いと無視されやすい。 |
同規則。Network で追いやすい場合あり。 |
| 解決 | 未マップ bare は失敗閉じ。Console を基準に潰す。 | 意味は同じ。差は主にキャッシュ。 |
| integrity | 不一致は拒否。長期プロファイルでは分離も。 | 同様。ログ突合しやすい。 |
| ワーカー | Worker の module はページと別検証。 |
同様。Playwright で入口を分ける。 |
片系譜のみなら キャッシュかマップ JSON を疑います。
03 段階的強化の三歩チェックリスト
04 ローカルプレビューと Playwright の実行要点
CI と Mac で同じコマンドに揃えます。
- ▸Vite：
npx vite preview --host 0.0.0.0 --port 4173 --strictPort→127.0.0.1を両系譜で。絶対 TLS のみなら HTTPS も。 - ▸Playwright：
npx playwright test --project=webkit --project=chromium、共有 CI はPLAYWRIGHT_BROWSERS_PATH=0も検討。HAR／trace。 - ▸Safari： Linux WebKit とずれるときは リモート Mac で短い実機パスを。
- ▸integrity 訓練： 一ファイルだけハッシュをずらし両系譜で拒否→ロールバックが一回で戻るか。
- ▸五： bare とワーカー入口を
webkit／chromiumに最低一 spec ずつ載せてから昇格。
モジュール欠落はリリースブロッカー扱いです。
05 引用できる検収事実
順序： 最初の type=module より前に importmap を置くことを契約化。
integrity： カットオーバー時のバイトと一致。CDN 単独更新を禁止。
自動化： bare とワーカー入口を webkit／chromium で最低一通りずつ回して昇格。
06 FAQ
import map と integrity は両方必要ですか
はい。マップが正しくてもハッシュずれで失敗します。ロールバックはバンドル入口までセットで。
Chromium だけ通る理由は
キャッシュ・ストレージ・ワーカーの差が典型。冷プロファイルで WebKit を再現し、マップをバイト一致で比較します。