From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../activate_event/index.html | 89 ++++++++++++ .../api/serviceworkerglobalscope/caches/index.html | 59 ++++++++ .../serviceworkerglobalscope/clients/index.html | 109 +++++++++++++++ .../ja/web/api/serviceworkerglobalscope/index.html | 153 +++++++++++++++++++++ .../install_event/index.html | 96 +++++++++++++ .../message_event/index.html | 100 ++++++++++++++ .../notificationclick_event/index.html | 112 +++++++++++++++ .../serviceworkerglobalscope/onactivate/index.html | 121 ++++++++++++++++ .../serviceworkerglobalscope/onfetch/index.html | 86 ++++++++++++ .../serviceworkerglobalscope/oninstall/index.html | 127 +++++++++++++++++ .../serviceworkerglobalscope/onmessage/index.html | 61 ++++++++ .../onnotificationclick/index.html | 122 ++++++++++++++++ .../onnotificationclose/index.html | 60 ++++++++ .../api/serviceworkerglobalscope/onpush/index.html | 84 +++++++++++ .../onpushsubscriptionchange/index.html | 64 +++++++++ .../serviceworkerglobalscope/push_event/index.html | 93 +++++++++++++ .../pushsubscriptionchange_event/index.html | 116 ++++++++++++++++ .../registration/index.html | 108 +++++++++++++++ .../skipwaiting/index.html | 122 ++++++++++++++++ 19 files changed, 1882 insertions(+) create mode 100644 files/ja/web/api/serviceworkerglobalscope/activate_event/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/caches/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/clients/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/install_event/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/message_event/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onactivate/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onfetch/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/oninstall/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onmessage/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onnotificationclick/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onnotificationclose/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onpush/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/onpushsubscriptionchange/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/push_event/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/registration/index.html create mode 100644 files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.html (limited to 'files/ja/web/api/serviceworkerglobalscope') diff --git a/files/ja/web/api/serviceworkerglobalscope/activate_event/index.html b/files/ja/web/api/serviceworkerglobalscope/activate_event/index.html new file mode 100644 index 0000000000..da64121d50 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/activate_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'ServiceWorkerGlobalScope: activate イベント' +slug: Web/API/ServiceWorkerGlobalScope/activate_event +tags: + - API + - Reference + - Service Workers + - ServiceWorkerGlobalScope + - activate + - events +translation_of: Web/API/ServiceWorkerGlobalScope/activate_event +--- +

{{DefaultAPISidebar("Service Workers API")}}

+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの activate イベントは、{{domxref("ServiceWorkerRegistration")}} が新しいアクティブワーカー（{{domxref("ServiceWorkerRegistration.active")}} worker）を取得すると発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("ExtendableEvent")}}
イベントハンドラープロパティ{{domxref("ServiceWorkerGlobalScope.onactivate")}}
+ +

例

+ +

次のスニペットは、activate イベントハンドラーを使用してキャッシュをアップグレードする方法を示しています。

+ +
globalScope.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.forEach(function(cache, cacheName) {
+      if (cacheWhitelist.indexOf(cacheName) == -1) {
+        return caches.delete(cacheName);
+      }
+    })
+  );
+});
+ +

次のように {{domxref("ServiceWorkerGlobalScope.onactivate")}} プロパティを使用してイベントハンドラーを設定することもできます。

+ +
globalScope.onactivate = function(event) {
+  ...
+};
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#service-worker-global-scope-activate-event', 'activate')}}{{Spec2('Service Workers')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ServiceWorkerGlobalScope.activate_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/caches/index.html b/files/ja/web/api/serviceworkerglobalscope/caches/index.html new file mode 100644 index 0000000000..5d670ef2ec --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/caches/index.html @@ -0,0 +1,59 @@ +--- +title: ServiceWorkerGlobalScope.caches +slug: Web/API/ServiceWorkerGlobalScope/caches +tags: + - API + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerGlobalScope +translation_of: Web/API/ServiceWorkerGlobalScope/caches +--- +

{{APIRef("Service Workers API")}}

+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの caches 読み取り専用プロパティは、サービスワーカーに関連する {{domxref("CacheStorage")}} オブジェクトを返します。

+ +

構文

+ +
var myCacheStorage = self.caches;
+
+ +

値

+ +

{{domxref("CacheStorage")}} オブジェクト。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#global-caches', 'ServiceWorkerGlobalScope.caches')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.caches")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/clients/index.html b/files/ja/web/api/serviceworkerglobalscope/clients/index.html new file mode 100644 index 0000000000..26b0fd7a92 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/clients/index.html @@ -0,0 +1,109 @@ +--- +title: ServiceWorkerGlobalScope.clients +slug: Web/API/ServiceWorkerGlobalScope/clients +tags: + - API + - Clients + - Property + - Reference + - Service Worker + - ServiceWorker + - ServiceWorkerGlobalScope +translation_of: Web/API/ServiceWorkerGlobalScope/clients +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェースの clients 読み取り専用プロパティは、service worker に関連する Clients オブジェクトを返します。

