ServiceWorkerContainer.register()

scriptURL

URL скрипта service worker - а.

options Необязательный

Опции — это объект необходимый для регистрации service worker-a. В данный момент доступные опции:

• scope: USVString представляет собой URL, который определяет scope service worker-a; Какой диапазон URL может контролировать service worker. Это обычно относительный URL. Значение по умолчанию — это URL, который соответствует корню, т.е. './', используя директорию расположения js скрипта service worker-а как основу.

Promise (en-US) который резолвится в ServiceWorkerRegistration объект.

Примеры кода, приведённые ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.

Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать example.com/index.html и страницы, расположенные "глубже", например example.com/product/description.html.

if ("serviceWorker" in navigator) {
  // Регистрация service worker-а, расположенного в корне сайта
  // за счёт использования дефолтного scope (не указывая его)
  navigator.serviceWorker
    .register("/sw.js")
    .then(function (registration) {
      console.log("Service worker зарегистрирован:", registration);
    })
    .catch(function (error) {
      console.log("Ошибка при регистрации service worker-а:", error);
    });
} else {
  // Текущий браузер не поддерживает service worker-ы.
  console.log("Текущий браузер не поддерживает service worker-ы");
}

Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице example.com/product/description.html, то scope ./ будет означать, что service worker работает только со страницами внутри example.com/product. Если необходимо зарегистрировать service worker на example.com/product/description.html, и вы хотите, чтобы он обслуживал и корень, example.com, то scope лучше не указывать совсем, как в примере выше.

if ("serviceWorker" in navigator) {
  // Регистрация service worker-а, расположенного в корне сайта
  // с указанием более строгого scope
  navigator.serviceWorker
    .register("/sw.js", { scope: "./" })
    .then(function (registration) {
      console.log("Service worker зарегистрирован:", registration);
    })
    .catch(function (error) {
      console.log("Ошибка при регистрации service worker-а:", error);
    });
} else {
  console.log("Текущий браузер не поддерживает service worker-ы.");
}