Service Worker

ユーザーは、ネットワーク接続が低速または不安定でもアプリが確実に起動することを期待している。 オフラインでも行えます。最近閲覧したコンテンツが メディアトラック、チケット、旅行プランなどの 旅行プランなどの提供が可能になります リクエストが不可能な場合、ユーザーは 自動的に失敗したりクラッシュしたりしますそして、これらすべてを迅速に実現することを望んでいます。として ミリ秒が何百万ドルも生み出す 読み込み時間が 0.1 秒短縮されただけでも、コンバージョンを最大 10% 向上させることができます。 Service Worker は、プログレッシブ ウェブアプリ（PWA）を ユーザーのあります。

<ph type="x-smartling-placeholder">
</ph> PWA とサーバーの間でデバイス側で動作するミドルウェア プロキシとしての Service Worker。独自のサーバーとクロスドメイン サーバーの両方が含まれます。
Service Worker は、アプリケーションと PWA とやり取りするサーバー。

アプリが Service Worker のスコープの対象となるリソースをリクエストすると、 Service Worker はリクエストをインターセプトし、ネットワーク プロキシとして オフラインです。その後、API 呼び出しからそのリソースを提供するかどうかを決定できます。 キャッシュを使用して保存する場合、ネットワークがないときと同様に、 ローカル アルゴリズムから作成することもできます。これにより、 プラットフォーム アプリのような質の高い体験を、ユーザーが アプリがオフラインです。

Service Worker を登録する

Service Worker でページを制御するには、まず 実装できますつまり、ユーザーが初めて PWA を開いたときに、 サーバーに直接送信されます。これは、Service Worker には ページを管理できます。

ブラウザが Service Worker API をサポートしているかどうかを確認したら、PWA は次のことができます。 Service Worker を登録します。読み込みが完了すると、Service Worker が自動で 接続し、リクエストをインターセプトして提供します。 対応するレスポンスが返されます。

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}
Service Worker を登録して、 ブラウザのデベロッパー ツールで確認できます。
で確認できます。

Service Worker が登録されているかどうかを確認する

Service Worker が登録されているかどうかを確認するには、 できます。

Firefox または Chromium ベースのブラウザ（Microsoft Edge、Google Chrome、または Samsung Internet）:

  1. デベロッパー ツールを開き、[アプリケーション] タブをクリックします。
  2. 左側のペインで [Service Worker] を選択します。
  3. Service Worker のスクリプト URL がステータスとともに表示されることを確認する 「Activated」。詳細については、ライフサイクルをご覧ください。Firefox の場合: ステータスは「Running」表示されます。

Safari の場合:

  1. [開発] >Service Worker。
  2. このメニューで現在のオリジンのエントリを確認してください。そのエントリをクリックすると Service Worker のコンテキストでインスペクタが開きます。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> Chrome、Firefox、Safari 上の Service Worker デベロッパー ツール。
Chrome、Firefox、Safari 上の Service Worker デベロッパー ツール
で確認できます。

範囲

Service Worker が配置されているフォルダによってスコープが決まります。Service Worker example.com/my-pwa/sw.js に住んでいるアプリは、次の場所までのナビゲーションを制御できます。 my-pwa パス（example.com/my-pwa/demos/ など）。Service Worker は、 スコープ内のアイテム（ページ、ワーカー、総称して「クライアント」）のみを制御します。 このスコープは、ブラウザタブと PWA ウィンドウに適用されます。

スコープごとに許可される Service Worker は 1 つのみです。Service Worker がアクティブな クライアントの数に関係なく、通常は 1 つのインスタンスしか使用できない （PWA ウィンドウまたはブラウザタブ）はメモリ内にあります。

Safari にはパーティションと呼ばれるより複雑なスコープ管理があり、 スコープはクロスドメインの iframe で動作します。WebKit の こちらのブログ投稿をご覧ください。

Lifecycle

Service Worker には個別にインストール方法を指定するライフサイクルがある 直接 PWA インストールから行えます。

Service Worker のライフサイクルは、Service Worker の登録から始まります。「 その後、Service Worker ファイルのダウンロードと解析が試行されます。解析の場合 成功すると、Service Worker の install イベントが発生します。install イベント 一度だけ起動されます

Service Worker のインストールはユーザーの許可なしにバックグラウンドで行われます。 ユーザーが PWA をインストールしていなくても同じです。Service Worker API を 使用して PWA のインストールに対応していないプラットフォーム（Safari や デスクトップ デバイス上の Firefox。

インストール後、Service Worker を有効にするには、まず Service Worker をアクティベートする必要があります。 クライアントをコントロールできます。Service Worker で新しい 2 つのモードの クライアントを制御すると、activate イベントが発生します。ただし、デフォルトでは アクティブ化した Service Worker は、その Service Worker を登録したページを そのページに移動したときに、ページを再読み込みするか PWA を再度開いてください。

self を使用すると、Service Worker のグローバル スコープでイベントをリッスンできます。 オブジェクト:

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

Service Worker を更新する

Service Worker はブラウザが Service Worker を からクライアントと新しいバージョンの Service Worker ファイルを バイトごとに異なります。

インストールが正常に完了した後、新しい Service Worker は、 古い Service Worker はクライアントを制御しなくなりました。この状態を 「待機中」という表現が含まれます。これにより、ブラウザは、 同時に実行されています。

ページを更新したり、PWA を再び開いたりしても、新しい Service Worker には何も実行されません。 できます。ユーザーは、次のコマンドを使用して、すべてのタブとウィンドウを閉じるか、すべてのタブとウィンドウから移動する必要があります。 戻って新しい Service Worker に できます。詳細については、Service Worker のライフサイクルをご覧ください。

Service Worker の存続期間

インストールおよび登録された Service Worker ですべてのネットワーク リクエストを管理可能 あります。独自のスレッドで実行され、アクティベーションと終了を行う ブラウザによって制御されるため、PWA が開かれる前や、 閉じることができます。Service Worker は独自のスレッドで実行されるが、メモリ内の状態 Service Worker の実行間で保持されない可能性があるため、 IndexedDB または他のプラットフォームで利用できます 使用されます

Service Worker がまだ実行されていない場合は、ネットワーク リクエスト トリガーとなるイベントを受信したときに、 push メッセージを使用します。

Service Worker は、アイドル状態が数秒間続いた場合、あるいは 長い間忙しくしてることです。更新のタイミングはブラウザによって異なります。もし Service Worker が終了し、Service Worker を起動するイベントが発生した 確認します。

機能

登録済みのアクティブな Service Worker が、まったく異なる PWA のメインスレッドから実行できます。ただし、デフォルトでは Service Worker ファイル自体の動作はありません。キャッシュや配信は行われません。 リソースこれらはコードで行う必要があります。方法については、 以降の章で説明します

Service Worker の機能は、プロキシや HTTP リクエストの処理だけではありません。 バックグラウンドなど、他の目的にも利用できます。 コード実行、ウェブプッシュ通知、支払い処理などに役立ちます。トピック 機能に追加します。

リソース