Занимају вас офлајн веб апликације и како постићи нивое перформанси блиске изворним програмима? Не тражите даље од услужних радника.

Сервисни радници су скрипте које се покрећу у позадини како би пружиле моћне могућности кеширања и друге функције модерним веб апликацијама.

Ове функције веб претраживачу доносе беспрекорно и корисничко искуство са изворним апликацијама.

Сервисни радници су основна компонента у креирању прогресивних веб апликација (ПВА).

Разумевање услужних радника

Услужни радник је врста ЈаваСцрипт веб радник који ради у позадини, одвојен од главне ЈаваСцрипт нити, тако да не блокира. То значи да не узрокује кашњења или прекиде у корисничком интерфејсу апликације или интеракцији корисника са њом.

Сервисни радници функционишу као прокси сервери—седе између веб апликација и мреже. Они могу пресрести захтеве и одговоре, кеширати ресурсе и пружити подршку ван мреже. Ово помаже да се обезбеди да се веб апликације осећају беспрекорније и једноставније за коришћење, чак и када корисник није на мрежи.

instagram viewer

Кључне апликације за услужне раднике

Постоји неколико апликација за услужне раднике. То укључује:

  • ПВА: Сервисни радници пружају велику моћ прогресивним веб апликацијама. Они извршавају прилагођене мрежне захтеве, пусх обавештења, подршку ван мреже и брзо учитавање.
  • Кеширање: Радници сервиса могу да чувају средства апликације — слике, ЈаваСцрипт код и ЦСС датотеке — у кеш меморији претраживача. Ово омогућава претраживачу да их преузме из своје кеш меморије уместо да их преузме са удаљеног сервера преко мреже. Као резултат, садржај се брже учитава, што је посебно корисно за кориснике са спорим или непоузданим интернет везама.
  • Синхронизација у позадини: Сервисни радници могу да синхронизују податке и покрећу друге задатке у позадини, чак и када корисник није у активној интеракцији са апликацијом или када апликација није отворена у прегледачу.

Интеграција сервисера у Нект.јс апликације

Пре него што уђете у код, помаже да се разуме како раде услужни радници. Постоје две кључне фазе коришћења услужних радника: Регистрација и активирање.

Током прве фазе, претраживач региструје сервисера. Ево једноставног примера:

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

Код прво проверава да ли претраживач подржава сервисне раднике, што сви модерни веб претраживачи раде. Ако ова подршка постоји, наставља са регистрацијом сервисера који се налази на наведеној путањи датотеке.

У фази активације, потребно је да инсталирате и активирате сервисера слушањем инсталирај и активирати догађаји користећи ЈаваСцрипт слушаоци догађаја. Ево како то можете постићи:

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

Овај код можете укључити одмах након процеса регистрације. Требало би да се покрене одмах након што је процес регистрације сервисера успешан.

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум.

Направите Нект.јс пројекат

Да бисте започели, покрените ову команду да локално поставите пројекат Нект.јс:

npx create-next-app next-project

Додавање сервисера у Нект.јс апликацију укључује следеће кораке:

  1. Региструјте сервисера у глобалном окружењу.
  2. Креирајте ЈаваСцрипт датотеку сервисера у јавном директоријуму.

Додавање сервисера

Прво, региструјте услужног радника. Ажурирајте срц/пагес/_апп.јс датотеку на следећи начин. Укључивање кода у ову датотеку осигурава да се сервисер региструје када се апликација учита и да има приступ свим средствима апликације.

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”.

Ако је регистрација успешна, бележи поруку о успеху, заједно са својим опсегом. Ако дође до грешке током процеса регистрације, код ће је ухватити и пријавити поруку о грешци.

Инсталирајте и активирајте Сервице Воркер

Додајте следећи код у нову датотеку, публиц/сервице-воркер.јс.

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

Отвори Цхроме-ове алатке за програмере прозор (или еквивалент у вашем претраживачу) и идите на Апликација таб. Под Сервице Воркерс одељак, требало би да видите сервисера којег сте регистровали.

Када је сервисер успешно регистрован, инсталиран и активиран, можете имплементирати неколико функција као што су кеширање, синхронизација у позадини или слање пусх обавештења.

Кеширање ресурса са сервисерима

Кеширање средстава апликације на уређају корисника може побољшати перформансе омогућавањем бржег приступа, посебно у ситуацијама са непоузданим интернет везама.

Да бисте кеширали средства апликације, укључите следећи код у сервице-воркер.јс фајл.

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;
 });
 });
 })
 );
});

Када корисник први пут приступи почетној страници, овај код проверава да ли постоји кеширани одговор за захтев у кешу. Ако постоји кеширани одговор, услуга га враћа клијенту.

Ако не постоји кеширани одговор, сервисер преузима ресурс са сервера преко мреже. Он служи одговору клијенту и кешира га за будуће захтеве.

Да бисте видели кеширана средства, отворите картицу Апликација у алаткама за програмере. Под Цацхе Стораге одељак, требало би да видите листу кешираних средстава. Такође можете проверити Одсутан опција под Сервице Воркер одељак и поново учитајте страницу да бисте симулирали искуство ван мреже.

Сада, када посетите почетну страницу, претраживач ће служити ресурсе ускладиштене у кеш меморији уместо да покушава да поставља мрежне захтеве за преузимање података.

Коришћење сервисера за побољшање перформанси

Сервисни радници су моћан алат за побољшање перформанси Нект.јс апликација. Они могу да кеширају ресурсе, пресрећу захтеве и пружају подршку ван мреже, а све то може побољшати корисничко искуство.

Међутим, важно је напоменути да услужни радници такође могу бити сложени за имплементацију и управљање. Важно је пажљиво размотрити потенцијалне предности и недостатке услужних радника пре него што их користите.