Чудили ли сте се някога как изглежда, че някои уебсайтове продължават да работят дори когато сте офлайн? Тайната е проста: тези уебсайтове имат обслужващи работници.
Служителите за услуги са ключовата технология зад много от естествените подобни на приложения функции на съвременните уеб приложения.
Какво представляват обслужващи работници?
Обслужващите работници са специализиран вид JavaScript уеб работници. Service Worker е JavaScript файл, който функционира малко като прокси сървър. Той улавя изходящи мрежови заявки от вашето приложение, което ви позволява да създавате персонализирани отговори. Можете например да сервирате кеширани файлове на потребителя, когато е офлайн.
Работниците за услуги също ви позволяват да добавяте функции като фоново синхронизиране към вашите уеб приложения.
Защо обслужващи работници?
Уеб разработчиците се опитват да разширят възможностите на своите приложения от дълго време. Преди да се появят обслужващи работници, можете да използвате различни решения, за да направите това възможно. Особено забележителен беше AppCache, който направи ресурсите за кеширане удобни. За съжаление имаше проблеми, които го направиха непрактично решение за повечето приложения.
AppCache изглеждаше добра идея, защото ви позволяваше да посочите активи за кеширане наистина лесно. Той обаче направи много предположения за това, което се опитвате да направите, и след това се счупи ужасно, когато приложението ви не следваше точно тези предположения. Прочетете Джейк Арчибалд (за съжаление озаглавен, но добре написан) Кешът на приложенията е глупак за повече информация. (Източник: MDN)
Работниците за услуги са настоящият опит за намаляване на ограниченията на уеб приложенията, без недостатъците на технологии като AppCache.
Случаи на употреба за обслужващи работници
И така, какво точно ви позволяват обслужващите работници? Работниците за услуги ви позволяват да добавяте функции, които са характерни за родните приложения към вашето уеб приложение. Те могат също така да осигурят нормално изживяване на устройства, които не поддържат обслужващи работници. Приложения като това понякога се наричат Прогресивни уеб приложения (PWA).
Ето някои от функциите, които сътрудниците на услугата правят възможни:
- Позволява на потребителя да продължи да използва приложението (или поне части от него), когато вече не е свързан с интернет. Служителите постигат това чрез обслужване на кеширани активи в отговор на заявки.
- В браузърите, базирани на Chromium, service worker е едно от изискванията, за да може едно уеб приложение да може да се инсталира.
- Сервизните работници са необходими, за да може вашето уеб приложение да изпълнява насочени известия.
Жизненият цикъл на обслужващ работник
Служителите могат да контролират заявки за цял сайт или само за част от страниците на сайта. Конкретна уеб страница може да има само един активен обслужващ работник и всички обслужващи работници имат жизнен цикъл, базиран на събития. Жизненият цикъл на обслужващ работник обикновено изглежда така:
- Регистрация и изтегляне на работника. Животът на услугата започва, когато JavaScript файл го регистрира. Ако регистрацията е успешна, услугата се изтегля и след това започва да работи в специална нишка.
- Когато се зареди страница, контролирана от услугата, услугата получава събитие „инсталиране“. Това винаги е първото събитие, което услугата получава и можете да настроите слушател за това събитие в работната програма. Събитието „инсталиране“ обикновено се използва за извличане и/или кеширане на всички ресурси, от които се нуждае услугата.
- След като сервизният работник завърши инсталирането, той получава събитие „активиране“. Това събитие позволява на работника да изчисти излишните ресурси, използвани от предишни обслужващи работници. Ако актуализирате услуга, събитието за активиране ще се активира само когато е безопасно да направите това. Това е, когато няма заредени страници, които все още използват старата версия на услугата.
- След това сервизният работник има пълен контрол върху всички страници, които са били заредени след успешното му регистриране.
- Последната фаза от жизнения цикъл е резервирането, което се случва, когато сервизният работник бъде премахнат или заменен с по-нова версия.
Как да използвате Service Workers в JavaScript
API на Service Worker (MDN) предоставя интерфейса, който ви позволява да създавате и взаимодействате с обслужващи работници в JavaScript.
Служителите основно се занимават с мрежови заявки и други асинхронни събития. В резултат на това API на услугата се използва интензивно Обещания и асинхронно програмиране.
За да създадете сервизен работник, първото нещо, което трябва да направите, е да се обадите на navigator.serviceWorker.register() метод. Ето как може да изглежда това:
ако ('serviceWorker' в навигатора) {
navigator.serviceWorker.register('/sw.js').then(функция(Регистрация){
console.log('Регистрацията на сервизен работник е успешна:', Регистрация);
}).catch((грешка) => { console.log('Неуспешна регистрация на Service Worker:', грешка); });
} друго {
console.log('Служителите не се поддържат.');
}
Най-външният if блок извършва откриване на функция. Той гарантира, че свързаният с услугата код ще работи само в браузъри, които поддържат услугата.
След това кодът извиква регистрирам метод. Той му предава пътя до обслужващия работник (спрямо произхода на сайта), за да се регистрира и да го изтегли. The регистрирам Методът също приема незадължителен параметър, наречен scope, който може да се използва за ограничаване на страниците, контролирани от работника. Сервизните работници контролират всички страници на приложението по подразбиране. The регистрирам метод връща обещание, което показва дали регистрацията е била успешна.
Ако обещанието се разреши, сервизният работник се е регистрирал успешно. След това кодът отпечатва обект, представляващ регистрирания сервизен работник на конзолата.
Ако процесът на регистрация е неуспешен, кодът улавя грешката и я регистрира в конзолата.
След това ето опростен пример за това как може да изглежда самият service worker:
self.addEventListener('Инсталирай', (събитие) => {
event.waitUntil(новобещание((разреши, отхвърли) => {
console.log("извършване на настройка")
разреши ()
}))
console.log("Сервизният работник завърши инсталирането")
})self.addEventListener('активирате', (събитие) => {
event.waitUntil(новобещание((разреши, отхвърли) => {
console.log("правя неща за почистване!")
разреши ()
}))
console.log('активирането е готово!')
})
self.addEventListener('извличам', (събитие) => {
console.log("Заявката е прихваната", събитие)
});
Този работник на демонстрационна услуга има три слушатели на събития, регистрирани срещу себе си. Има едно за събитието „инсталиране“, събитието „активиране“ и събитието „извличане“.
Вътре в първите два слушателя кодът използва изчакай докато метод. Този метод приема обещание. Неговата работа е да се увери, че обслужващият работник ще изчака Promise да разреши или отхвърли, преди да премине към следващото събитие.
Слушателят на извличане се задейства всеки път, когато е направена заявка за ресурс, контролиран от работника на услугата.
Ресурсите, контролирани от услугата, включват всички страници, които той контролира, както и всички активи, посочени в тези страници.
Подобрете вашите уеб приложения със Service Workers
Служителите за услуги са специален вид уеб работници, които служат на уникална цел. Те стоят пред мрежовите заявки, за да активират функции като офлайн достъп до приложения. Използването на обслужващи работници в уеб приложение може значително да подобри потребителското изживяване. Можете да създавате сервизни работници и да взаимодействате с тях, като използвате API на сервизния работник.
