diff options
Diffstat (limited to 'files/es/web/api/serviceworkercontainer')
| -rw-r--r-- | files/es/web/api/serviceworkercontainer/index.html | 127 | ||||
| -rw-r--r-- | files/es/web/api/serviceworkercontainer/register/index.html | 92 |
2 files changed, 219 insertions, 0 deletions
diff --git a/files/es/web/api/serviceworkercontainer/index.html b/files/es/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..36eca36006 --- /dev/null +++ b/files/es/web/api/serviceworkercontainer/index.html @@ -0,0 +1,127 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary">The <code>ServiceWorkerContainer</code> interface of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</span></p> + +<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code>null</code> during a force-refresh request (<em>Shift</em> + refresh) or if there is no active worker.</dd> +</dl> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt> + <dd>Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt> + <dd>Fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.</dd> + <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt> + <dd>Fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd> + <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt> + <dd>Fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt> + <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt> + <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL. If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <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>. </dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt> + <dd>Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a <code>ServiceWorkerContainer</code> in an array. If the method can't return {{domxref("ServiceWorkerRegistration")}} objects, it returns a <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>. </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // Register a service worker hosted at the root of the + // site using the default scope. + navigator.serviceWorker.register('/sw.js').then(function(registration) { + console.log('Service worker registration succeeded:', registration); + + // At this point, you can optionally do something + // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration + }).catch(function(error) { + console.log('Service worker registration failed:', error); + }); + + // Independent of the registration, let's also display + // information about whether the current page is controlled + // by an existing service worker, and when that + // controller changes. + + // First, do a one-off check if there's currently a + // service worker in control. + if (navigator.serviceWorker.controller) { + console.log('This page is currently controlled by:', navigator.serviceWorker.controller); + } + + // Then, register a handler to detect when a new or + // updated service worker takes control. + navigator.serviceWorker.oncontrollerchange = function() { + console.log('This page is now controlled by:', navigator.serviceWorker.controller); + }; +} else { + console.log('Service workers are not supported.'); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/es/web/api/serviceworkercontainer/register/index.html b/files/es/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..c5b1d3ed8a --- /dev/null +++ b/files/es/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,92 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary">El método <strong><code>register()</code></strong>de la interfaz {{domxref("ServiceWorkerContainer")}} crea o actualiza un {{domxref("ServiceWorkerRegistration")}} para un <code>scriptURL</code>. dado</span></p> + +<p>Si tiene éxito, el registro de un "service worker" relaciona la URL del script proporcionada con un ámbito, que posteriormente se utiliza para la coincidencia de navegación. Puede llamar a este método incondicionalmente desde la página controlada. Es decir, no necesita verificar primero si hay un registro activo.</p> + +<p>Existe una confusión frecuente en torno al significado y uso del alcance. Dado que un trabajador de servicio no puede tener un alcance más amplio que su propia ubicación, solo use la opción de ámbito cuando necesite un alcance que sea más estrecho que el predeterminado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">ServiceWorkerContainer.register(scriptURL, options) + .then(function(ServiceWorkerRegistration) { ... });</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>scriptURL</code></dt> + <dd>La URL del script de trabajador de servicio.</dd> + <dt><code>options</code> <code>{{optional_inline}}</code></dt> + <dd>Un objeto que contiene opciones de registro. Las opciones disponibles actualmente son: + <ul> + <li><code>alcance</code>: {{domxref("USVString")}} representa una URL que define el alcance de registro de un "service worker"; es decir, qué rango de URL puede controlar un "service worker". Esto es generalmente una URL relativa. El valor predeterminado es la URL que obtendría si resolviera './' utilizando la ubicación de la página web como base. No es, como se cree comúnmente, relativo a la ubicación del "service worker". Vea la sección de Ejemplos para más información sobre cómo funciona.</li> + </ul> + </dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>A {{domxref("Promise")}} that resolves with a {{domxref("ServiceWorkerRegistration")}} object.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>The examples described here should be taken together to get a better understanding of how service workers scope applies to a page.</p> + +<p>The following example uses the default value of <code>scope</code> (by omitting it). The service worker in this case will control <code>example.com/index.html</code> as well as pages underneath it, like <code>example.com/product/description.html</code>.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // Register a service worker hosted at the root of the + // site using the default scope. + navigator.serviceWorker.register('/sw.js').then(function(registration) { + console.log('Service worker registration succeeded:', registration); + }).catch(function(error) { + console.log('Service worker registration failed:', error); + }); +} else { + console.log('Service workers are not supported.'); +}</pre> + +<p>The following code, if included in a page at the root of a site, would apply to exactly the same pages as the example above. Remember the scope, when included, uses the page's location as its base. Alternatively, if this code were included in a page at <code>example.com/product/description.html</code>, the scope of <code>'./'</code> would mean that the service worker only applies to resources under <code>example.com/product</code>. If I needed to register a service worker on <code>example.com/product/description.html</code> that applied to all of <code>example.com</code>, I would leave off the scope as above.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // Register a service worker hosted at the root of the + // site using a more restrictive scope. + navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) { + console.log('Service worker registration succeeded:', registration); + }).catch(function(error) { + console.log('Service worker registration failed:', error); + }); +} else { + console.log('Service workers are not supported.'); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.register")}}</p> +</div> |