2026 Acceptation front sur Mac distant :
Import Maps et modules ES natifs — tableau Safari / Chromium et porte progressive en trois temps
Public : équipes import maps et type=module (Vite/webpack). La CI Chromium seule oublie l’ordre WebKit et les workers. Voici tableau, porte en trois étapes, integrity, repli, commandes. Liens : déploiement Safari, Service Worker, blog front.
01 Pourquoi les bascules import map échouent à l’acceptation
1) Préproduction et production ne servent pas la même carte JSON : importations nues en échec sous Safari, Chromium encore servi par un cache tiède.
2) integrity et rotation CDN désynchronisées : un hachage faux bloque tout le graphe avec peu de retour utilisateur.
3) Repli sans rebundler : entrées type=module encore nues après retrait de la carte — écran blanc jusqu’à la console WebKit.
02 Tableau Safari / WebKit et Chromium
Import maps et ES modules sont là des deux côtés ; les écarts : résolution, integrity, outillage.
| Sujet | Safari / WebKit | Chromium |
|---|---|---|
| Carte vs premier module | La carte avant le premier type=module ; sinon ignorée, message parfois léger. |
Idem ; l’échec apparaît tôt au réseau. |
| Importations nues | Non mappé ⇒ échec ; relire la console après changement de chemins. | Même sémantique ; écart souvent lié au cache. |
| integrity / SRI | Hachage faux ⇒ rejet ; profils longs, effets ITP possibles. | Mêmes règles ; logs plus lisibles. |
| Workers et périmètre | Valider Worker(..., { type: 'module' }) hors carte page. |
Pareil ; cas Playwright sur l’entrée worker. |
| Signal outil | Web Inspector ; Mac distant utile pour reproduire le réseau client. | DevTools + chrome://version si canary. |
Un seul moteur vert ? Cache ou carte avant bug moteur. Amont réseau : HTTP/3 QUIC.
03 Porte progressive en trois étapes
- Base sans carte. URLs relatives ou bundle haché pour survivre au rollback de carte.
- Double moteur. Mac distant : même build préprod, caches froids, puis fenêtre privée.
- Integrity + repli. Coquille, JSON carte et actifs versionnés ensemble ; commutateur documenté vers bundle historique si alarme hachage.
Croisez déploiement et SW sur le même ticket.
04 Prévisualisation locale, Playwright et cinq contrôles
Même commandes CI et shell Mac.
- ▸Vite :
npx vite preview --host 0.0.0.0 --port 4173 --strictPort→http://127.0.0.1:4173; HTTPS si la carte impose des origines TLS. - ▸Webpack :
npx webpack serve --host 0.0.0.0 --port 8080, sans--client-progressen CI. - ▸Playwright :
npx playwright test --project=webkit --project=chromium,PLAYWRIGHT_BROWSERS_PATH=0; traces si échec seulement. - ▸Safari :
playwright-webkitsur macOS ; Mac distant si WebKit Linux ≠ Safari bureau. - ▸Integrity : mauvais hachage en préprod ⇒ refus des deux moteurs ; repli vers entrée historique en un reload.
Traitez les modules manquants comme des bloquants release : la console est votre dernier filet, pas votre premier indicateur qualité.
05 Faits opposables pour clôturer un ticket
Enregistrez chaque importmap avant le premier script type=module exécuté ; considérez cet ordre comme partie du contrat public.
Associez chaque valeur integrity aux octets réellement servis au moment du basculement ; ne faites pas tourner le CDN sans faire monter la version de carte dans le même train.
Exécutez au moins une spécification Playwright par importation nue et par entrée worker sur les projets webkit et chromium avant de promouvoir la build.
Archivez pour chaque release le JSON de carte, le fragment HTML qui l’embarque et la liste des hachages attendus ; en audit, ces trois artefacts doivent remonter ensemble ou pas du tout.
06 FAQ
Les import maps entrent-elles en conflit avec integrity ?
Elles se composent : carte correcte mais hachage faux échoue toujours. Versionnez tout ensemble et répétez le repli qui enlève la carte tout en restaurant les imports via bundle.
Pourquoi Chromium passe et pas Safari ?
Caches HTTP, stockages partitionnés et graphes workers diffèrent. Reproduisez sur WebKit froid et comparez l’objet CDN à la carte JSON octet pour octet.
Playwright suffit-il pour la QA Safari ?
Il couvre erreurs répétitives et captures d’écran utiles au changelog. Conservez une passe humaine sur Mac distant lorsque certificats, proxys système ou extensions Safari modifient le graphe de modules réellement chargé.
07 Conversion
Besoin de parité Safari et Chromium sur Apple Silicon ? Réservez un Mac distant, parcourez l’accueil, les tarifs, l’aide sans compte, puis achat ou location pour une fenêtre d’acceptation dédiée aux modules.
Louez un Mac distant pour signer vos Import Maps
Exécutez Safari et Chromium sur du matériel Apple réel, attachez les journaux Playwright et fermez les tickets release sans expédier de portables. Parcourez l’accueil, le centre d’aide et les tarifs, puis passez par achat ou location lorsque vous avez besoin d’un créneau WebKit dédié.