+ +

構文

+ +
swClients = self.clients
+
+ +

値

+ +

指定した worker に関連した {{domxref("Clients")}} オブジェクト。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Service Workers', '#service-worker-global-scope-clients', 'ServiceWorkerRegistration.clients')}}{{Spec2('Service Workers')}}初期定義。
+  
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatVersionUnknown}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Service worker（と Push）は Firefox 45 延長サポート版（ESR）では使用できません。

+ +

関連項目

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/index.html b/files/ja/web/api/serviceworkerglobalscope/index.html new file mode 100644 index 0000000000..1f484c3e08 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/index.html @@ -0,0 +1,153 @@ +--- +title: ServiceWorkerGlobalScope +slug: Web/API/ServiceWorkerGlobalScope +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerGlobalScope + - TopicStub + - Workers + - インターフェイス +translation_of: Web/API/ServiceWorkerGlobalScope +--- +
{{APIRef("Service Workers API")}}
+ +

ServiceWorkerGlobalScope は ServiceWorker API のインターフェイスで、サービスワーカーのグローバル実行コンテキストを表します。

+ +

開発者は ServiceWorker の状態が停止/再起動サイクルをまたいで続かないことを心にとめておいてください。このため各イベントハンドラーは、むき出しの、デフォルトのグローバル状態で実行されることを想定すべきです。

+ +

いったん正しく登録されたら、サービスワーカーはメモリーとプロセッサーの力を温存するため、アイドル時であれば停止させることができます。アクティブなサービスワーカーはイベント、例えば {{domxref("ServiceWorkerGlobalScope.onfetch")}} や {{domxref("ServiceWorkerGlobalScope.onmessage")}} に応じて自動的に再起動します。

+ +

加えて、同期リクエストはサービスワーカーでは許可されていません— 非同期リクエスト、つまり{{domxref("GlobalFetch.fetch", "fetch()")}} メソッド経由で初期化されたものが使われます。

+ +

このインターフェイスは {{domxref("WorkerGlobalScope")}} インターフェイスと、その親の {{domxref("EventTarget")}} を継承し、このため {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}} のプロパティを実装しています。

+ +

{{InheritanceDiagram(700, 85, 20)}}

+ +

プロパティ

+ +
+
{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}
+
サービスワーカーに関連する {{domxref("Clients")}} オブジェクトを含む。
+
{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}
+
サービスワーカーの登録を表す {{domxref("ServiceWorkerRegistration")}} オブジェクトを含む。
+
{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}
+
サービスワーカーに関連する {{domxref("CacheStorage")}} オブジェクトを含む。
+
+ +

イベント

