Изменения в функциях cache.addAll() и importScripts(), которые появятся в Chrome 71.

Разработчикам, использующим сервис-воркеров и Cache Storage API, следует обратить внимание на два небольших изменения, которые появятся в Chrome 71. Оба изменения приводят реализацию Chrome в большее соответствие со спецификациями и другими браузерами.

Запрет асинхронного importScripts()

importScripts() сообщает вашему основному сервисному рабочему сценарию, что нужно приостановить его текущее выполнение, загрузить дополнительный код с заданного URL-адреса и запустить его до завершения в текущей глобальной области . Как только это будет сделано, основной сценарий сервисного работника возобновит выполнение. importScripts() пригодится, если вы хотите разбить основной сценарий сервис-воркера на более мелкие части по организационным причинам или использовать сторонний код, чтобы добавить функциональность вашему сервис-воркеру.

Браузеры пытаются смягчить возможные проблемы с производительностью, связанные с «загрузкой и запуском некоторого синхронного кода», автоматически кэшируя все, что было получено с помощью importScripts() , а это означает, что после первоначальной загрузки на выполнение импортированного кода требуется очень мало накладных расходов.

Однако, чтобы это работало, браузер должен знать, что после первоначальной установки в сервис-воркер не будет импортировано никакого «неожиданного» кода. Согласно спецификации сервис-воркера , вызов importScripts() должен работать только во время синхронного выполнения сценария сервис-воркера верхнего уровня или, если необходимо, асинхронно внутри обработчика install .

До Chrome 71 работал асинхронный вызов importScripts() вне обработчика install . Начиная с Chrome 71 , эти вызовы вызывают исключение во время выполнения (если тот же URL-адрес не был ранее импортирован в обработчик install ), что соответствует поведению в других браузерах.

Вместо такого кода:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

Код вашего сервис-воркера должен выглядеть так:

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

Устаревшие повторяющиеся URL-адреса, передаваемые в кэш.addAll().

Если вы используете Cache Storage API вместе с сервис-воркером, в Chrome 71 есть еще одно небольшое изменение, чтобы привести его в соответствие с соответствующей спецификацией . Когда один и тот же URL-адрес передается несколько раз при одном вызове cache.addAll() , в спецификации говорится, что обещание, возвращаемое вызовом, должно быть отклонено.

До Chrome 71 это не обнаруживалось, и повторяющиеся URL-адреса фактически игнорировались.

Скриншот предупреждающего сообщения в консоли Chrome
Начиная с Chrome 71, вы увидите предупреждающее сообщение, записанное в консоль.

Это ведение журнала является прелюдией к Chrome 72, где вместо простого предупреждения в журнале дублирующиеся URL-адреса будут приводить к отклонению cache.addAll() . Если вы вызываете cache.addAll() как часть цепочки обещаний, передаваемой в InstallEvent.waitUntil() , что является обычной практикой, этот отказ может привести к сбою установки вашего сервис-воркера.

Вот как вы можете столкнуться с проблемами:

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

Это ограничение применяется только к фактическим URL-адресам, передаваемым в cache.addAll() , и кэширование того, что в конечном итоге представляет собой два эквивалентных ответа с разными URL-адресами, например '/' и '/index.html' , не приведет к отклонению.

Широко протестируйте реализацию своего сервис-воркера

На данный момент сервис-воркеры широко реализованы во всех основных «вечнозеленых» браузерах . Если вы регулярно тестируете свое прогрессивное веб-приложение в нескольких браузерах или у вас есть значительное количество пользователей, которые не используют Chrome, то, скорее всего, вы уже обнаружили несогласованность и обновили свой код. Но на тот случай, если вы не заметили такого поведения в других браузерах, мы хотели объявить об этом изменении, прежде чем переключать поведение Chrome.