您是否遇到過網站載入時間過長的情況，如下圖所示？

？你聽過服務人員嗎？

在這篇文章中，我們將深入探討什麼是 Service Worker？ 、它們如何運作 ⚙️，以及我如何使用它們來提高 Web 應用程式的效能。

什麼是 Service Worker？ ?

Service Worker 是一個獨立於網頁運行的後台腳本，可以：

• 快取資源？ ️
• 攔截網路請求？
• 提供離線功能？

Service Workers 的主要特徵：

1. 在背景運行：Service Worker 不依賴頁面的生命週期，這意味著即使頁面關閉，它們也可以繼續運行
2. 事件驅動：Service Worker監聽特定事件，例如網路請求（取得事件）
3. 無 DOM 存取權：與其他 Web Worker 不同，Service Worker 無法直接存取 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.js) 在頁面載入時註冊。如果註冊成功，它會記錄 Service Worker 的範圍；否則，它會記錄錯誤。

我的挑戰：將 Unity WebGL 遊戲整合到網頁中

我正在將 Unity WebGL 遊戲整合到 .NET Razor 網站中。遊戲由大型「.wasm」和「.data」檔案以及對於遊戲載入至關重要的 JavaScript 檔案組成。然而，第一次加載頁面花了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;
        }
    })());
});

這段程式碼的作用是什麼？

此服務工作執行緒腳本執行下列操作：

• 快取遊戲運作所需的基本文件，包括安裝階段的「.wasm」、「.data」和JS檔案。
• 攔截獲取請求以提供快取資源（如果可用）。如果資源不在快取中，它將從網路取得、快取並回傳回應。

結果：性能顯著提升

透過快取這些資源，載入時間從 20 秒減少到 3 秒以下？當用戶下次造訪該頁面時，資產已經儲存在本地，大大加快了體驗速度。

⚠️要小心！快取問題

雖然這種方法對於提高效能有奇效，但它引入了另一個問題：過時的快取檔案。由於我們正在積極開發Unity遊戲並發布新版本，因此每次部署新版本時都需要清除快取檔案。

為了解決這個問題，我創建了一個管道腳本，每當我們發布新的遊戲版本時，它都會自動取消註冊舊的服務工作者並清除快取。這可確保使用者始終載入最新的資源，而不會被舊的快取版本所困擾。

結論

在 Web 應用程式中實現 Service Worker 可以顯著提高效能，尤其是在處理大型資源（例如在我的 Unity WebGL 遊戲中）時。然而，重要的是仔細處理快取以避免提供過時的檔案。

您在優化載入時間方面有類似的經驗嗎？您使用了服務人員或其他技術嗎？在下面的評論中分享您的想法和見解！ ？

希望您今天學到新東西了！ ✌️