Service Workers — це сценарії, які виконуються у фоновому режимі, щоб забезпечити потужні можливості кешування та інші функції для сучасних веб-програм.
Ці функції створюють у веб-браузері безперебійну та зручну роботу рідних програм.
Сервісні працівники є фундаментальним компонентом у створенні прогресивних веб-додатків (PWA).
Розуміння працівників сфери обслуговування
Service Worker — це тип веб-воркера JavaScript, який працює у фоновому режимі, окремо від основного потоку JavaScript, тому він не блокується. Це означає, що це не викликає затримок або перерв в інтерфейсі користувача програми або взаємодії користувача з нею.
Сервісні працівники функціонують як проксі-сервери, розташовані між веб-додатками та мережею. Вони можуть перехоплювати запити та відповіді, кешувати ресурси та надавати підтримку в автономному режимі. Це допомагає переконатися, що веб-програми виглядають більш зручними та зручними, навіть коли користувач не в мережі.
Основні програми для працівників сфери обслуговування
Для працівників сфери обслуговування є кілька додатків. Вони включають:
- PWA: Service Workers надають велику потужність прогресивним веб-програмам. Вони виконують спеціальні мережеві запити, 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 включає наступні кроки:
Додавання Service Worker
Спочатку зареєструйте сервісного працівника. Оновіть файл src/pages/_app.js наступним чином. Включення коду в цей файл гарантує, що сервіс-воркер реєструється під час завантаження програми та має доступ до всіх ресурсів програми.
import { useEffect } from 'react';export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
Хук 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 ви повинні побачити зареєстрованого вами сервісного працівника.
Успішно зареєструвавши, інсталювавши та активувавши сервіс-воркер, ви можете реалізувати кілька функцій, наприклад кешування, фонову синхронізацію або надсилання push-повідомлень.
Кешування ресурсів за допомогою 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;
});
});
})
);
});
Коли користувач вперше відкриває домашню сторінку, цей код перевіряє, чи є кешована відповідь на запит у кеші. Якщо кешована відповідь існує, служба повертає її клієнту.
Якщо кешованої відповіді немає, сервіс-воркер отримує ресурс із сервера через мережу. Він подає відповідь клієнту та кешує її для майбутніх запитів.
Щоб переглянути кешовані ресурси, відкрийте вкладку «Програма» в інструментах розробника. У розділі Cache Storage ви повинні побачити список кешованих активів. Ви також можете перевірити опцію Offline у розділі Service Worker і оновити сторінку, щоб імітувати роботу в автономному режимі.
Тепер, коли ви відвідуєте домашню сторінку, браузер обслуговуватиме ресурси, що зберігаються в кеші, замість того, щоб намагатися робити мережеві запити для отримання даних.
Використання Service Workers для підвищення продуктивності
Service Workers — це потужний інструмент для підвищення продуктивності програм Next.js. Вони можуть кешувати ресурси, перехоплювати запити та надавати підтримку в автономному режимі, що може покращити роботу користувача.
Однак важливо зазначити, що сервіс-воркери також можуть бути складними для впровадження та керування. Важливо ретельно розглянути потенційні переваги та недоліки сервіс-воркерів, перш ніж використовувати їх.