【Web標準/FrontEnd】Web Worker/Service Workerを使ったバックグラウンド処理ついて📝

Web Worker/Service Workerを使ったバックグラウンド処理ついて📝

Web Worker

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API

https://developer.mozilla.org/ja/docs/Web/API/Web_Periodic_Background_Synchronization_API

Service Worker

https://qiita.com/OMOIKANESAN/items/72c17bf96099adde7787

https://zenn.dev/mryhryki/articles/2020-10-09-hatena-service-worker

https://zenn.dev/s_takashi/articles/b01980461f3b21

https://tositeru.github.io/Notebook/web/service-worker.html

サービスワーカーってなに？

サービスワーカー（Service Worker）は ブラウザの裏側で動く JavaScript ファイル です。
ページとは別スレッドで動き、ネットワーク通信を横取り（プロキシ）したり、キャッシュを管理したり、オフライン時でも動ける仕組みを提供してくれます。スマホアプリの「バックグラウンド処理」を Web に持ち込む技術、とイメージするとわかりやすいでしょう。 (MDN Web Docs)

できること

これらを組み合わせた Web アプリは PWA（Progressive Web App） と呼ばれ、インストールアイコンやホーム画面起動などネイティブアプリに近い体験まで提供できます。 (atakinteractive.com)

どうやって動くの？ ― ライフサイクル

1. 登録 (register)

   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js');
   }
   

   ページが最初に呼び出すだけ。HTTPS 上（ローカルは localhost も可）でしか動きません。 (zeepalm.com)

2. インストール (install)
   sw.js が初回読み込まれる。ここでキャッシュへファイルを保存（プリキャッシュ）するのが定番です。

3. アクティベート (activate)
   旧バージョンのクリーンアップや、新しいキャッシュへの切り替えを行います。

4. イベント待ち受け

   • fetch : リクエストを横取りしてキャッシュ or ネットへ
   • push : プッシュ通知受信
   • sync : オフライン中に失敗した送信を再試行

5. アップデート
   ブラウザが自動チェック。sw.js が変わると新しいワーカーが「待機 → アクティブ」へ交代します。手動で skipWaiting() を呼ぶと即時更新も可能です。 (MDN Web Docs)

最小サンプル (sw.js)

// install: 基本ファイルをキャッシュ
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/', '/index.html', '/style.css'])
    )
  );
});

// fetch: キャッシュ優先で応答
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)          // ①キャッシュにあれば返す
      .then(resp => resp ?? fetch(event.request)) // ②なければネット
  );
});

ほんの数行で 「オフラインでも即表示」 が実現できます。

よくある質問

便利ツール

• Workbox: 高品質なキャッシュ戦略を数行で作成。
• Chrome DevTools ▶ Application パネル: Service Worker の登録状況やキャッシュ内容を GUI で確認。
• Lighthouse: PWA 診断で Service Worker、マニフェスト、オフライン対応をチェック。

まとめ

サービスワーカーは “Web アプリにネイティブ並みの裏方” を授けてくれる存在です。

1. まず navigator.serviceWorker.register()。
2. install でキャッシュ、fetch で取り出す。
3. オフライン対応・高速化・プッシュ通知などが一気に手に入る。

「Web サイト → PWA」への第一歩として、ぜひ触ってみてください！

Web Worker と Service Workerって何が違うの？ by o3

要点まとめ：
Web Workerは「ページが開いている間だけ動く計算用のバックグラウンドスレッド」、Service Workerは「ブラウザとネットワークの間に常駐し、オフライン対応やプッシュ通知を司るプロキシ」。どちらもDOMに直接触れられず postMessage で通信しますが、ライフサイクル・利用API・ユースケースが大きく異なります。以下では両者の特徴、違い、選択指針を詳しく解説します。

Web Worker とは

目的とモデル

• JavaScript の重い計算や JSON 解析、メディアエンコードなどをメインスレッドから切り離し、UI のフリーズを防ぐための 並列実行スレッド です。([MDN Web Docs][1])
• ページ側で new Worker()（または new SharedWorker()）して生成し、データは postMessage/onmessage でやり取りします。([MDN Web Docs][2])

種類

