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
|
---
title: ServiceWorkerContainer.register()
slug: Web/API/ServiceWorkerContainer/register
translation_of: Web/API/ServiceWorkerContainer/register
---
<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
<p>Die <strong><code>register()</code></strong> Methode der <code><a href="/de/docs/Web/API/ServiceWorkerContainer">ServiceWorkerContainer</a></code> Schnittstelle erstellt oder aktualisiert eine <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> für die gegebene <code>scriptURL</code>. </p>
<p>Nach erfolgreicher Registrierung verwendet die Service Worker Registrierung die übergebene <code>scriptURL</code> und ihren Bereich für den Navigationsabgleich. Die Methode gibt ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> zurück, welches zu einer <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> aufgelöst wird. Die Funktion kann bedingungslos aufgerufen werden - Es muss vorher nicht kontrolliert werden, ob eine aktive Registrierung vorhanden ist.</p>
<p>Es entstehen häufig Verwirrungen über die Bedeutung und Verwendung des <code>scope</code>. Da ein ServiceWorker keinen größeren Bereich abdecken kann als seinen einen Pfad, sollte man den Parameter nur verwenden, wenn man einen kleineren Bereich als den Standardbereich abdecken will.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js">ServiceWorkerContainer.register(scriptURL, options).then(function(ServiceWorkerRegistration) {
// Do something with ServiceWorkerRegistration.
});</pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>scriptURL</code></dt>
<dd>Die Url des Service Workers Scripts.</dd>
<dt><code>options</code> <code>{{optional_inline}}</code></dt>
<dd>Ein Object, welches verschiedene Registrierungsoptionen beinhaltet. Zur Zeit stehen folgende Optionen zur Verfügung:
<ul>
<li><code>scope</code>: Ein <code><a href="/de/docs/Web/API/USVString">USVString</a></code>, welcher eine URL darstellt, die zur Festlegung des Bereiches des Service Workers verwendet wird. Dies ist normalerweise eine relative URL. Der Standardwert ist die URL, die man bekommen würde, wenn man './' mit dem Pfad des Service Worker Scripts verwenden würde.</li>
</ul>
</dd>
</dl>
<h3 id="Rückgabewert">Rückgabewert</h3>
<p>Ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, welches zu einem <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> Objekt aufgelöst wird.</p>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: js">if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
document.querySelector('#status').textContent = 'succeeded';
}).catch(function(error) {
document.querySelector('#status').textContent = error;
});
} else {
// Der verwendete Browser unterstützt Service Worker nicht.
var aElement = document.createElement('a');
aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
aElement.textContent = 'unavailable';
document.querySelector('#status').appendChild(aElement);
}</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initiale Definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatiblität">Browserkompatiblität</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>Basic support</td>
<td>{{CompatChrome(40.0)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}</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>Basic support</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>
|
