1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
---
title: ServiceWorkerContainer.register()
slug: Web/API/ServiceWorkerContainer/register
translation_of: Web/API/ServiceWorkerContainer/register
---
<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
<p><strong><code>register()</code></strong> метод {{domxref("ServiceWorkerContainer")}} интерфейса который создаёт и обновляет <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="The ServiceWorkerRegistion interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a> для указанного <code>URL js скрипта</code>.</p>
<p>Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает <code>ServiceWorkerRegistration</code>, он возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: js notranslate">ServiceWorkerContainer.register(scriptURL, options)
.then(function(ServiceWorkerRegistration) { ... });</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>scriptURL</code></dt>
<dd>URL скрипта service worker - а.</dd>
<dt><code>options</code> <code>{{optional_inline}}</code></dt>
<dd>Опции — это объект необходимый для регистрации service worker-a. В данный момент доступные опции:
<ul>
<li><code>scope</code>: {{domxref("USVString")}} представляет собой URL, который определяет scope service worker-a; Какой диапазон URL может контролировать service worker. Это обычно относительный URL. Значение по умолчанию — это URL, который соответствует корню, т.е. './', используя директорию расположения js скрипта service worker-а как основу.</li>
</ul>
</dd>
</dl>
<h3 id="Возвращает">Возвращает</h3>
<p>{{domxref("Promise")}} который резолвится в {{domxref("ServiceWorkerRegistration")}} объект.</p>
<h2 id="Пример_использования">Пример использования</h2>
<p>Примеры кода, приведённые ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.</p>
<p>Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать <code>example.com/index.html</code> и страницы, расположенные "глубже", например <code>example.com/product/description.html</code>.</p>
<pre class="brush: js notranslate">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-ы');
}</pre>
<p>Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p>
<pre class="brush: js notranslate">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-ы.');
}</pre>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Первичное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat("api.ServiceWorkerContainer.register")}}</p>
|