• Dedicated Worker（標準）
• Shared Worker（タブ間共有）([Stack Overflow][3])
• ES Module を直接読める Module Worker などの派生形があります。([DEV Community][4])

ライフサイクル

• ページが閉じるか worker.terminate() を呼ぶと終了し、ブラウザが保持し続けることはありません。([MDN Web Docs][2])

主なユースケース

• 画像処理・暗号化・機械学習推論など CPU 負荷が高い処理をオフロードして FPS を確保する。([DEV Community][5], [Medium][6])

簡易コード例

// main.ts
const worker = new Worker(new URL('./calc.worker.ts', import.meta.url), { type: 'module' });
worker.postMessage({ n: 40 });
worker.onmessage = (e) => console.log('結果', e.data);

Service Worker とは

目的とモデル

• ブラウザ-ネットワーク間の プログラマブルプロキシ。fetch イベントを横取りしてキャッシュから応答したり、ネットワークへフォールバックしたりできます。([MDN Web Docs][7], [MDN Web Docs][8])

ライフサイクル

1. install — 初回登録でキャッシュを作成
2. activate — 旧バージョンと交代
3. fetch / push / sync — イベント駆動で起動
   ブラウザはイベント時にだけワーカーを起こし、処理後にスリープさせるため長期常駐が可能です。([web.dev][9], [MDN Web Docs][8])

セキュリティとスコープ

• HTTPS（または localhost）必須で、登録 URL 以下のパス全体を制御します。([MDN Web Docs][7])

拡張 API

• Cache Storage によるオフラインキャッシュ([MDN Web Docs][10])
• Background Sync や Push API でバックグラウンド更新・通知([pwa-workshop.js.org][11], [frontend.turing.edu][12])

主なユースケース

• PWA のオフライン対応・高速再訪問ロード・プッシュ通知など。([MDN Web Docs][13])

簡易コード例

