CodeKitchen

初心者のためのService Worker入門 - Webアプリをオフラインでも使えるようにしよう

PWA performance

1. はじめに

近年、Webアプリケーションはますます複雑になり、ユーザーはネイティブアプリに匹敵する体験を求めるようになってきました。そこで注目されているのが、Service Workerです。Service Workerを使うことで、オフライン環境でもWebアプリを利用可能にしたり、パフォーマンスを向上させたりすることができます。

Service Workerは、Webアプリとブラウザの間に位置する独立したJavaScriptファイルで、ネットワークリクエストの傍受やキャッシュの管理、プッシュ通知の処理などを行います。これにより、ユーザーはオンラインでもオフラインでもシームレスにWebアプリを使うことができるようになります。

2. Service Workerの基本概念

2-1. Service Workerのライフサイクル

Service Workerには、以下のようなライフサイクルがあります。

インストール待機アクティブ化アイドル終了
  • インストール: Service Workerがブラウザに登録され、必要なリソースがキャッシュされる。
  • 待機: 現在のService Workerが制御中の場合、新しいService Workerは待機状態になる。
  • アクティブ化: 古いService Workerが終了し、新しいService Workerが制御を開始する。
  • アイドル: イベントが発生するまで、Service Workerはアイドル状態になる。
  • 終了: Service Workerが不要になった場合、ブラウザによって終了される。

2-2. Service Workerの登録と動作

Service Workerを使うには、まず以下のようにService Workerを登録する必要があります。

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then((registration) => {
        console.log("Service Worker registered:", registration);
      })
      .catch((error) => {
        console.error("Service Worker registration failed:", error);
      });
  });
}

登録されたService Workerは、fetchイベントを使ってネットワークリクエストを傍受し、キャッシュされたリソースを返すことができます。

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      return fetch(event.request);
    }),
  );
});

2-3. Service Workerが実行できる主なタスク

Service Workerは、以下のような主なタスクを実行できます。

  • キャッシュの管理: 静的リソースや動的リソースをキャッシュし、オフラインでもアプリを使えるようにする。
  • バックグラウンド同期: オフライン時に行われた変更を、オンラインに戻った際に同期する。
  • プッシュ通知: サーバーからのプッシュ通知を受信し、ユーザーに表示する。
  • バックグラウンドデータ同期: バックグラウンドでデータを同期し、アプリのパフォーマンスを向上させる。

次の章では、これらのタスクを実際にService Workerで実装する方法について説明します。

3. Service Workerの使い方

この章では、Service Workerを実際に使う方法について、コードを交えて説明します。

3-1. Service Workerのインストールと有効化

Service Workerをインストールするには、以下のようなコードを使います。

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("my-cache").then((cache) => {
      return cache.addAll(["/", "/styles.css", "/script.js", "/image.png"]);
    }),
  );
});

ここでは、installイベントを使ってService Workerをインストールし、必要なリソースをキャッシュに追加しています。

Service Workerを有効化するには、以下のようなコードを使います。

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((cacheName) => {
            return cacheName !== "my-cache";
          })
          .map((cacheName) => {
            return caches.delete(cacheName);
          }),
      );
    }),
  );
});

ここでは、activateイベントを使ってService Workerを有効化し、不要なキャッシュを削除しています。

3-2. キャッシュの管理

Service Workerでは、cacheAPIを使ってキャッシュを管理します。静的リソースをキャッシュするには、以下のようなコードを使います。

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    }),
  );
});

ここでは、fetchイベントを使ってネットワークリクエストを傍受し、キャッシュにリソースがあれば、それを返します。キャッシュにリソースがない場合は、ネットワークからリソースを取得します。

動的リソースをキャッシュするには、以下のようなコードを使います。

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open("my-cache").then((cache) => {
      return fetch(event.request).then((response) => {
        cache.put(event.request, response.clone());
        return response;
      });
    }),
  );
});

ここでは、ネットワークからリソースを取得し、キャッシュに追加します。次回以降は、キャッシュからリソースを返すことができます。

3-3. オフライン対応の実装

Service Workerを使って、オフライン対応を実装するには、以下のようなコードを使います。

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return (
        response ||
        fetch(event.request)
          .then((response) => {
            return caches.open("my-cache").then((cache) => {
              cache.put(event.request, response.clone());
              return response;
            });
          })
          .catch(() => {
            return caches.match("/offline.html");
          })
      );
    }),
  );
});

ここでは、ネットワークからリソースを取得できない場合、オフライン用のHTMLを返します。これにより、オフライン環境でもアプリを使えるようになります。

3-4. バックグラウンド同期の実装

Service Workerを使って、バックグラウンド同期を実装するには、以下のようなコードを使います。

self.addEventListener("sync", (event) => {
  if (event.tag === "my-sync") {
    event
      .waitUntil
      // バックグラウンド同期の処理
      ();
  }
});

ここでは、syncイベントを使ってバックグラウンド同期を実装しています。オフライン時に行われた変更は、オンラインに戻った際に同期されます。

以上が、Service Workerの基本的な使い方です。次の章では、Service Workerを使う上での注意点について説明します。

4. Service Workerの注意点

Service Workerを使う上では、いくつかの注意点があります。この章では、それらの注意点について説明します。

4-1. Service Workerの更新方法

Service Workerは、一度インストールされると、ページを再読み込みしても自動的に更新されません。Service Workerを更新するには、以下のようなコードを使います。

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("my-cache-v2").then((cache) => {
      return cache.addAll(["/", "/styles.css", "/script.js", "/image.png"]);
    }),
  );
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((cacheName) => {
            return cacheName !== "my-cache-v2";
          })
          .map((cacheName) => {
            return caches.delete(cacheName);
          }),
      );
    }),
  );
});

ここでは、キャッシュ名を変更することで、新しいService Workerをインストールし、古いService Workerを削除しています。

4-2. Service Workerのデバッグ方法

Service Workerをデバッグするには、ブラウザの開発者ツールを使います。例えば、Google Chromeの場合は、以下の手順でService Workerをデバッグできます。

  1. デベロッパーツールを開く（Ctrl + Shift + I）
  2. Applicationタブを選択
  3. Service Workersセクションを展開
  4. 対象のService Workerを選択
  5. Unregisterボタンをクリックして、Service Workerを登録解除
  6. ページを再読み込みして、新しいService Workerを登録

また、chrome://serviceworker-internalsにアクセスすることで、Service Workerの状態を確認することもできます。

4-3. Service Workerを使う上での制限事項

Service Workerを使う上では、以下のような制限事項があります。

  • Service Workerは、HTTPSまたはローカルホスト環境でのみ動作する
  • Service WorkerはDOM(Document Object Manipulator)に直接アクセスできない
  • Service Workerは、ブラウザの標準的なJavaScriptのAPI(Application Programming Interface)のサブセットのみを使用できる
  • Service Workerは、ブラウザのバージョンによって対応状況が異なる

これらの制限事項を理解した上で、Service Workerを使うようにしましょう。

次の章では、Service Workerの活用事例について説明します。

5. Service Workerの活用事例

Service Workerは、様々な場面で活用することができます。この章では、Service Workerの主な活用事例について説明します。

5-1. プログレッシブウェブアプリ（PWA）での活用

Service Workerは、プログレッシブウェブアプリ（PWA）の中核となる技術です。PWAは、Service Workerを使ってオフライン対応やプッシュ通知、ホーム画面への追加などを実現し、ネイティブアプリのようなユーザー体験を提供します。

以下は、PWAの主な特徴です。

  • オフライン対応: Service Workerを使って、オフラインでもアプリを使えるようにする
  • プッシュ通知: Service Workerを使って、プッシュ通知を送信する
  • ホーム画面への追加: マニフェストファイルを使って、アプリをホーム画面に追加できるようにする
  • 高速な読み込み: Service Workerを使って、キャッシュからリソースを読み込むことで、高速な読み込みを実現する

