Приёмка фронтенда в 2026 году на удалённом Mac:
Import Maps и нативный ESM — таблица Safari и Chromium и три шага постепенного улучшения
2026-import-maps-esm-safari-chromium-remote-mac-checklist.htmlДля кого: команды, которые выкатывают нативные ES-модули с import maps и хотят закрыть разрыв между CI на Chromium и поведением Safari WebKit. Если карта импорта и целостность subresource integrity не согласованы с CDN, пользователи получают тихие ошибки загрузки модулей. Ниже — матрица отличий движков, стратегия progressive enhancement в три шага, политика деградации без карты, а также что проверить в Playwright и в живом Safari на удалённом Mac. Связанные материалы: service worker и кэш в Safari, деплой Vite и Webpack с проверкой WebKit, esbuild, SWC и monorepo на арендованном Mac. Быстрые переходы к бизнес-страницам: главная, аренда или покупка, помощь.
01 Три типичных сбоя приёмки
(1) Разрешение спецификаторов. scopes в JSON меняют базу для вложенных путей; WebKit и Chromium по-разному показывают цепочку в консоли, а ошибка «failed to resolve» приходит уже после редиректа CDN. Без зафиксированного канонического origin в карте легко сломать только один движок. (2) Integrity. Атрибут integrity на <script type="module"> сравнивает байты ответа с ожидаемым sha384; смена сжатия или порядка заголовков на edge даёт ложный отказ, который в сетевой панели выглядит как обычный 200. (3) Отсутствие карты. Если продукт опирается на bare-импорты без fallback-сборки, клиент без import maps получает мгновенный синтаксический провал — это нельзя чинить только флагами сервера.
Ручная проверка только в Chromium скрывает расхождения кэша модулей и политики смешанного контента в Safari. Сценарий на удалённом Mac с парой браузеров снимает риск подписать релиз по логам Linux-агента.
02 Таблица: Safari WebKit и Chromium
Сверяйте строки после любой правки importmap, префикса CDN или заголовков Content-Type для .mjs. Оба движка поддерживают карты в стабильных ветках; расхождения — в деталях кэша и диагностики.
| Тема | Safari / WebKit | Chromium |
|---|---|---|
| Карта и порядок | Несколько элементов importmap на документ ограничены спецификацией; ошибка дублирования видна в консоли, но легко теряется при гидрации SPA. |
Те же правила; DevTools быстрее показывает итоговую таблицу соответствий в панели Application. |
| Разрешение и scopes | Учитывается иерархия scopes; проверяйте относительные URL от базы scope, а не только от корня сайта. |
Аналогично; различия в раннем кэше модулей иногда маскируются горячей перезагрузкой. |
| Integrity модуля | Несовпадение хэша блокирует выполнение без явного текста в UI — смотрите консоль и статус в колонке ресурса. | Поведение согласовано; удобнее фильтровать по типу module и initiator. |
| Инструменты | Web Inspector: цепочка модулей и ошибки импорта; для тикетов приложите экспорт HAR по инструкции из смежных статей. | DevTools Sources и Network; при автоматизации опирайтесь на проекты webkit и chromium в Playwright. |
| Деградация | Держите билд с относительными путями или второй entry без bare-импорта; тестируйте переключатель фичи на стейджинге. | Тот же контракт; не полагайтесь на экспериментальные флаги в headless как на прокси продакшена. |
Цифры для отчёта: фиксируйте алгоритм sha384 в runbook; держите не более одной активной карты на маршрут приложения; целевое время полного цикла проверки двух браузеров на арендованном Mac — до пятнадцати минут при готовом стейджинге.
03 Три шага progressive enhancement перед релизом
Чек-лист в три шага
- Заморозить контракт модулей. Зафиксируйте JSON карты, список bare-имён, базовые URL для
scopes, ожидаемые значенияintegrityи ответственность CDN за байт-в-байт совпадение артефакта. - Сопоставить Safari и Chromium на железе. На удалённом Mac откройте одну и ту же сборку с холодным кэшем, сравните консоль и загрузку модулей; зафиксируйте отличия до merge в основную ветку.
- Автоматизировать минимальный регресс. Прогоните Playwright с проектами
webkitиchromiumна импорт критического модуля и отказ integrity; сохраните trace и ссылку на коммит в задаче релиза.
Стратегия деградации: при выключенной карте импорта приложение должно открывать экран с понятной ошибкой или подключать собранный бандл по флагу; не оставляйте пользователя на пустой странице с единственной строкой в консоли. Согласуйте политику с материалом про service worker, если модули пересекаются с офлайн-кэшем.
04 Локальное превью, Playwright и Safari
Пять исполняемых шагов перед выкладкой в общий стенд:
- Статическая выкладка:
python3 -m http.server 8080 --bind 127.0.0.1из каталогаdist— проверяет корректность MIME и относительных путей без прокси. - Локальный сервер с заголовками:
npx serve -l 4173 --no-clipboard dist— удобен для быстрых сравнений Safari и Chromium на одном порту. - Vite preview:
npx vite preview --host 127.0.0.1 --port 4173 --strictPort— воспроизводит поведение прод-сборки с теми же хэшами файлов. - Playwright:
npx playwright test --project=webkit --project=chromium— минимальный контроль паритета; при флаках добавьте повтор и сохранение trace:--trace on-first-retry. - Живой Safari: после зелёного CI откройте ту же сборку вручную на удалённом Mac и сверьте консоль с логом Chromium; артефакты оформляйте по гайду trace и HAR.
Headless WebKit в CI не гарантирует совпадение с системным Safari по версии движка — ручной шаг на арендованном Mac остаётся частью подписи релиза.
05 FAQ
Нужен ли отдельный стейджинг без import maps?
Да: один URL с картой и один без неё показывают реальную деградацию и защищают от сюрпризов при ошибочном деплое JSON.
Как отличить сбой integrity от сетевой ошибки?
По сообщению в консоли о несоответствии хэша при 200 OK; сверьте байты файла на CDN с эталоном из билда и пересчитайте sha384.
06 Дальше по сайту
Закажите удалённый Mac, когда команде нужен паритет Safari и Chromium на Apple Silicon без закупки железа. Откройте тарифы, раздел помощи по доступу, затем аренду или покупку. Полный список материалов — в блоге фронтенда; стартовая точка — главная.
Аренда Mac для приёмки модулей в Safari и Chromium
Проверьте карту импорта и целостность модулей на реальном WebKit, согласуйте trace Playwright и закройте релиз без сюрпризов для пользователей macOS. Тарифы и помощь доступны без входа; аренда или покупка — когда CI не воспроизводит Safari.