Web ワーカーとサービス ワーカー

導入

これらの用語について初めて聞いたとき、なるほど、別のスレッドで同じことをやっているのかと思いました。では、なぜこれら 2 つの用語が必要なのでしょうか?

しかし、実を言うと、これら 2 つの用語とその動作には 大きな違いがあります。

詳しく説明していきます。

これら 2 つの共通点は

1. Javascript のメインの単一スレッドをブロックすることなく、別のスレッドで実行されます。

ウェブワーカー

• ここでは、ワーカー スレッドはメイン スレッドに干渉することなくタスクを実行できます。
• これらは、画像の操作/処理、大量の計算、データ処理など、大量の CPU を必要とするタスクに使用されます。
• DOM にアクセスする機能はなく、ネットワーク リクエストを中断することもできません。
• ライフサイクルはありません

サービスワーカー

• 追加機能を備えた Web ワーカーの一種です。
• ブラウザとは別に、またはブラウザが閉じているときでも実行できます。
• これは、オフライン サポート、バックグラウンド同期、プッシュ通知などの機能を有効にするため、PWA のコア コンポーネントです。
• ブラウザとネットワークの間にあるプロキシ サーバーのように機能します。

Service Worker のライフサイクル

1.登録

• ここで、Service Worker JavaScript ファイルが存在する場所をブラウザに伝えます。

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2.インストール

• ブラウザが Service Worker を新しいとみなすと、インストール イベントがトリガーされます。

以下のコードは、service-worker.js
に記述する必要があります。

self.addEventListener('install', (event) => {
// do your operations
})

3.アクティベーション

• インストール後、ここにジャンプします

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4.アイドル

• Service Worker が何もしていないときは、アイドル状態になります。

5.フェッチ/メッセージ

• ネットワークリクエスト/メッセージが行われるたびに、Service Worker が起動して制御を引き継ぎます

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6.終了

• 使用されていない場合、ブラウザはメモリを節約するために Service Worker を終了します。しかし、私たちが知らないときは。

これにより、サービス ワーカーは非常に長期間雇用され続けることになります。

例:-

Chrome でこのリンクを開くと、たくさんの Service Worker がハングしているのが表示され、検査/開始、メッセージの送信など、さまざまな操作を行うことができます。

chrome://serviceworker-internals/

ブラウザが閉じている場合でもサービス ワーカーを起動する方法。

注:-
この特定の場合、プッシュを使用してウェイクアップできますが、そのためにはブラウザに通知権限を与える必要があり、そうでない場合は方法がありません。

ブラウザがまだ開いている場合は、他の方法が関係します

1.イベントを取得

• このイベントは、フェッチ要求が行われるたびに発生します。

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2.メッセージ

• このイベントは、別のスクリプトからメッセージを受信したときに発生します。 (Service Worker + 他の Javascript ファイルによる通信)

   self.addEventListener('message', (event) => {
// Handle message Event
})

3.

• このイベントは、プッシュ メッセージを受信したときに発生します

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4.同期イベント

• このイベントは、バックグラウンド同期イベントが受信されたときに発生します。

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

参考

1. https://frontendmasters.com/courses/background-javascript

以上がWeb ワーカーとサービス ワーカーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。