Въведение в JavaScript Service Workers

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

Преглед

• Какво е Service Worker?
• Жизнени цикли на Service Worker
• Инсталиране на Service Worker
• Активирайте Service Worker
• Активен обслужващ работник
• Съкратен сервизен работник

Какво е Service Worker?

Service Worker е вид уеб работник, който работи във фонов режим на уеб приложение, независимо от основната нишка на уеб страницата. Те позволяват на разработчиците да създават офлайн уеб приложения, да се зареждат по-бързо и да осигуряват по-надеждно потребителско изживяване. Service Workers са съвместими с обикновени приложения на JavaScript, React, Angular, Svelte, Vue и др.

Едно от ключовите предимства на Service Workers е способността им да кешират активи като HTML, CSS, JavaScript, изображения и други файлове, което може да подобри производителността на уеб приложение. Чрез кеширане на тези активи Service Workers могат да намалят броя на заявките, направени към сървъра, и да позволят по-бързо зареждане на страници, особено когато потребителят е в бавна или ненадеждна мрежа.

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

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

Жизнени цикли на Service Worker

Регистрирайте Service Worker (index.js)

Първата стъпка в жизнения цикъл на Service Worker е регистрирането на Service Worker. Регистрацията обикновено се извършва във вашия основен JavaScript файл. Например файлът index.js.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

Логиката в оператора if ще провери дали навигаторът (браузърът) позволява Service Workers. Повечето съвременни уеб браузъри са удобни за Service Workers.

if ('serviceWorker' in navigator) {
  window.addEventListener('load',()=> {
  navigator.serviceWorker.register('/service-worker.js');
});

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

Инсталиране на Service Worker (service-worker.js)

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

Този цикъл има събитие за инсталиране, което се задейства, докато Service Worker се инсталира. По време на инсталирането на Service Worker можете да обработвате някои асинхронни операции, ако е необходимо, напр. кеширане на статични активи. Методът event.waitUntil() ще задържи Service Worker във фазата на инсталиране, докато обещанието, предадено на event.waitUntil(), бъде уредено. В зависимост от това дали това обещание е разрешено или отхвърлено, фазата на инсталиране или ще завърши успешно, или няма.

Ето как изглежда този код:

// The name of my cache
const cacheName = "my-pwa-shell-v1.0";
//The files I'm going to cache
const filesToCache = [
  "/",
  "index.html",
  "./js/index.js",
  "./styles/styles.css",
  '/manifest.json',
  './assets/icons/icon.png',
];

self.addEventListener("install", e => {
  console.log("[ServiceWorker] - Install");
  e.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    console.log("[ServiceWorker] - Caching app shell");
    await cache.addAll(filesToCache);
  })());
});

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

Активирайте Service Worker (service-worker.js)

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

self.addEventListener("activate", e => {
  e.waitUntil((async () => {
    // Get a list of all your caches in your app
    const keyList = await caches.keys();
    await Promise.all(
      keyList.map(key => {
        console.log(key);
        /* 
           Compare the name of your current cache you are iterating through
           and your new cache name
        */
        if (key !== cacheName) {
          console.log("[ServiceWorker] - Removing old cache", key);
          return caches.delete(key);
        }
      })
    );
  })());
  e.waitUntil(self.clients.claim());
});

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

Активиране на Service Worker

Service Worker може да влезе в състояние на активиране в различни сценарии. Ето някои от тези сценарии:

• Ако в приложението ви няма съществуващ Service Worker.
• Ако стартираме метода self.skipWaiting() в Service Worker.
• Ако потребителят се е отдалечил от страницата, освободете предишния активен Service Worker.
• Ако е изтекъл зададен период от време, освободете предишния активен Service Worker.

Active Service Worker (service-worker.js)

Когато работите със Service Workers, винаги можете да проверите статуса на регистрацията, като използвате регистрационния обект. В този пример проверявам дали регистрацията е активна с registration.active.

navigator.serviceWorker.register('./service-worker.js').then((registration)=> {
  if (registration.active) {
  console.log('Service worker is active');
  }
});

Излишен Service Worker (service-worker.js)

Service Worker може да бъде излишен (известен още като нещо не е наред) поради следните причини:

• Ако инсталацията е неуспешна
• Ако Service Worker се е провалил, когато се е активирал
• Ако нов Service Worker замени съществуващия Service Worker като активен Service Worker

Как да тествате дали вашият Service Worker работи и работи?

Тестването, ако вашият Service Worker работи и работи, е доста просто. Отворете браузъра си DevTools (аз използвам Chrome). След това щракнете върху раздела **Приложение** в горната част, след което щракнете върху Service Worker в лявата лента за навигация, както е показано на изображението по-долу.

Заключение

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

Общност на разработчиците на PayPal

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

Уебсайт: developer.paypal.com

Twitter: @paypaldev

GitHub: @paypal разработчик