+ +
+
{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}
+
{{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.active")}} ワーカーを得た時に発生します。
+ {{domxref("ServiceWorkerGlobalScope.onactivate")}} プロパティからも利用できます。
+
fetch
+
{{domxref("GlobalFetch.fetch", "fetch()")}} が呼び出されたときに発生します。
+ {{domxref("ServiceWorkerGlobalScope.onfetch")}} プロパティからも利用できます。
+
{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}
+
{{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.installing")}} ワーカーを得た時に発生します。
+ {{domxref("ServiceWorkerGlobalScope.oninstall")}} プロパティからも利用できます。
+
{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}
+
メッセージを受信したときに発生します。制御中のページは {{domxref("MessagePort.postMessage()")}} メソッドを使用してサービスワーカーにメッセージを送信することができます。サービスワーカーは任意で event.data.port で公開されている {{domxref("MessagePort")}} を通じて、対応する制御中のページに返信することができます。
+ {{domxref("ServiceWorkerGlobalScope.onmessage")}} プロパティからも利用できます。
+
{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}
+
表示された通知をユーザーがクリックしたときに発生します。
+ {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} プロパティからも利用できます。
+
notificationclose
+
表示された通知をユーザーが閉じたときに発生します。
+ {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} プロパティからも利用できます。
+
{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}
+
サーバーのプッシュ通知が届いたときに発生します。
+ {{domxref("ServiceWorkerGlobalScope.onpush")}} プロパティからも利用できます。
+
{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}
+
プッシュ通知への加入が無効化されたとき、または無効化されようとするとき (例えば、プッシュ通知の有効期限が設定されたとき) に発生します。
+ {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} プロパティからも利用できます。
+
sync
+
サービスワーカーのクライアントページから {{domxref("SyncManager.register")}} への呼び出しが行われたときに発生します。ネットワークが有効であるか、すぐに利用可能になるのであれば、直ちに同期が試みられます。
+ {{domxref("ServiceWorkerGlobalScope.onsync")}} プロパティからも利用できます。
+
+ +

メソッド

+ +
+
{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
+
現在のサービスワーカーの登録を、待ち状態からクライアントが使っている時のアクティブ状態に進めます。
+
+ +

ServiceWorkerGlobalScope は {{domxref("WorkerGlobalScope")}} を実装します — これは {{domxref("GlobalFetch")}} を実装します。このため利用できる次のプロパティも持っています:

+ +
+
{{domxref("GlobalFetch.fetch()")}}
+
リソース取得(fetch)のプロセスを開始します。これはリクエストのレスポンスを表す {{domxref("Response")}} オブジェクトを解決するpromiseを返します。このアルゴリズムは service worker コンテキストに渡されるfetch処理のエントリーポイントです。
+
+ +

例

+ +

このコードスニペットは、service worker prefetch sample（prefetch example live を参照してください）からのものです。{{domxref("ServiceWorkerGlobalScope.onfetch")}} イベントハンドラーは fetch イベントを監視します。イベントが発火した時、コードは {{domxref("Cache")}} オブジェクト内で、最初にマッチングしたリクエストに対して解決するプロミスを返します。もし、何もマッチしなかった場合は、コードはネットワークからのレスポンスをフェッチします。

+ +

さらに、このコードは {{domxref("GlobalFetch.fetch", "fetch()")}} 演算から投げられた例外をハンドリングします。 HTTP のエラーレスポンス (たとえば、404) は、例外を引き起こさないことにご注意ください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。

+ +
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;
+      });
+    })
+  );
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}{{Spec2('Service Workers')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ServiceWorkerGlobalScope")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/install_event/index.html b/files/ja/web/api/serviceworkerglobalscope/install_event/index.html new file mode 100644 index 0000000000..6a7c58292b --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/install_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'ServiceWorkerGlobalScope: install event' +slug: Web/API/ServiceWorkerGlobalScope/install_event +tags: + - API + - Reference + - Service Worker + - ServiceWorkerGlobalScope + - events + - install +translation_of: Web/API/ServiceWorkerGlobalScope/install_event +--- +

{{DefaultAPISidebar("Service Workers API")}}

+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの install イベントは、{{domxref("ServiceWorkerRegistration")}} が新しいインストール中のワーカー（{{domxref("ServiceWorkerRegistration.installing")}} worker）を取得すると発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("ExtendableEvent")}}
イベントハンドラープロパティ{{domxref("ServiceWorkerGlobalScope.oninstall")}}
+ +

例

+ +

次のスニペットは、install イベントハンドラーを使用してキャッシュに多数のレスポンスを設定する方法を示しています。 サービスワーカーはこれを使用して、資産をオフラインで提供できます。

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+   caches.open('v1').then(function(cache) {
+         return cache.add(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+     );
+   })
+   );
+});
+ +

次のように {{domxref("ServiceWorkerGlobalScope.oninstall")}} プロパティを使用してイベントハンドラーを設定することもできます。

+ +
globalScope.oninstall = function(event) {
+  ...
+};
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#service-worker-global-scope-install-event', 'install')}}{{Spec2('Service Workers')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ServiceWorkerGlobalScope.install_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/message_event/index.html b/files/ja/web/api/serviceworkerglobalscope/message_event/index.html new file mode 100644 index 0000000000..2f1aa73fc8 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/message_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'ServiceWorkerGlobalScope: message event' +slug: Web/API/ServiceWorkerGlobalScope/message_event +tags: + - Event + - Reference + - Service worker API + - ServiceWorkerGlobalScope + - message +translation_of: Web/API/ServiceWorkerGlobalScope/message_event +--- +
{{APIRef}}
+ +
+

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの message イベントは、着信メッセージを受信したときに発生します。 制御されたページは、{{domxref("ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信できます。
+ サービスワーカーは、任意で、制御されたページに対応する {{domxref("Client.postMessage()")}} を介して返信することができます。

+
+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("ExtendableMessageEvent")}}
イベントハンドラープロパティonmessage
+ +

例

+ +

以下の例では、ページが {{domxref("ServiceWorkerRegistration.active")}} を介して {{domxref("ServiceWorker")}} オブジェクトへのハンドルを取得し、その postMessage() 関数を呼び出します。

+ +
// 制御されているページ内
+if (navigator.serviceWorker) {
+
+  navigator.serviceWorker.register('service-worker.js');
+
+  navigator.serviceWorker.addEventListener('message', event => {
+    // event は MessageEvent オブジェクトです
+    console.log(`The service worker sent me a message: ${event.data}`);
+  });
+
+  navigator.serviceWorker.ready.then( registration => {
+    registration.active.postMessage("Hi service worker");
+  });
+
+}
+ +

次のように、サービスワーカーは、message イベントをリッスンしてメッセージを受信できます。

+ +
// サービスワーカー内
+addEventListener('message', event => {
+  // event は ExtendableMessageEvent オブジェクトです
+  console.log(`The client sent me a message: ${event.data}`);
+
+  event.source.postMessage("Hi client");
+});
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Service Workers', '#eventdef-serviceworkerglobalscope-message', 'message')}}{{Spec2('Service Workers')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.message_event")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.html b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.html new file mode 100644 index 0000000000..6f08188b64 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.html @@ -0,0 +1,112 @@ +--- +title: 'ServiceWorkerGlobalScope: notificationclick イベント' +slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event +tags: + - Event + - Notifications + - Service Worker + - ServiceWorkerGloablScope + - events + - notificationclick + - イベント +translation_of: Web/API/ServiceWorkerGlobalScope/notificationclick_event +--- +
{{APIRef}}
+ +

notificationclick イベントは、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("NotificationEvent")}}
イベントハンドラープロパティ{{domxref("ServiceWorkerGlobalScope.onpush", "onpush")}}
+ +

