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

Работниците за услуги са скриптове, които се изпълняват във фонов режим, за да предоставят мощни възможности за кеширане и други функции на съвременните уеб приложения.

Тези функции осигуряват безпроблемното и удобно изживяване на собствените приложения в уеб браузъра.

Сервизните работници са основен компонент в създаването на прогресивни уеб приложения (PWA).

Разбиране на обслужващите работници

Обслужващ работник е вид JavaScript уеб работник който работи във фонов режим, отделно от основната JavaScript нишка, така че да не блокира. Това означава, че не причинява забавяне или прекъсване на потребителския интерфейс на приложението или взаимодействието на потребителя с него.

Сервизните работници функционират като прокси сървъри – разположени между уеб приложенията и мрежата. Те могат да прихващат заявки и отговори, да кешират ресурси и да предоставят офлайн поддръжка. Това помага да се гарантира, че уеб приложенията се чувстват по-безпроблемни и удобни за потребителя, дори когато потребителят не е онлайн.

Ключови приложения за обслужващи работници

Има няколко приложения за обслужващи работници. Те включват:

• PWA: Служителите предоставят голяма мощ на прогресивните уеб приложения. Те изпълняват персонализирани мрежови заявки, насочени известия, офлайн поддръжка и бързо зареждане.
• Кеширане: Служителите могат да съхраняват активите на приложението – изображения, JavaScript код и CSS файлове – в кеша на браузъра. Това позволява на браузъра да ги извлича от кеша си, вместо да ги извлича от отдалечения сървър по мрежата. В резултат на това съдържанието се зарежда по-бързо, което е особено полезно за потребители с бавни или ненадеждни интернет връзки.
• Фоново синхронизиране: Служителите могат да синхронизират данни и да изпълняват други фонови задачи, дори когато потребителят не взаимодейства активно с приложението или когато приложението не е отворено в браузъра.

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

Преди да се потопите в кода, помага да разберете как работят сервизните работници. Има две ключови фази на използване на обслужващи работници: Регистрация и активиране.

По време на първата фаза браузърът регистрира услугата работник. Ето един прост пример:

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

Кодът първо проверява дали браузърът поддържа Service Workers, което правят всички съвременни уеб браузъри. Ако тази поддръжка съществува, тя продължава да регистрира работник на услугата, намиращ се на посочения файлов път.

Във фазата на активиране трябва да инсталирате и активирате сервизен работник, като слушате Инсталирай и активирате събития, използващи 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 файл на услугата в публичната директория.

Добавяне на Service Worker

Първо, регистрирайте обслужващ работник. Актуализирайте src/страници/_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} />;
} 

The useEffect куката се задейства, когато компонентът се монтира. Подобно на предишния пример, кодът първо проверява дали браузърът на потребителя поддържа обслужващи работници.

Ако поддръжката съществува, тя регистрира скрипта на услугата, намиращ се на посочения файлов път, и посочва неговия обхват като „/”. Това означава, че обслужващият работник има контрол върху всички ресурси в приложението. Можете да предоставите по-подробен обхват, ако желаете, напр. „/products”.

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

Инсталирайте и активирайте Service Worker

Добавете следния код към нов файл, public/service-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 прозорец (или еквивалент на вашия браузър) и отидете до Приложение раздел. Под Обслужващи работници раздел, трябва да видите сервизния работник, който сте регистрирали.

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

Кеширане на ресурси със Service Workers

Кеширането на активи на приложението на устройството на потребителя може да подобри производителността, като позволи по-бърз достъп, особено в ситуации с ненадеждни интернет връзки.

За да кеширате активите на приложението, включете следния код в service-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 за подобряване на производителността

Service Workers са мощен инструмент за подобряване на производителността на приложенията Next.js. Те могат да кешират ресурси, да прихващат заявки и да предоставят офлайн поддръжка, като всичко това може да подобри потребителското изживяване.

Въпреки това е важно да се отбележи, че обслужващите работници също могат да бъдат сложни за внедряване и управление. Важно е внимателно да обмислите потенциалните предимства и недостатъци на сервизните работници, преди да ги използвате.