以下のGIFのように、ウェブサイトの読み込みに時間がかかりすぎるという状況はありませんか?

? サービス ワーカーについて聞いたことがありますか?

この投稿では、Service Worker とは何なのか、Service Worker がどのように機能するのか、⚙️、そして Web アプリケーションのパフォーマンスを向上させるために Service Worker をどのように使用したかについて詳しく説明します。

Service Worker とは何ですか? ?

Service Worker は、Web ページとは別に実行されるバックグラウンド スクリプトであり、次のことができます。

• アセットをキャッシュする ?️
• ネットワークリクエストを傍受しますか?
• オフライン機能を提供しますか?

Service Worker の主な特徴:

1. バックグラウンドで実行: Service Worker はページのライフサイクルに関連付けられていないため、ページが閉じられていても実行を続けることができます
2. イベント駆動型: サービス ワーカーは、ネットワーク リクエスト (イベントの取得) などの特定のイベントをリッスンします
3. DOM アクセスなし: 他の Web ワーカーとは異なり、サービス ワーカーは DOM に直接アクセスできません。バックグラウンドで動作し、リソースとネットワーク トラフィックを管理します

Service Worker スクリプトの簡単な例を次に示します:

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

?このスニペットでは、ページの読み込み時に Service Worker (service-worker.js) が登録されます。登録が成功すると、Service Worker のスコープが記録されます。それ以外の場合は、エラーがログに記録されます。

私の課題: Unity WebGL ゲームを Web ページに統合する

Unity WebGL ゲームを .NET Razor Web サイトに統合していました。ゲームは、ゲームのロードに不可欠な JavaScript ファイルとともに、大きな「.wasm」ファイルと「.data」ファイルで構成されていました。ただし、初めてページが読み込まれるときは 20 秒以上かかりました。 ?これは主に、「.wasm」ファイルと「.data」ファイルのサイズが原因でした。

解決策: Service Worker を使用したキャッシュ

ロード時間を短縮するために必要なすべてのゲーム アセットをキャッシュする「ServiceWorker.js」ファイルを作成しました。ファイルの内容は次のとおりです:

const cacheName = "$Project_name";
const contentToCache = [
    "Build/Game.loader.js",
    "Build/Game.framework.js",
    "Build/Game.data",
    "Build/Game.wasm",
    "TemplateData/game_style.css"
];

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');

    e.waitUntil((async function () {
        try {
            const cache = await caches.open(cacheName);
            console.log('[Service Worker] Caching all: app shell and content');
            for (const resource of contentToCache) {
                try {
                    await cache.add(resource);
                } catch (error) {
                    console.error(`[Service Worker] Failed to cache: ${resource}`, error);
                }
            }
        } catch (error) {
            console.error('[Service Worker] Failed to open cache', error);
        }
    })());
});

self.addEventListener('fetch', function (e) {
     e.respondWith((async function () {
        try {
            const response = await caches.match(e.request);
            console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
            if (response) return response;

            const fetchResponse = await fetch(e.request);
            const cache = await caches.open(cacheName);
            console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
            await cache.put(e.request, fetchResponse.clone());
            return fetchResponse;
        } catch (error) {
            console.error(`[Service Worker] Error fetching resource: ${e.request.url}`, error);
            throw error;
        }
    })());
});

このコードは何をしますか?

この Service Worker スクリプトは次のアクションを実行します:

• インストール段階で、「.wasm」、「.data」、JS ファイルなど、ゲームの実行に必要な必須ファイルをキャッシュします。
• キャッシュされたリソースが利用可能な場合は、フェッチ要求をインターセプトして提供します。リソースがキャッシュにない場合は、ネットワークからリソースを取得してキャッシュし、応答を返します。

結果: パフォーマンスが大幅に向上

これらのアセットをキャッシュすることにより、読み込み時間が 20 秒から 3 秒未満に短縮されました。次回ユーザーがページにアクセスすると、アセットはすでにローカルに保存されているため、エクスペリエンスが大幅に高速化されます。

⚠️気をつけてください！キャッシュの問題

このアプローチはパフォーマンスの向上に驚くほど効果的ですが、古いキャッシュされたファイルという別の問題が発生しました。私たちは Unity ゲームを積極的に開発し、新しいバージョンをリリースしているため、新しいバージョンがデプロイされるたびにキャッシュされたファイルをクリアする必要がありました。

これを解決するために、新しいゲーム ビルドを公開するたびに自動的に 古い Service Worker の登録を解除し キャッシュをクリアするパイプライン スクリプトを作成しました。これにより、ユーザーはキャッシュされた古いバージョンに固執することなく、常に最新のアセットをロードできるようになります。

結論

Web アプリケーションに Service Worker を実装すると、特に Unity WebGL ゲームのような大規模なアセットを扱う場合、パフォーマンスが大幅に向上します。ただし、古いファイルが提供されないようにキャッシュを慎重に処理することが重要です。

ロード時間を最適化する際に同じような経験をしたことがありますか? Service Worker または他のテクニックを使用しましたか?以下のコメント欄であなたの考えや洞察を共有してください! ?

今日は何か新しいことを学べたでしょうか。 ✌️