例

+ +

notificationclick イベントは {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッド内で使用することができます。

+ +
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('/');
+  }));
+});
+
+ +

または、 {{domxref("ServiceWorkerGlobalScope/onnotificationclick", "onnotificationclick")}} イベントハンドラープロパティを使用してください。

+ +
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('/');
+  }));
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Push API', '#extensions-to-the-serviceworkerglobalscope-interface', 'push')}}{{Spec2('Push API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ServiceWorkerGlobalScope.push_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html b/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html new file mode 100644 index 0000000000..e6aac404d9 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html @@ -0,0 +1,121 @@ +--- +title: ServiceWorkerGlobalScope.onactivate +slug: Web/API/ServiceWorkerGlobalScope/onactivate +tags: + - API + - Property + - Reference + - Service + - ServiceWorker + - ServiceWorkerGlovalScope + - Worker + - onactivate +translation_of: Web/API/ServiceWorkerGlobalScope/onactivate +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェースの onactivate プロパティは、（Service Worker がアクティブになったときの）{{Event("activate")}} イベントが発生したとき常に発火されるイベントハンドラーです。これは、Service Worker に制御されたページがリフレッシュされるインストール後に発生します。

+ +

構文

+ +
ServiceWorkerGlobalScope.onactivate = function(event) { ... };
+ServiceWorkerGlobalScope.addEventListener('activate', function(event) { ... });
+ +

例

+ +

次のスニペットは、Using Service Workers のものです; 詳細はそちらを見てください。

+ +
then.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.forEach(function(cache, cacheName) {
+      if (cacheWhitelist.indexOf(cacheName) == -1) {
+        return caches.delete(cacheName);
+      }
+    })
+  );
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Service Workers', '#service-worker-global-scope-event-handlers', 'Event Handlers')}}{{Spec2('Service Workers')}}初期定義。
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
+ +

[1] Service workers（と Push） は、Firefox 45 延長サポート版（ESR）では使用できません。

+ +

関連項目

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/onfetch/index.html b/files/ja/web/api/serviceworkerglobalscope/onfetch/index.html new file mode 100644 index 0000000000..68baeec252 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onfetch/index.html @@ -0,0 +1,86 @@ +--- +title: ServiceWorkerGlobalScope.onfetch +slug: Web/API/ServiceWorkerGlobalScope/onfetch +tags: + - API + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerGlobalScope + - onfetch +translation_of: Web/API/ServiceWorkerGlobalScope/onfetch +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの onfetch プロパティは、{{Event("fetch")}} イベントが発生するたびに（通常、{{domxref("WindowOrWorkerGlobalScope.fetch()")}} メソッドが呼び出されたときに）発火するイベントハンドラーです。

+ +

構文

+ +
serviceWorkerGlobalScope.onfetch = function(fetchEvent) { ... };
+ +

例

+ +

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです（プリフェッチの例をライブで見る）。{{domxref("ServiceWorkerGlobalScope.onfetch")}} イベントハンドラーは、fetch イベントをリッスンします。 コードが実行されると、コードは、{{domxref("Cache")}} オブジェクト内の最初に一致するリクエストに解決するプロミスを返します。 一致が見つからない場合、コードはネットワークからレスポンスをフェッチします。

+ +

このコードは、{{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}} 操作からスローされた例外も処理します。 HTTP エラーレスポンス（404 など）は例外をトリガーしないことに注意してください。 適切なエラーコードが設定された通常のレスポンスオブジェクトを返します。

