From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/extendableevent/extendableevent/index.html | 63 ++++++++++ files/ja/web/api/extendableevent/index.html | 127 +++++++++++++++++++++ .../web/api/extendableevent/waituntil/index.html | 83 ++++++++++++++ 3 files changed, 273 insertions(+) create mode 100644 files/ja/web/api/extendableevent/extendableevent/index.html create mode 100644 files/ja/web/api/extendableevent/index.html create mode 100644 files/ja/web/api/extendableevent/waituntil/index.html (limited to 'files/ja/web/api/extendableevent') diff --git a/files/ja/web/api/extendableevent/extendableevent/index.html b/files/ja/web/api/extendableevent/extendableevent/index.html new file mode 100644 index 0000000000..3ca4a707bd --- /dev/null +++ b/files/ja/web/api/extendableevent/extendableevent/index.html @@ -0,0 +1,63 @@ +--- +title: ExtendableEvent() +slug: Web/API/ExtendableEvent/ExtendableEvent +tags: + - API + - Constructor + - ExtendableEvent + - Reference + - Service Workers + - ServiceWorker +translation_of: Web/API/ExtendableEvent/ExtendableEvent +--- +

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

+ +

ExtendableEvent() コンストラクターは、新しい {{domxref("ExtendableEvent")}} オブジェクトを作成します。

+ +

構文

+ +
var extendableEvent = new ExtendableEvent(type, init);
+ +

パラメーター

+ +
+
type
+
ExtendableEvent のタイプ（例えば、{{Event("install")}}、{{Event("activate")}}）。
+
init {{optional_inline}}
+
イベントオブジェクトに適用するカスタム設定を含むオプションオブジェクト。 現在、仕様内に可能なオプションはありませんが、これは、さまざまな派生イベント間での上位互換性のために定義されています。
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#dom-extendableevent-extendableevent', 'ExtendableEvent')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/extendableevent/index.html b/files/ja/web/api/extendableevent/index.html new file mode 100644 index 0000000000..3f44c91f85 --- /dev/null +++ b/files/ja/web/api/extendableevent/index.html @@ -0,0 +1,127 @@ +--- +title: ExtendableEvent +slug: Web/API/ExtendableEvent +tags: + - API + - ExtendableEvent + - Interface + - Offline + - Reference + - Service Workers + - ServiceWorker + - Workers +translation_of: Web/API/ExtendableEvent +--- +
{{APIRef("Service Workers API")}}
+ +

ExtendableEvent インターフェイスは、サービスワーカーのライフサイクルの一部として、グローバルスコープでディスパッチされた install イベントと activate イベントの存続期間を延長します。 これにより、データベーススキーマがアップグレードされて古いキャッシュエントリが削除されるまで、機能イベント（{{domxref("FetchEvent")}} など）が送出されなくなります。

+ +

{{domxref("ExtendableEvent.waitUntil","waitUntil()")}} が ExtendableEvent ハンドラーの外で呼び出された場合、ブラウザーは InvalidStateError をスローする必要があります。 また、複数の呼び出しが積み重なり、その結果の Promise が存続期間延長 Promise（extend lifetime promises）のリストに追加されることにも注意してください。

+ +
+

注: 上記の段落で説明した振る舞いは、Firefox 43 で修正されました（{{bug(1180274)}} を参照）。

+
+ +

このインターフェイスは、{{domxref("Event")}} インターフェイスを継承しています。

+ +

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

+ +
+

注: このインターフェイスは、グローバルスコープが {{domxref("ServiceWorkerGlobalScope")}} の場合にのみ使用できます。 {{domxref("Window")}} または別の種類のワーカーのスコープの場合は使用できません。

+
+ +

コンストラクター

+ +
+
{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}
+
新しい ExtendableEvent オブジェクトを作成します。
+
+ +

プロパティ

+ +

特定のプロパティを実装していませんが、親である {{domxref("Event")}} からプロパティを継承しています。

+ +

メソッド

+ +

親である {{domxref("Event")}} からメソッドを継承しています。

