diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/api/serviceworkercontainer | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pt-br/web/api/serviceworkercontainer')
| -rw-r--r-- | files/pt-br/web/api/serviceworkercontainer/index.html | 175 | ||||
| -rw-r--r-- | files/pt-br/web/api/serviceworkercontainer/register/index.html | 140 |
2 files changed, 315 insertions, 0 deletions
diff --git a/files/pt-br/web/api/serviceworkercontainer/index.html b/files/pt-br/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..45a4406e9d --- /dev/null +++ b/files/pt-br/web/api/serviceworkercontainer/index.html @@ -0,0 +1,175 @@ +--- +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">O <code>ServiceWorkerContainer</code> é a interface de <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. + navigation.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>{{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)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(27)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40)}}</td> + <td>{{CompatChrome(40)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOperaMobile(27)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p> + +<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/pt-br/web/api/serviceworkercontainer/register/index.html b/files/pt-br/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..cb27ddc843 --- /dev/null +++ b/files/pt-br/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,140 @@ +--- +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">O método <strong><code>register()</code></strong>da interface {{domxref("ServiceWorkerContainer")}} cria ou atualiza um {{domxref("ServiceWorkerRegistration")}} passado em <code>scriptURL</code>.</span></p> + +<p>Em caso de sucesso, um registro de service worker vincula o URL do script fornecido ao es<em>copo</em>, que é usado posteriormente para a navegação correspondente. Você pode chamar esse método incondicionalmente da página controlada. Ou seja, você não precisa primeiro verificar se há um registro ativo.</p> + +<p>Há uma frequente confusão em relação ao significado e uso do escopo. Uma vez que um service worker não pode ter um escopo mais amplo do que sua própria localização, use apenas a opção `scope` quando precisar de um escopo mais limitado do que o padrão.</p> + +<h2 id="Síntaxe">Síntaxe</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>A URL do script service worker.</dd> + <dt><code>options</code> <code>{{optional_inline}}</code></dt> + <dd>Um objeto contendo as opções do registro. Atualmente as opções disponíveis são: + <ul> + <li><code>scope</code>: Uma {{domxref("USVString")}} representando uma URL que define o registro do escopo de um service worker's ; ou seja, o alcance das URLs que o service worker pode controlar. É geralmente uma URL relativa. O valor padrão é o URL que você obtém se você resolvesse './' usando a localização da página web como base. Não é, como customa-se acreditar, relativo à localização do service worker. Veja as seções de <a href="#Example">Exemplos</a> para mais informações sobre como isso funciona.</li> + </ul> + </dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Um {{domxref("Promise")}} que resolve com um objeto {{domxref("ServiceWorkerRegistration")}}.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Os exemplos descritos escrito aqui deve ser tomado em conjunto para obter um melhor entendimento de como escopos do service workers são aplicados a uma página. </p> + +<p>O exemplo a seguir usa o valor padrão de<code>scope</code> (ao omití-lo). O service worker neste caso irá controlar<code>example.com/index.html</code> bem como páginas abaixo, como <code>example.com/product/description.html</code>.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // Registra um service worker hospeadado na raiz do + // site usando o escopo padrão + navigator.serviceWorker.register('/sw.js').then(function(registration) { + console.log('Service worker registrado com sucesso:', registration); + }).catch(function(error) { + console.log('Falha ao Registrar o Service Worker:', error); + }); +} else { + console.log('Service workers não suportado!'); +}</pre> + +<p>O código a seguir, se incluído em uma página na raiz de um site, seria aplicado exatamente às mesmas páginas, como no exemplo acima. Lembre-se de que o escopo, quando incluído, usa a localização da página como base. Alternativamente, se esse código foi incluído em uma página <code>example.com/product/description.html</code>, o escopo de<code>'./'</code> significa que o escopo que o service worker seria aplicado somente aos recursos de<code>example.com/product</code>. Se precisassemos de registrar um service worker em <code>example.com/product/description.html</code> aplicado a todoo <code>example.com</code>, deixaríamos o escopo acima.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // Registre um service worker hospeado na raiz do + // site usando um escopo mais restritivo. + navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) { + console.log('Service worker registrado com sucesso:', registration); + }).catch(function(error) { + console.log('Service worker falhou ao registrar:', error); + }); +} else { + console.log('Service workers não é suportado pelo navegador!.'); +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</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="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</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)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(27)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40)}}</td> + <td>{{CompatChrome(40)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOperaMobile(27)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Os Service workers (e <a href="/en-US/docs/Web/API/Push_API">Push</a>) foram desativados no <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 e 52 Extended Support Releases</a> (ESR.)</p> |
