Какво е Service Worker?

Service worker е скрипт, който вашият браузър пуска на заден фон, отделно от уеб страницата. Този скрипт ви отваря вратата към нови функции, които нямат нужда от уеб страница или интеракция с потребител. Днес Service Worker включва функции като известия и синхронизация на заден фон. Причината това API да е толкова интересно е, защото позволява пълен контрол на разработчиците, дори когато са офлайн.

Преди Service Worker имаше друг API, който осигуряваше подобен офлайн опит за разработчиците, AppCache. Service Worker се опитва да избегне многото проблеми, които имаше AppCache.

Ето някои детайли, които трябва да знаете за Service Worker:

Това е JavaScript Worker, следователно няма директен достъп по DOM. Вместо това, Service Worker може да комуникира със страниците, които контролира, като отговаря на съобщения, изпратени от интерфейс, а пък отделно страниците могат да манипулират DOM.
Service Worker е програмируемо мрежово прокси, който ви позволява да контролирате как се обработват мрежовите заявки от вашата страница.
Той се прекратява, когато не се използва, и се рестартира, когато е необходимо, така че не можете да разчитате на глобално състояние в обработващите onfetch и onmetch на Service Worker. Ако има информация, която трябва да се запази и да се използва повторно в рестартиранията, Service Worker има достъп до API на IndexedDB.

Какво може да прави Service Worker?
Някои примери за това, което можете да направите, като добавите Service Worker към вашия сайт, включват;

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

Добавяне на Service Worker към вашия проект
Внедряването на Service Worker включва добавяне на определен код към вашия HTML или съществуващ JavaScript и добавяне на нов JavaScript файл към вашия проект, който ще действа като самия скрипт. Кодът в HTML ще каже на браузъра, че го „регистрира“.

Има два различни начина, по които можете да използвате кода на тази услуга за проекта ви. Единият начин е чрез PWA строител, а другият чрез инструмента Service Worker Toolbox. В тази статия ще разгледаме подробно само PWA строителя.

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

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

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

За всяка опция ще трябва да добавите „Код за уебсайт“ в HTML хедъра между някои <script> </script> маркери и да добавите услугата към проекта като JavaScript файл. Уверете се, че е кръстен по същия начин както HTML. В повечето случаи ще трябва малко да редактирате кода на HTML или Service Worker-a или да добавите други файлове.

Забележка: Service Worker-a има достъп само до папките под себе си, така че вероятно е най-добре да го запазите най-отгоре на проекта (най-горната папка).

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

След като добавите кода към вашия проект, ще трябва да създадете файл, наречен offline.html, който ще бъде страницата, която се появява, когато потребителят няма достъп до интернет.

Ако заредите уебсайта си, а след това отидете офлайн, когато навигирате към друга страница, сега ще виждате страницата си offline.html вместо браузъра да ви казва, че не сте свързани с интернет. Това е полезно, тъй като все още можете да дадете съдържание на потребителите си, дори когато са офлайн.

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

Подобно на другите опции, просто поставяте кода на worker-a и уебсайта в проекта си и сте готови. Няма допълнителни редакции или нови страници за добавяне.

Това е любимата опция на доста хора, тъй като не изисква никаква допълнителна настройка, но трябва да направите някои тестове, за да се уверите, че работи правилно.

Офлайн копие с архив
Тази опция комбинира и двете предишни варианта в един Service Worker. Ако потребителят е посетил сайта ви и след това се върне в офлайн режим, ще може да посещава страници, които е видял и преди. Ако стигнат до нова страница, вместо това ще се покаже персонализираната ви офлайн страница.

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

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