+ +
+
{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
+
+

イベントの存続期間を延長します。 これは、インストール中（{{domxref("ServiceWorkerRegistration.installing", "installing")}}）のワーカーの install {{domxref("EventHandler")}} と、アクティブ（{{domxref("ServiceWorkerRegistration.active", "active")}}）ワーカーの activate {{domxref("EventHandler")}} で呼び出されることを目的としています。

+
+
+ +

例

+ +

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです（プリフェッチの例をライブで見る）。 コードは {{domxref("ServiceWorkerGlobalScope.oninstall")}} で {{domxref("ExtendableEvent.waitUntil()")}} を呼び出し、インストール中（{{domxref("ServiceWorkerRegistration.installing")}}）のワーカーがインストール済み（installed）として扱われるのを、渡された Promise が正常に解決されるまで遅らせます。 Promise は、すべてのリソースがフェッチされてキャッシュされたとき、または例外が発生したときに解決します。

+ +

コードスニペットは、サービスワーカーが使用するキャッシュのバージョン管理のベストプラクティスも示しています。 この例ではキャッシュは1つしかありませんが、同じアプローチを複数のキャッシュに使用できます。 キャッシュの一括指定識別子を特定のバージョン管理されたキャッシュ名にマップします。

+ +
+

注: Chrome では、ログ文は、chrome://serviceworker-internals を介してアクセスされる関連サービスワーカーの "Inspect" インターフェイスを介して表示されます。

+
+ +
var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('install イベントの処理。 プリフェッチするリソース:', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      return cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('すべてのリソースをフェッチし、キャッシュしました。');
+      });
+    }).catch(function(error) {
+      console.error('プリフェッチに失敗:', error);
+    })
+  );
+});
+ +
重要: リソースをフェッチするとき、リソースが {{glossary("CORS")}} をサポートしていないサーバーから提供される可能性がある場合は、{mode: 'no-cors'} を使用することが非常に重要です。 この例では、www.chromium.org は CORS をサポートしていません。
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#extendableevent', 'ExtendableEvent')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/extendableevent/waituntil/index.html b/files/ja/web/api/extendableevent/waituntil/index.html new file mode 100644 index 0000000000..579b66c954 --- /dev/null +++ b/files/ja/web/api/extendableevent/waituntil/index.html @@ -0,0 +1,83 @@ +--- +title: ExtendableEvent.waitUntil() +slug: Web/API/ExtendableEvent/waitUntil +tags: + - API + - ExtendableEvent + - Method + - Reference + - waitUntil +translation_of: Web/API/ExtendableEvent/waitUntil +--- +

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

+ +

ExtendableEvent.waitUntil() メソッドは、作業が進行中であることをイベントディスパッチャーに通知します。 また、その作業が成功したかどうかを検出するためにも使用できます。 サービスワーカーの場合、waitUntil() は、Promise が確定するまで作業が進行中であることをブラウザーに通知し、サービスワーカーがその作業を完了させたい場合にサービスワーカーを終了させません。

+ +

{{domxref("ServiceWorkerGlobalScope", "サービスワーカー")}}の install イベントは、waitUntil() を使用して、タスクが完了するまでサービスワーカーをインストール中（{{domxref("ServiceWorkerRegistration.installing", "installing")}}）の段階に保持します。 waitUntil() に渡された Promise が拒否された場合、インストールは失敗と見なされ、インストール中のサービスワーカーは破棄されます。 これは主に、依存するすべてのコアキャッシュが正常に読み込まれるまで、サービスワーカーがインストール済み（installed）と見なされないようにするために使用します。

+ +

{{domxref("ServiceWorkerGlobalScope", "サービスワーカー")}}の activate イベントは、waitUntil() を使用して、waitUntil() に渡された Promise が解決するまで、fetch や push などの機能イベントをバッファーします。 これにより、サービスワーカーはデータベーススキーマを更新し、古い{{domxref("Cache", "キャッシュ")}}を削除する時間を確保できるため、他のイベントは完全にアップグレードされた状態に依存できます。

+ +

waitUntil() メソッドは、最初はイベントコールバック内で呼び出す必要がありますが、その後、すべての Promise が解決するまで、複数回呼び出すことができます。

+ +
+

注: 上記の段落で説明した動作は、Firefox 43 で修正されました（{{bug(1180274)}} を参照）。

+
+ +

構文

+ +
extendableEvent.waitUntil(promise);
+ +

パラメーター

+ +

{{jsxref("Promise")}}。

+ +

戻り値

+ +

undefined。

+ +

例

+ +

サービスワーカーの install イベント内で waitUntil() を使用する。

+ +
addEventListener('install', event => {
+  const preCache = async () => {
+    const cache = await caches.open('static-v1');
+    return cache.addAll([
+      '/',
+      '/about/',
+      '/static/styles.css'
+    ]);
+  };
+  event.waitUntil(preCache());
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#dom-extendableevent-waituntil', 'waitUntil()')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ExtendableEvent.waitUntil")}}

+ +

関連情報

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