導入

これらの用語について初めて聞いたとき、なるほど、別のスレッドで同じことをやっているのかと思いました。では、なぜこれら 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