Была ли у вас ситуация, когда загрузка сайта занимала слишком много времени, как на этой гифке ниже?

? Слышали ли вы о работниках сферы обслуживания?

В этом посте мы углубимся в то, что такое сервис-воркеры?, как они работают ⚙️ и как я использовал их для повышения производительности своего веб-приложения.

Что такое сервисный работник? ?

Service Worker — это фоновый скрипт, который запускается отдельно от веб-страницы и может:

• Кэшировать ресурсы ?️
• Перехват сетевых запросов ?
• Реализовать офлайн-функциональность ?

Основные характеристики работников сферы услуг:

1. Работает в фоновом режиме: работники службы не привязаны к жизненному циклу страницы, то есть они могут продолжать работу, даже если страница закрыта
2. Управление событиями: работники службы прослушивают определенные события, например сетевые запросы (событие выборки)
3. Нет доступа к DOM: в отличие от других веб-работников, сервисные работники не имеют прямого доступа к 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) регистрируется при загрузке страницы. Если регистрация прошла успешно, она регистрирует область действия сервис-воркера; в противном случае регистрируется ошибка.

Моя задача: интеграция игры Unity WebGL на веб-страницу

Я интегрировал игру Unity WebGL в веб-сайт .NET Razor. Игра состояла из больших файлов «.wasm» и «.data», а также файлов JavaScript, которые были необходимы для загрузки игры. Однако первая загрузка страницы заняла более 20 секунд! ? В первую очередь это было связано с размером файлов «.wasm» и «.data».

Решение: кэширование с помощью Service Workers

Я создал файл 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 и выпускаем новые версии, кэшированные файлы необходимо очищать каждый раз при развертывании новой версии.

Чтобы решить эту проблему, я создал сценарий конвейера, который автоматически отменяет регистрацию старого сервис-воркера и очищает кеш всякий раз, когда мы публикуем новую сборку игры. Это гарантирует, что пользователи всегда загружают новейшие ресурсы, не зацикливаясь на старых, кэшированных версиях.

Заключение

Внедрение сервис-воркеров в ваше веб-приложение может значительно повысить производительность, особенно при работе с большими ресурсами, как в моей игре Unity WebGL. Однако важно осторожно обращаться с кешированием, чтобы избежать использования устаревших файлов.

Был ли у вас подобный опыт оптимизации времени загрузки? Использовали ли вы сервис-воркеров или другие методы? Поделитесь своими мыслями и идеями в комментариях ниже! ?

Надеюсь, вы узнали сегодня что-то новое! ✌️