diff options
Diffstat (limited to 'files/ko/web/api/serviceworkerglobalscope')
4 files changed, 382 insertions, 0 deletions
diff --git a/files/ko/web/api/serviceworkerglobalscope/clients/index.html b/files/ko/web/api/serviceworkerglobalscope/clients/index.html new file mode 100644 index 0000000000..ccc6ab78a8 --- /dev/null +++ b/files/ko/web/api/serviceworkerglobalscope/clients/index.html @@ -0,0 +1,55 @@ +--- +title: ServiceWorkerGlobalScope.clients +slug: Web/API/ServiceWorkerGlobalScope/clients +translation_of: Web/API/ServiceWorkerGlobalScope/clients +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>{{domxref("ServiceWorkerGlobalScope")}} 인터페이스의 <strong><code>clients</code></strong> 읽기 전용 속성은 서비스 워커와 관련된 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Clients" title="The ServiceWorkerClients interface of the ServiceWorker API represents a container for a list of ServiceWorkerClient objects."><code>Clients</code></a> 객체를 반환한다.</p> + +<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2> + +<pre class="syntaxbox" style="font-size: 14px;">swClients = self.clients +</pre> + +<h3 id="Value">Value</h3> + +<p>특정한 워커와 관련된 {{domxref("Clients")}} 객체.</p> + +<h2 id="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Specifications</h2> + +<div></div> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Specification</span></font></th> + <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Status</span></font></th> + <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Comment</span></font></th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#service-worker-global-scope-clients', 'ServiceWorkerRegistration.clients')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.<br> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerGlobalScope.clients")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/ko/web/api/serviceworkerglobalscope/index.html b/files/ko/web/api/serviceworkerglobalscope/index.html new file mode 100644 index 0000000000..3f4115cbab --- /dev/null +++ b/files/ko/web/api/serviceworkerglobalscope/index.html @@ -0,0 +1,152 @@ +--- +title: ServiceWorkerGlobalScope +slug: Web/API/ServiceWorkerGlobalScope +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerGlobalScope + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerGlobalScope +--- +<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> + +<p>The <code>ServiceWorkerGlobalScope</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the global execution context of a service worker.</p> + +<p>Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.</p> + +<p>Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.</p> + +<p>Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.</p> + +<p>This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</p> + +<p>{{InheritanceDiagram(700, 85, 20)}}</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt> + <dd>Contains the {{domxref("Clients")}} object associated with the service worker.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt> + <dd>Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt> + <dd>Contains the {{domxref("CacheStorage")}} object associated with the service worker.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event">activate</a></code></dt> + <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.</dd> + <dt><code>fetch</code></dt> + <dd>Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event">install</a></code></dt> + <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event">message</a></code></dt> + <dd>Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a>, corresponding to the controlled page.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event">notificationclick</a></code></dt> + <dd>Occurs when a user clicks on a displayed notification.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.</dd> + <dt><code>notificationclose</code></dt> + <dd>Occurs — when a user closes a displayed notification.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/push_event">push</a></code></dt> + <dd>Occurs when a server push notification is received.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event">pushsubscriptionchange</a></code></dt> + <dd>Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).<br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.</dd> + <dt><code>sync</code></dt> + <dd>Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available. <br> + Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt> + <dd>Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.</dd> +</dl> + +<p><code>ServiceWorkerGlobalScope</code> implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:</p> + +<dl> + <dt>{{domxref("GlobalFetch.fetch()")}}</dt> + <dd>Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the <code>fetch</code> event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.</p> + +<p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p> + +<pre class="brush: js">self.addEventListener('fetch', function(event) { + console.log('Handling fetch event for', event.request.url); + + event.respondWith( + caches.match(event.request).then(function(response) { + if (response) { + console.log('Found response in cache:', response); + + return response; + } + console.log('No response found in cache. About to fetch from network...'); + + return fetch(event.request).then(function(response) { + console.log('Response from network is:', response); + + return response; + }, function(error) { + console.error('Fetching failed:', error); + + throw error; + }); + }) + ); +});</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', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/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="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html b/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html new file mode 100644 index 0000000000..685d5c99d2 --- /dev/null +++ b/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html @@ -0,0 +1,104 @@ +--- +title: 'ServiceWorkerGlobalScope: notificationclick event' +slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event +translation_of: Web/API/ServiceWorkerGlobalScope/notificationclick_event +--- +<div>{{APIRef}}</div> + +<p><code>notificationclick</code> 이벤트는 <span style="line-height: 19.0909080505371px;">{{domxref("ServiceWorkerRegistration.showNotification()")}} 에 의해 발생한 시스템 notification 이 클릭되었음을 나타내기 위해 </span>발생된다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"></th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("NotificationEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler</th> + <td><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick">onnotificationclick</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> 메소드 내에서 <code>notificationclick</code> 이벤트를 사용할 수 있다:</p> + +<pre class="brush: js">self.addEventListener('notificationclick', function(event) { + console.log('On notification click: ', event.notification.tag); + event.notification.close(); + + // This looks to see if the current is already open and + // focuses if it is + event.waitUntil(clients.matchAll({ + type: "window" + }).then(function(clientList) { + for (var i = 0; i < clientList.length; i++) { + var client = clientList[i]; + if (client.url == '/' && 'focus' in client) + return client.focus(); + } + if (clients.openWindow) + return clients.openWindow('/'); + })); +}); +</pre> + +<p>또는 <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick">onnotificationclick</a></code> 이벤트 핸들러 속성을 사용할 수 있다:</p> + +<pre class="brush: js">self.onnotificationclick = function(event) { + console.log('On notification click: ', event.notification.tag); + event.notification.close(); + + // This looks to see if the current is already open and + // focuses if it is + event.waitUntil(clients.matchAll({ + type: "window" + }).then(function(clientList) { + for (var i = 0; i < clientList.length; i++) { + var client = clientList[i]; + if (client.url == '/' && 'focus' in client) + return client.focus(); + } + if (clients.openWindow) + return clients.openWindow('/'); + })); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerGlobalScope.notificationclick_event")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> + <li><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></li> +</ul> diff --git a/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html b/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html new file mode 100644 index 0000000000..a6c3e50e96 --- /dev/null +++ b/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html @@ -0,0 +1,71 @@ +--- +title: ServiceWorkerGlobalScope.skipWaiting() +slug: Web/API/ServiceWorkerGlobalScope/skipWaiting +translation_of: Web/API/ServiceWorkerGlobalScope/skipWaiting +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary">{{domxref("ServiceWorkerGlobalScope")}} 의 <strong><code>ServiceWorkerGlobalScope.skipWaiting()</code></strong> 메소드는 waiting 상태의 서비스 워커를 active 상태의 서비스 워커로 변경하도록 강제한다.</span></p> + +<p>근본적인 서비스 워커에 대한 업데이트들이 현재의 클라이언트와 다른 모든 active 클라이언트들에게 즉시 적용되도록 하기 위해 {{domxref("Clients.claim()")}} 과 이 메소드를 사용한다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">ServiceWorkerGlobalScope.skipWaiting().then(function() { + //Do something +});</pre> + +<h3 id="Returns">Returns</h3> + +<p><code>undefined</code> 로 즉시 resolve 되는 {{jsxref("Promise")}}</p> + +<h2 id="Example">Example</h2> + +<p>서비스 워커가 실행되는 동안 언제라도 <code>self.skipWaiting()</code> 는 호출될 수 있지만, 이것은 <code>waiting</code> 상태로 남아 있을 수도 있는 새롭게 설치된 서비스 워커가 있는 경우에만 영향을 줄 수 있다. 따라서, {{domxref("InstallEvent")}} 핸들러 내부에서 <code>self.skipWaiting()</code> 을 호출하는 것이 일반적이다.</p> + +<p>다음 예시는 active 상태의 서비스 워커가 이미 존재하는지의 여부에 관계없이, 새로 설치된 서비스 워커가 <code>activating</code> 상태로 진행되도록 한다.</p> + +<pre class="brush: js">self.addEventListener('install', function(event) { + // skipWaiting()가 반환하는 promise는 안전하게 무시될 수 있다. + self.skipWaiting(); + + // 잠재적으로 event.waitUntil(); 내부에서 + // 서비스 워커 설치를 위해 필요한 다른 action 들을 수행하라. +}); +</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-obj', 'ServiceWorker')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerGlobalScope.skipWaiting")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{domxref("Clients.claim()")}}</li> + <li>{{jsxref("Promise", "Promises")}}</li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> |