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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
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>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Начальная поддержка</td>
<td>{{CompatChrome(40.0)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>24</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Начальная поддержка</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("44.0") }}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(40.0)}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Использование Service worker ( и <a href="/en-US/docs/Web/API/Push_API">Push</a>) приостановлено в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
|