// sw.js
self.addEventListener('install', event => {
  event.waitUntil(caches.open('v1').then(c => c.addAll(['/offline.html'])));
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

共通点と違い（早見表）

選択ガイドと併用パターン

• UI がカクつく計算を並列化したい → Web Worker を使う。([DEV Community][5])
• オフラインでも動く PWA を作りたい、更新をバックグラウンドで処理したい → Service Worker を使う。([MDN Web Docs][13], [pwa-workshop.js.org][11])
• 両方必要 な場合は、ネットワーク層を Service Worker に任せ、取得した大きなデータを Web Worker に渡して計算する設計が定番です。([DEV Community][4])

ブラウザ対応と注意点

• Web Worker はすべてのモダンブラウザで長らくサポート済み。([MDN Web Docs][1])
• Service Worker も主要ブラウザで標準実装済みですが、一部の高度な API（Periodic Sync など）は実装状況に差があります。ターゲットブラウザを確認しつつ if ('serviceWorker' in navigator) でフォールバックを組むのが安全です。([MDN Web Docs][7], [web.dev][9])

まとめ

• 同じ「Worker」でも用途が全く異なるため置き換えはできません。
• Web Worker = 計算, Service Worker = オフライン&バックグラウンド と覚えると区別しやすいでしょう。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

https://developer.mozilla.org/en-US/docs/Web/API/Worker

https://dev.to/bharat5604/web-worker-service-worker-and-worklets-a-comprehensive-guide-1f64

Web Worker と Service Workerって何が違うの？ by Groq3

Web WorkerとService Workerは、どちらもJavaScriptをバックグラウンドで実行するための技術ですが、同じものではありません。それぞれの目的や機能が違います。

Web Worker

• 目的: CPU負荷の高い処理をメインスレッドから分離して、UIの応答性を保つ。
• 特徴:
  • メインスレッドとは別のスレッドでJavaScriptを実行。
  • DOMやwindowオブジェクトに直接アクセスできない。
  • 主に計算処理（例: 画像処理、データ解析）などに向いている。
  • ページのライフサイクルに依存し、ページが閉じると終了する。
• 例: 大量のデータを処理する計算をバックグラウンドで行う。

Service Worker

• 目的: ウェブアプリのオフライン機能やプッシュ通知、キャッシュ管理を実現する。
• 特徴:
  • ブラウザとネットワークの間にプロキシとして動作。
  • ネットワークリクエストのキャッシュやインターセプトが可能。
  • DOMにアクセスできないが、ネットワーク制御やバックグラウンド同期が可能。
  • ページのライフサイクルに依存せず、ブラウザが閉じていても動作可能。
• 例: オフラインでウェブページを表示したり、プッシュ通知を送信したりする。

主な違い

まとめ

• Web Workerは計算タスクの並列処理に特化。
• Service Workerはネットワーク制御やオフライン機能に特化。
  用途に応じて使い分ける必要があります。たとえば、PWA（プログレッシブウェブアプリ）ではService Workerを、オフラインで複雑な計算が必要な場合はWeb Workerを使うことが一般的です。

もし具体的なユースケースやコード例が必要なら、教えてください！

Web WorkerとService Workerの具体的なユースケースについて📝

Web WorkerとService Workerの具体的なユースケースと簡単なコード例を以下に示します。
両者の役割をより明確に理解できるように、実際の使用シナリオとコードを簡潔にまとめます。

Web Worker

ユースケース

• 画像処理: クライアント側で大きな画像データを処理（例: フィルタ適用、サイズ変更）。
• データ解析: 大量のJSONデータを処理して集計やフィルタリングを行う。
• リアルタイム計算: ゲームやシミュレーションで複雑な計算をバックグラウンドで実行。

コード例: フィボナッチ数列の計算

Web Workerを使って、CPU負荷の高いフィボナッチ数列の計算をバックグラウンドで実行し、UIをブロックしない例。

1. メインスクリプト (main.js)

// Web Workerのインスタンスを作成
const worker = new Worker('worker.js');

// ワーカーからのメッセージを受け取る
worker.onmessage = function (e) {
  console.log('結果:', e.data);
};

// ワーカーに計算を依頼
worker.postMessage(40); // 40番目のフィボナッチ数を計算

2. ワーカースクリプト (worker.js)

// フィボナッチ数列を計算する関数
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// メインスレッドからのメッセージを受け取る
self.onmessage = function (e) {
  const result = fibonacci(e.data);
  self.postMessage(result); // 結果をメインスレッドに送信
};

説明:

• main.jsでWeb Workerを起動し、worker.jsに計算を依頼。
• worker.jsでフィボナッチ数を計算し、結果をメインスレッドに送信。
• この処理はメインスレッドをブロックしないため、UIがフリーズしない。

Service Worker

ユースケース

• オフライン対応: ウェブページのキャッシュを管理し、オフラインでも閲覧可能にする（PWA）。
• プッシュ通知: サーバーからの通知をユーザーに送信。
• ネットワーク最適化: リクエストをキャッシュして高速化したり、特定のリソースを遅延読み込み。

コード例: シンプルなキャッシュ管理

Service Workerを使って、ページのHTMLやCSSをキャッシュし、オフラインでも表示可能にする例。

1. メインスクリプト (index.js)

// Service Workerの登録
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker 登録成功:', registration);
      })
      .catch(error => {
        console.log('Service Worker 登録失敗:', error);
      });
  });
}

2. Service Workerスクリプト (service-worker.js)

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
];

// Service Workerのインストール時にキャッシュを保存
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('キャッシュを開きました');
        return cache.addAll(urlsToCache);
      })
  );
});

// ネットワークリクエストをインターセプト
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // キャッシュがあれば返す、なければネットワークから取得
        return response || fetch(event.request);
      })
  );
});

説明:

• index.jsでService Workerを登録。
• service-worker.jsで、指定したリソース（index.html, styles.cssなど）をキャッシュ。
• fetchイベントで、ネットワークリクエストをインターセプトし、キャッシュがあればそれを返し、なければネットワークから取得。
• これにより、オフラインでもキャッシュされたページが表示可能。

ユースケースの比較

補足

• Web Workerは計算処理に特化し、DOMやネットワークには関与しない。例として、リアルタイムのデータ可視化や機械学習モデルの推論（軽量なもの）に使える。
• Service Workerはネットワーク制御やオフライン対応に特化。PWA開発では必須で、キャッシュ戦略（例: Cache First, Network First）を柔軟に設定可能。