+ +
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;
+      }).catch(function(error) {
+        console.error('Fetching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#service-worker-global-scope-event-handlers', 'Event Handlers')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.onfetch")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html b/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html new file mode 100644 index 0000000000..e03f13592c --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html @@ -0,0 +1,127 @@ +--- +title: ServiceWorkerGlobalScope.oninstall +slug: Web/API/ServiceWorkerGlobalScope/oninstall +tags: + - API + - Property + - Reference + - Service Worker + - ServiceWorker + - ServiceWorkerGlobalScope + - oninstall +translation_of: Web/API/ServiceWorkerGlobalScope/oninstall +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェースの oninstall プロパティは、（Service Worker がインストールされたときの）{{Event("install")}} イベントが発生するたびに発火するイベントハンドラーです。これはアクティブ化の前に発生します。

+ +

構文

+ +
ServiceWorkerGlobalScope.oninstall = function(event) { ... };
+ServiceWorkerGlobalScope.addEventListener('install', function(event) { ... });
+ +

例

+ +

次のスニペットは Using Service Workers のものです。詳細はそちらをご覧ください。

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+   caches.create('v1').then(function(cache) {
+         return cache.add(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+     );
+   })
+   );
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Service Workers', '#service-worker-global-scope-event-handlers', 'Event Handlers')}}{{Spec2('Service Workers')}}初期定義。
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
+ +

[1] Service worker（と Push）は、Firefox 45 延長サポート版（ESR）では使用できません。

+ +

関連項目

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/onmessage/index.html b/files/ja/web/api/serviceworkerglobalscope/onmessage/index.html new file mode 100644 index 0000000000..c9e6afb3dc --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onmessage/index.html @@ -0,0 +1,61 @@ +--- +title: ServiceWorkerGlobalScope.onmessage +slug: Web/API/ServiceWorkerGlobalScope/onmessage +tags: + - API + - Property + - Reference + - Service + - ServiceWorker + - ServiceWorkerGlobalScope + - Worker + - onmessage +translation_of: Web/API/ServiceWorkerGlobalScope/onmessage +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの onmessage プロパティは、（着信メッセージの受信時に）{{domxref("ServiceWorkerGlobalScope.message_event","message")}} イベントが発生するたびに発火するイベントハンドラーです。

+ +
+

注: サービスワーカーは、延長可能なイベントを定義して、イベントの存続期間を延長できるようにします。 message イベントの場合、サービスワーカーは {{domxref("ExtendableEvent")}} インターフェイスを拡張した {{domxref("ExtendableMessageEvent")}} インターフェイスを使用します。

+
+ +
+

注: 他のウェブメッセージング機能との整合性を保つため、サービスワーカーのコンテキストから受信されるメッセージ（onmessage のイベントオブジェクトなど）は、最新のブラウザーでは {{domxref("MessageEvent")}} オブジェクトによって表されます。 （これらは、以前は廃止された {{domxref("ServiceWorkerMessageEvent")}} オブジェクトで表されていました。）

+
+ +

構文

+ +
serviceWorkerGlobalScope.onmessage = function(extendableMessageEvent) { ... };
+ +

例

+ +
self.addEventListener('message', function(messageEvent) {
+  console.log('Handling message event:', messageEvent);
+})
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#service-worker-global-scope-event-handlers', 'Event Handlers')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.onmessage")}}

+
diff --git a/files/ja/web/api/serviceworkerglobalscope/onnotificationclick/index.html b/files/ja/web/api/serviceworkerglobalscope/onnotificationclick/index.html new file mode 100644 index 0000000000..cc9cd0c7b6 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onnotificationclick/index.html @@ -0,0 +1,122 @@ +--- +title: ServiceWorkerGlobalScope.onnotificationclick +slug: Web/API/ServiceWorkerGlobalScope/onnotificationclick +tags: + - API + - Experimental + - Interface + - Property + - Reference + - ServiceWorkerGlobalScope + - onnotificationclick +translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

ServiceWorkerGlobalScope.onnotificationclick プロパティは、{{domxref("ServiceWorkerGlobalScope")}} オブジェクトで {{Event("notificationclick")}} イベントが送り出されるたびに呼び出されるイベントハンドラーです。つまり、ユーザーが {{domxref("ServiceWorkerRegistration.showNotification()")}} で生成された通知をクリックしたときです。

+ +

メインスレッド、または {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して Service Worker ではない Worker で生成された通知は、Notification オブジェクト自体で {{Event("click")}} イベントを代わりに受け取ります。

+ +
+

ノート: {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して {{domxref("ServiceWorkerGlobalScope")}} 内で通知を生成しようとすると、エラーがスローされます。

+
+ +

構文

+ +
ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... };
+
+ +

例

+ +
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('/');
+  }));
+};
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}{{Spec2('Web Notifications')}}初期定義。このプロパティは、{{domxref('ServiceWorkerGlobalScope')}} の一部だが {{domxref('Notifications_API')}} で定義されている。
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

