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-ы.');
}