Как интегрировать Service Workers в приложения Next.js

Сервисные работники — это сценарии, которые выполняются в фоновом режиме и предоставляют мощные возможности кэширования и другие функции современным веб-приложениям.

Эти функции обеспечивают удобство и удобство работы с собственными приложениями в веб-браузере.

Сервисные работники являются фундаментальным компонентом при создании прогрессивных веб-приложений (PWA).

Понимание сервисных работников

Сервисный работник – это разновидность Веб-работник JavaScript который работает в фоновом режиме, отдельно от основного потока JavaScript, поэтому не блокируется. Это означает, что это не вызывает задержек или прерываний пользовательского интерфейса приложения или взаимодействия пользователя с ним.

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

Ключевые приложения для сервисных работников

Есть несколько приложений для сервисников. Они включают:

• PWA: Сервисные работники предоставляют большие возможности Progressive Web Apps. Они выполняют пользовательские сетевые запросы, push-уведомления, автономную поддержку и быструю загрузку.
• Кэширование: Работники службы могут хранить ресурсы приложения — изображения, код JavaScript и файлы CSS — в кэше браузера. Это позволяет браузеру извлекать их из своего кэша, а не получать их с удаленного сервера по сети. В результате контент загружается быстрее, что особенно полезно для пользователей с медленным или ненадежным подключением к Интернету.
• Фоновая синхронизация: Сервисные работники могут синхронизировать данные и выполнять другие фоновые задачи, даже если пользователь не взаимодействует активно с приложением или когда приложение не открыто в браузере.

Интеграция Service Workers в приложениях Next.js

Прежде чем углубиться в код, полезно понять, как работают сервисные работники. Есть два ключевых этапа использования сервис-воркеров: Регистрация и активация.

На первом этапе браузер регистрирует сервис-воркера. Вот простой пример:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

Код сначала проверяет, поддерживает ли браузер сервис-воркеров, что делают все современные веб-браузеры. Если такая поддержка существует, происходит регистрация сервисного работника, расположенного по указанному пути к файлу.

На этапе активации вам необходимо установить и активировать сервис-воркер, прослушав установить и активировать события с использованием Слушатели событий JavaScript. Вот как вы можете этого добиться:

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

Вы можете указать этот код сразу после процесса регистрации. Он должен запуститься сразу после успешного завершения процесса регистрации сервисного работника.

Вы можете найти код этого проекта в его GitHub хранилище.

Создайте проект Next.js

Чтобы начать, запустите эту команду, чтобы локально создать проект Next.js:

npx create-next-app next-project

Добавление сервисного работника в приложение Next.js включает в себя следующие шаги:

1. Зарегистрируйте сервисного работника в среде глобальной области действия.
2. Создайте файл JavaScript сервисного работника в общедоступном каталоге.

Добавление сервисного работника

Сначала зарегистрируйте сервис-воркера. Обновите src/pages/_app.js файл следующим образом. Включение кода в этот файл гарантирует, что работник службы зарегистрируется при загрузке приложения и получит доступ ко всем ресурсам приложения.

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

использованиеЭффект перехват срабатывает, когда компонент монтируется. Как и в предыдущем примере, код сначала проверяет, поддерживает ли браузер пользователя сервис-воркеры.

Если поддержка существует, она регистрирует сценарий сервисного работника, расположенный по указанному пути к файлу, и указывает его область действия как «/”. Это означает, что сервисный работник контролирует все ресурсы приложения. Если хотите, вы можете указать более детальную область действия, например: «/products”.

Если регистрация прошла успешно, регистрируется сообщение об успехе вместе с областью действия. Если в процессе регистрации произойдет ошибка, код отловит ее и зарегистрирует сообщение об ошибке.

Установите и активируйте Service Worker

Добавьте следующий код в новый файл: общественный/сервис-worker.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

Чтобы проверить, успешно ли зарегистрирован, установлен и активирован сервис-воркер, запустите сервер разработки и откройте приложение в браузере.

npm run dev

Открыть Инструменты разработчика Chrome (или эквивалент вашего браузера) и перейдите к Приложение вкладка. Под Сервисные работники разделе вы должны увидеть зарегистрированного вами сервисного работника.

После успешной регистрации, установки и активации сервисного работника вы можете реализовать несколько функций, таких как кэширование, фоновая синхронизация или отправка push-уведомлений.

Кэширование ресурсов с помощью Service Workers

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

Чтобы кэшировать ресурсы приложения, включите следующий код в файл сервис-worker.js файл.

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

Когда пользователь впервые обращается к домашней странице, этот код проверяет, есть ли в кеше кэшированный ответ на запрос. Если кэшированный ответ существует, служба возвращает его клиенту.

Если кэшированного ответа не существует, сервисный работник извлекает ресурс с сервера по сети. Он передает ответ клиенту и кэширует его для будущих запросов.

Чтобы просмотреть кэшированные ресурсы, откройте вкладку «Приложение» в инструментах разработчика. Под Кэш-хранилище разделе вы должны увидеть список кэшированных ресурсов. Вы также можете проверить Не в сети вариант под Сервисный работник раздел и перезагрузите страницу, чтобы имитировать работу в автономном режиме.

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

Использование Service Workers для повышения производительности

Сервисные работники — мощный инструмент для повышения производительности приложений Next.js. Они могут кэшировать ресурсы, перехватывать запросы и обеспечивать автономную поддержку, и все это может улучшить взаимодействие с пользователем.

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