[1] Service worker（と Push）は、Firefox 45 延長サポート版（ESR）では使用できません。

diff --git a/files/ja/web/api/serviceworkerglobalscope/onnotificationclose/index.html b/files/ja/web/api/serviceworkerglobalscope/onnotificationclose/index.html new file mode 100644 index 0000000000..24060add7a --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onnotificationclose/index.html @@ -0,0 +1,60 @@ +--- +title: onnotificationclose +slug: Web/API/ServiceWorkerGlobalScope/onnotificationclose +tags: + - API + - Experimental + - Interface + - Property + - Reference + - ServiceWorkerGlobalScope + - onnotificationclose +translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclose +--- +

{{APIRef("Service Workers API")}}

+ +

ServiceWorkerGlobalScope.onnotificationclose プロパティは、{{domxref("ServiceWorkerGlobalScope")}} オブジェクトで {{Event("notificationclose")}} イベントが発行されるとき、つまり、{{domxref("ServiceWorkerRegistration.showNotification()")}} によって生成された表示されている通知をユーザーが閉じるたびに呼び出されるイベントハンドラーです。

+ +

メインスレッドや {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用した service worker ではない worker で生成された通知は、Notification オブジェクト自身の {{Event("close")}} イベントを受け取ります。

+ +
+

注記: {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して {{domxref("ServiceWorkerGlobalScope")}} 内で通知を生成しようとすると、エラーがスローされます。

+
+ +

構文

+ +
ServiceWorkerGlobalScope.onnotificationclose = function(NotificationEvent) { ... };
+ServiceWorkerGlobalScope.addEventListener('notificationclose', function(NotificationEvent) { ... });
+ +

例

+ +
// service worker 内。
+self.onnotificationclose = function(event) {
+  console.log('On notification close: ', event.notification.tag);
+};
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclose','onnotificationclick')}}{{Spec2('Web Notifications')}}初期定義。このプロパティは {{domxref('ServiceWorkerGlobalScope')}} の一部ですが、{{domxref('Notifications_API')}} イベントで定義されています。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.onnotificationclose")}}

+
diff --git a/files/ja/web/api/serviceworkerglobalscope/onpush/index.html b/files/ja/web/api/serviceworkerglobalscope/onpush/index.html new file mode 100644 index 0000000000..dd294999c7 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onpush/index.html @@ -0,0 +1,84 @@ +--- +title: ServiceWorkerGlobalScope.onpush +slug: Web/API/ServiceWorkerGlobalScope/onpush +tags: + - API + - Property + - Push + - Reference + - Service Worker + - ServiceWorker + - ServiceWorkerGlobalScope + - onpush +translation_of: Web/API/ServiceWorkerGlobalScope/onpush +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェースの ServiceWorkerGlobalScope.onpush イベントは、Service Worker がプッシュサーバー経由でメッセージを受け取るたびに発火します。

+ +

構文

+ +
ServiceWorkerGlobalScope.onpush = function(PushEvent) { ... }
+self.addEventListener('push', function(PushEvent) { ... })
+
+ +

例

+ +

次の例では、{{domxref("PushEvent")}} からデータを取得して、すべての Service Worker のクライアント上で表示しています。プッシュメッセージのデータペイロードは、イベントオブジェクトの data プロパティ（{{domxref("PushEvent.data")}} は {{domxref("PushMessageData")}} オブジェクトを含みます。）で利用できます。

+ +
self.addEventListener('push', function(event) {
+ if (!(self.Notification && self.Notification.permission === 'granted')) {
+   return;
+ }
+
+ var data = {};
+ if (event.data) {
+   data = event.data.json();
+ }
+ var title = data.title || "Something Has Happened";
+ var message = data.message || "Here's something you might want to check out.";
+ var icon = "images/new-notification.png";
+
+ var notification = new Notification(title, {
+   body: message,
+   tag: 'simple-push-demo-notification',
+   icon: icon
+ });
+
+ notification.addEventListener('click', function() {
+   if (clients.openWindow) {
+     clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
+   }
+ });
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Push API', '#widl-ServiceWorkerGlobalScope-onpush', 'onpush')}}{{Spec2('Push API')}}初期定義。このイベントは {{domxref("ServiceWorkerGlobalScope")}} からアクセスしますが、Push API で定義されています。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.onpush")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/onpushsubscriptionchange/index.html b/files/ja/web/api/serviceworkerglobalscope/onpushsubscriptionchange/index.html new file mode 100644 index 0000000000..f1dd4e3bd7 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/onpushsubscriptionchange/index.html @@ -0,0 +1,64 @@ +--- +title: ServiceWorkerGlobalScope.onpushsubscriptionchange +slug: Web/API/ServiceWorkerGlobalScope/onpushsubscriptionchange +tags: + - API + - NeedsExample + - Property + - Push + - Reference + - Service Worker + - ServiceWorkerGlobalScope + - onpushsubscriptionchange +translation_of: Web/API/ServiceWorkerGlobalScope/onpushsubscriptionchange +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェースの ServiceWorkerGlobalScope.onpushsubscriptionchange イベントは、アプリケーションのコントロールの外側で発生したプッシュサブスクリプションの変更を示すために発火されます。例えば、ブラウザーがプッシュサブスクリプションをリフレッシュしたときなどです。

+ +

以前は、プッシュサブスクリプションが無効化された時（または無効になろうとしている時）に発火されるイベントインターフェースとして定義されていました。もし望むなら、これはプッシュメッセージの取得を継続するために、再講読する機会を提供します。たとえば、これはプッシュサービスがサブスクリプションに有効期限を設定した場合に発生します。

+ +

構文

+ +
ServiceWorkerGlobalScope.onpushsubscriptionchange = function() { ... }
+self.addEventListener('pushsubscriptionchange', function() { ... })
+
+ +

例

+ +
self.addEventListener('pushsubscriptionchange', function() {
+  // 何かを実行する。一般的には、XHR や Fetch を通して
+  // サーバーに新しいサブスクリプションの詳細を送ることで
+  // 再サブスクライブする。
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Push API', '#widl-ServiceWorkerGlobalScope-onpushsubscriptionchange', 'onpushsubscriptionchange')}}{{Spec2('Push API')}}初期定義（ノート： このイベントは Push API で仕様化されていますが、{{domxref("ServiceWorkerGlobalScope")}} を介してアクセスします）。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.ServiceWorkerGlobalScope.onpushsubscriptionchange")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/push_event/index.html b/files/ja/web/api/serviceworkerglobalscope/push_event/index.html new file mode 100644 index 0000000000..0201cc4d36 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/push_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'ServiceWorkerGlobalScope: push イベント' +slug: Web/API/ServiceWorkerGlobalScope/push_event +tags: + - API + - Event + - Notifications + - Push + - Push API + - PushEvent + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerGlobalScope + - events + - messaging + - イベント +translation_of: Web/API/ServiceWorkerGlobalScope/push_event +--- +
{{APIRef("Push API")}}
+ +

push イベントは、サービスワーカーがプッシュメッセージを受信したときにサービスワーカーのグローバルスコープ ({{domxref("ServiceWorkerGlobalScope")}} インターフェイスで表現されるもの) に送られます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("PushEvent")}}
イベントハンドラープロパティ{{domxref("ServiceWorkerGlobalScope.onpush", "onpush")}}
+ +

例

+ +

この例は push イベントのハンドラーを設定して、 {{Glossary("JSON")}} データを取り、解析し、メッセージ内に含まれる情報に基づいて扱うためにメッセージを仕分けします。

+ +
self.addEventListener("push", event => {
+  let message = event.data.json();
+
+  switch(message.type) {
+    case "init":
+      doInit();
+      break;
+    case "shutdown":
+      doShutdown();
+      break;
+  }
+}, false);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Push API', '#extensions-to-the-serviceworkerglobalscope-interface', 'push')}}{{Spec2('Push API')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ServiceWorkerGlobalScope.push_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.html b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.html new file mode 100644 index 0000000000..3203ac2005 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.html @@ -0,0 +1,116 @@ +--- +title: 'ServiceWorkerGlobalScope: pushsubscriptionchange イベント' +slug: Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event +tags: + - API + - Event + - Push + - Push API + - PushSubscriptionChangeEvent + - Reference + - Service Workers + - Service Workers API + - ServiceWorker + - ServiceWorkerGlobalScope + - Subscription + - events + - プッシュ通知 +translation_of: Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event +--- +
{{APIRef("Push API")}}
+ +

pushsubscriptionchange イベントはグローバルスコープとしての {{domxref("ServiceWorker")}} へ送信され、、アプリケーションの制御の外から起動されたプッシュ通知への加入状況が変化したことを示します。これはブラウザーが加入を更新した場合に発生しますが、加入が取り消されたり失われたりしたときにも発生する可能性があります。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("PushSubscriptionChangeEvent")}}
イベントハンドラープロパティ{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange", "onpushsubscriptionchange")}}
+ +

使用上のメモ

+ +

加入に関する情報をアプリケーションサーバーと共有する方法を示す例では {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}} を使用する傾向がありますが、これは実際の使用には必ずしも最適な選択ではありません。たとえば、アプリがオフラインの場合は機能しないためです。

+ +

サービスワーカーとアプリサーバー間で加入情報を同期するのに別の方法を使用することを検討するか、 fetch() を使用するコードが、データ交換の試行が失敗した場合を処理するのに十分堅牢であることを確認してください。

+ +
+

メモ: この仕様書の早期の草稿では、このイベントは {{domxref("PushSubscription")}} が期限切れになった時に送信されるよう定義されていました。

+
+ +

例

+ +

この例は、サービスワーカーのコンテキストで実行するものであり、 pushsubscriptionchange イベントを待ち受けて、無効になった場合に再加入します。

+ +
self.addEventListener("pushsubscriptionchange", event => {
+  event.waitUntil(swRegistration.pushManager.subscribe(event.oldSubscription.options)
+    .then(subscription => {
+      return fetch("register", {
+        method: "post",
+        headers: {
+          "Content-type": "application/json"
+        },
+        body: JSON.stringify({
+          endpoint: subscription.endpoint
+        })
+      });
+    })
+  );
+}, false);
+ +

加入の有効期限が切れたことを示す pushsubscriptionchange イベントが到着すると、プッシュマネージャーの {{domxref("PushManager.subscribe", "subscribe()")}} メソッドを呼び出して再加入します。返された Promise が解決されると、新しい加入を受け取ります。これは、 {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}} 呼び出しを使用してアプリサーバーに配信され、 {{Glossary("JSON")}} 形式で加入の {{domxref("PushSubscription.endpoint", "endpoint")}} の返信をアプリサーバーに送信します。

+ +

{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange", "onpushsubscriptionchange")}} イベントハンドラープロパティを使用してイベントハンドラーを設定することもできます。

+ +
self.onpushsubscriptionchange = event => {
+  event.waitUntil(swRegistration.pushManager.subscribe(event.oldSubscription.options)
+    .then(subscription => {
+      /* ... */
+    )
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Push API', '#the-pushsubscriptionchange-event', 'pushsubscriptionchange')}}{{Spec2('Push API')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ServiceWorkerGlobalScope.pushsubscriptionchange_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/registration/index.html b/files/ja/web/api/serviceworkerglobalscope/registration/index.html new file mode 100644 index 0000000000..0fc05837f7 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/registration/index.html @@ -0,0 +1,108 @@ +--- +title: ServiceWorkerGlobalScope.registration +slug: Web/API/ServiceWorkerGlobalScope/registration +tags: + - API + - Property + - Reference + - Service Worker + - ServiceWorker + - ServiceWorkerGlobalScope + - registration +translation_of: Web/API/ServiceWorkerGlobalScope/registration +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

{{domxref("ServiceWorkerGlobalScope")}} インターフェースの registration 読み取り専用プロパティは、Service Worker の登録を表す {{domxref("ServiceWorkerRegistration")}} オブジェクトの参照を返します。

+ +

構文

+ +
serviceWorkerRegistration = self.registration
+
+ +

値

+ +

{{domxref("ServiceWorkerRegistration")}} オブジェクト。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Service Workers', '#service-worker-global-scope-registration', 'ServiceWorkerGlobalScope.registration')}}{{Spec2('Service Workers')}}初期定義。
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Service workers（と Push）は、Firefox 45 延長サポート版（ESR）では使用できません。

+ +

関連項目

+ + diff --git a/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.html b/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.html new file mode 100644 index 0000000000..156a830fb1 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.html @@ -0,0 +1,122 @@ +--- +title: ServiceWorkerGlobalScope.skipWaiting() +slug: Web/API/ServiceWorkerGlobalScope/skipWaiting +tags: + - API + - Method + - Reference + - ServiceWorker + - skipWaiting +translation_of: Web/API/ServiceWorkerGlobalScope/skipWaiting +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

{{domxref("ServiceWorkerGlobalScope")}} スコープの ServiceWorkerGlobalScope.skipWaiting() メソッドは、待機している Service Worker がアクティブになるように強制します。

+ +

このメソッドは、{{domxref("Clients.claim()")}} と併用することで、現在のクライアントと他のすべてのアクティブなクライアントの両方で、元となる Service Worker の更新が即座に有効になるようにします。

+ +

構文

+ +
ServiceWorkerGlobalScope.skipWaiting().then(function() {
+  //Do something
+});
+ +

戻り値

+ +

{{jsxref("Promise")}}。

+ +

例

+ +

次の例では、登録済みの Service Worker の新しいバージョンでインストールされている既存のものを置き換え、開いているページ上で現在アクティブな worker を入れ替えています。

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(self.skipWaiting());
+});
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}{{Spec2('Service Workers')}}初期定義。
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

[1] Service worker（と Push）は、Firefox 45 延長サポート版（ESR）では使用できません。

+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf