2026年7月24日

WordPressのService Workerでオフラインキャッシュを実装

SEO・パフォーマンス

はじめに

Webサイトのユーザー体験を向上させる上で、オフラインでも利用可能なウェブアプリケーションは大きな利点を持っています。特にモバイルデバイスやインターネット接続が不安定な環境では、オフライン機能があるとユーザーにとって非常に便利です。

この記事では、WordPressサイトにService Workerを使用してオフラインキャッシュを実装する方法について詳しく説明します。これにより、ユーザーはウェブページの読み込み速度を向上させるとともに、ネットワーク接続が不安定な状況でもコンテンツを利用できるようになります。

症状・背景

このテーマが必要になる主な場面:

サイト訪問者がインターネット接続が不安定な環境で利用する場合
ユーザーがモバイルデバイスやスマートフォンで長時間ウェブサイトを利用する場合
SEOランキングを向上させ、ページ読み込み速度を改善したい場合
ユーザーフレンドリーなウェブアプリケーションを作成してユーザーのエンゲージメントを高めたい場合

手順・設定方法

ステップ1: Service Workerの追加

まず、Service Workerスクリプトファイルをウェブサイトに追加します。

# WordPressテーマディレクトリ内のjsサブディレクトリを作成（存在しない場合）
mkdir -p wp-content/themes/your-theme/js

# service-worker.jsファイルを作成し、次の内容を記述
echo 'self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open("my-cache").then(function(cache) {
      return cache.addAll([
        "/",
        "index.html",
        "style.css",
        "script.js"
      ]);
    })
  );
});' > wp-content/themes/your-theme/js/service-worker.js

ステップ2: Service Workerの登録

次に、Service Workerをウェブサイト上で登録します。

# functions.phpファイルを開き、以下のスクリプトを追加
echo 'function registerSW() {
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", function() {
      navigator.serviceWorker.register("/js/service-worker.js").then(function(registration) {
        console.log("ServiceWorker registration successful with scope: ", registration.scope);
      }, function(err) {
        console.log("ServiceWorker registration failed: ", err);
      });
    });
  }
}
add_action("wp_enqueue_scripts", "registerSW");' >> wp-content/themes/your-theme/functions.php

ステップ3: オフラインページの追加

オフライン状態で表示する専用ページを作成します。

# テーマディレクトリ内のoffline.htmlファイルを作成し、以下の内容を記述
echo '<html>
  <head>
    <title>Offline Page</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Your are offline</h1>
    <p>Please check your internet connection and try again.</p>
  </body>
</html>' > wp-content/themes/your-theme/offline.html

# service-worker.jsファイルに以下の内容を追加
echo '
self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

// Offline page support
self.addEventListener("sync", function(event) {
  if (event.tag === "forced-refresh") {
    clients.openWindow("/");
  }
});
' >> wp-content/themes/your-theme/js/service-worker.js

# functions.phpファイルに以下のスクリプトを追加
echo 'add_action( "wp_footer", "offline_page" );
function offline_page() {
  echo "<script>
      if (!navigator.onLine) {
        window.location.href = '/offline.html';
      }
    </script>";
}' >> wp-content/themes/your-theme/functions.php

ステップ4: デプロイとテスト

変更をデプロイし、Service Workerが正しく機能することを確認します。

# サイトを更新して新しいファイルを反映させる
wp site update --force

# ブラウザの開発者ツールでService Workerタブを開き、インストールとアクティベーションを確認

注意事項

キャッシュサイズ: キャッシュされたデータの量は慎重に管理し、ウェブページの読み込み速度やサーバー負荷に影響を与えないように注意してください。
更新管理: Service Workerが正しく機能するためには、新しいバージョンをデプロイした際にはユーザーのキャッシュを更新する必要があります。
セキュリティ上の注意: サービスワーカーは重大なセキュリティリスクをもたらす可能性があるため、信頼性のあるコードとソースからインストールすることを忘れないでください。
パフォーマンス/運用上の注意: パフォーマンスに影響を与える可能性があるため、Service Workerのキャッシュ戦略は慎重に設計する必要があります。

まとめ

1. サービスワーカーのインストール: Service Workerをウェブサイト上で登録し、適切なファイルを追加します。

2. オフラインページの設定: ユーザーがオフラインになった場合に表示される専用ページを作成します。

3. キャッシュ戦略の設計: サービスワーカーを通じて、どのリソースをキャッシュするかを指定します。

4. デプロイとテスト: デプロイ後、Service Workerが正しく機能することを確認します。

5. 更新管理: Service Workerが最新の状態であることを常に保つように配慮してください。

Post Views: 12