PWAは、Service Workerを活用することで、Webアプリの可能性を大きく広げています。

5-2. プッシュ通知の実装

Service Workerを使って、プッシュ通知を実装するには、以下のようなコードを使います。

self.addEventListener("push", (event) => {
  const title = "プッシュ通知";
  const options = {
    body: event.data.text(),
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

ここでは、pushイベントを使ってプッシュ通知を受信し、showNotificationメソッドを使って通知を表示しています。

5-3. バックグラウンドデータ同期の実装

Service Workerを使って、バックグラウンドデータ同期を実装するには、以下のようなコードを使います。

self.addEventListener("sync", (event) => {
  if (event.tag === "data-sync") {
    event.waitUntil(
      fetch("/api/sync-data")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          // データの処理
        }),
    );
  }
});

ここでは、syncイベントを使ってバックグラウンドデータ同期を実装しています。サーバーからデータを取得し、バックグラウンドで処理を行います。

以上が、Service Workerの主な活用事例です。Service Workerを活用することで、Webアプリの可能性を大きく広げることができます。

6. まとめ

この記事では、Service Workerの基本概念から活用事例までを詳しく説明してきました。ここでは、Service Workerの役割と重要性、およびService Workerを使ったWebアプリ開発のポイントについて、改めてまとめます。

6-1. Service Workerの役割と重要性

Service Workerは、Webアプリとブラウザの間に位置する独立したJavaScriptファイルで、以下のような重要な役割を果たします。

  • オフライン対応: Service Workerを使って、オフラインでもアプリを使えるようにする
  • パフォーマンスの向上: Service Workerを使って、キャッシュからリソースを読み込むことで、高速な読み込みを実現する
  • プッシュ通知: Service Workerを使って、プッシュ通知を送信する
  • バックグラウンド同期: Service Workerを使って、バックグラウンドでデータを同期する

Service Workerは、これらの機能を提供することで、Webアプリの可能性を大きく広げています。特に、PWAの中核となる技術として、Service Workerは重要な役割を果たしています。

6-2. Service Workerを使ったWebアプリ開発のポイント

Service Workerを使ってWebアプリを開発する際は、以下のようなポイントに注意しましょう。

  • HTTPS環境で動作させる: Service Workerは、セキュリティ上の理由からHTTPS環境でのみ動作する
  • 適切なキャッシュ戦略を選択する: リソースの種類や更新頻度に応じて、適切なキャッシュ戦略を選択する
  • エラーハンドリングを適切に行う: Service Workerの登録や動作に失敗した場合に、適切にエラーハンドリングを行う
  • ユーザーへの説明を怠らない: オフライン対応やプッシュ通知など、ユーザーにとって新しい機能を提供する場合は、適切に説明を行う

これらのポイントに注意しつつ、Service Workerを活用することで、より高度なWebアプリを開発することができます。

Service Workerは、Webアプリの可能性を大きく広げる技術です。まだ発展途上の技術ではありますが、今後もさらなる進化が期待されています。この記事を通じて、Service Workerの基本的な概念や使い方が理解できたのではないでしょうか。ぜひ、自分のWebアプリにService Workerを導入して、より高度なユーザー体験を提供してみてください。

以上で、「初心者のためのService Worker入門」を終わります。Happy coding!

負荷試験ツールvegetaを使って、Webアプリケーションのパフォーマンスを評価・改善する方法を解説。負荷試験の基礎から、テストの計画、実行、分析、自動化、チューニングまで、実践的なテクニックが満載。ケーススタディや付録も充実した、負荷試験のための完全ガイドです。

vegetaで実践する負荷試験 - パフォーマンス改善のための完全ガイド

PWA performance
初心者のためのProgressive Web Apps（PWA）入門

初心者のためのProgressive Web Apps（PWA）入門

PWA performance
logo

Web Developer。パフォーマンス改善、データ分析基盤、生成AIに興味があり。Next.js, Terraform, AWS, Rails, Pythonを中心に開発スキルを磨いています。技術に関して幅広く投稿していきます。