Увёліце падтрымку без сеті ў веб-дзеяннях за дапамою Service Workers

Уявіце чалавека, якій трэба переглядаць ваш сайт пад час паўзы ў пояздзе, пры чым сігнал то з’яўляецца, то зникае кожныя калькі секунд. На большасці веб-сайтаў такая нестабільная з’яноса означае прыпынэнне роботы — памылка браузера, якая спавешчае, што адключаны. А што, як ваш сайт мог бы цэлкам айснаваць гэтыя проблемы і продовжваць працаваць?

Гэта не якаясь експерыментальная функцыя будучыні. Ёй можна досягнуць вэснаўкі за дапамогою тэхналогіі браузера пад назвай Service Worker. Service Worker дзейнае як скрытак, які стоіць межы вашага веб-дзеяння і сеті. Ён можа перехапіць запыткі, якія выправляюцца да сервера, і сам адпаведзе на яны за дапамогою файлаў, якія зберагліся локальна, таму ваш сайт можа продовжваць працаваць нават без жадной з’яносы.

Этот трюк не толькі дае можлівасць выкарыстоўваць альтернатыўны варіант, калі ён не падходзіць — ён таксама можа значна прышвартаваць час завантажэння і зробіць ваш прыклад дапрацоўкі надзвычайна стойкім да проблем з сетям. І хоць гэта звучыць складна, нараджэнне такой сістэмы є дасцатна простым.

Што дапамагае ў рэалізацыі гэтага трюку: Service Workers у поўнай супрацоўке з Cache API

Две функцыі браузера разам дазволяют цэлком реалізаваць гэта:

1. Service Worker: фонавы скрыпт, які працюе незалежна ад главнага потока стораніцы і выступае як альтернатыўны шар сеті.
2. Cache API: вбудованы інтерфейс браузера, які дазволяе програмна зберагаць і выкарыстоўваць ресурсы, падобна да хранілні з ключамі і значэннямі. Сюды ж зберагаецца HTML, CSS, JavaScript, атракцыі і іншыя матэрыялы, якія неабходны для роботы вашага сайту.

Гэта загальны прыток: калі хтось упершыню адвяжаецца да вашага сайту через Інтэрнет, Service Worker сам сабе інсталюецца і завантажае важлівыя файлы ў свой кэш. Пасля гэтага кожны сетавы запит вашай сторанкі спачатку проходзіць через Service Worker. Калі адвяжаны чалавек трапляецца без з’ўязку, worker адпавядае, выкарыстоўваючы тое, што ён вялікі кэшаваў, замест таго, каб прабаваць — і неудачна — дасягнуць сервера, таму сторанка все равно атрымліваецца практычна мгновенна.

Шаг 1: Напісаць скрыпт Service Worker

Пачніце з стварэння файла пад назвай sw.js у корані вашага проекту. Гэты скрыпт адпавядае за інсталляцыю кэша і перехопленне будучых запитоў.

// sw.js

const CACHE_NAME = 'my-website-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/images/logo.png'
];

// The 'install' event is fired when the service worker is first installed.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// The 'fetch' event is fired for every network request.
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // If the request is in the cache, serve the cached version.
        if (response) {
          console.log('Serving from cache:', event.request.url);
          return response;
        }

        // Otherwise, fetch from the network.
        console.log('Fetching from network:', event.request.url);
        return fetch(event.request);
      })
  );
});

Гэты файл пераважна слухае два запусковыя супэрвізныя заўсёды:

• install: гэта тое месца, дзе вы ачынаеце кеш з назвам і заполняеце яго спісам файлаў, якія хочаце маты доступныя нават без з’ёднання сеті.
• fetch: гэтыя запускі выклікаюцца для кожнага запиту, які робіць сторанка. Рабочы процес пераканальваецца, чы не існуе ўжо адпаведнай адпаведзі в кешы; якщо так, то вяртаецца тая кэшаваная копія, а якщо ні, то запит адправляецца ў сеть як звычайна.

Шаг 2: Зарэўнаваць рабочы процес з вашай аплікацыі

Калі скрыпт рабочага процесу вже існуе, браузеру все равно трэба сказаць, каб ён яго выкорыстоўваў. Дадаце следуючы фрагмент у ваш файл галоўнага скрыпта або вставіце яго ўнутрь тага <script> у вашым HTML.

// Register the service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered successfully:', registration);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

Эты блакет спачатку перакантрацуе, чы роўным лівам текущы браузер падтрымае API Service Worker, і як толькі так, зарэгіструе ваш файл sw.js. Зверніце увагу на шлях, які викорыстоўваецца для рэгістрацыі: файл /sw.js павінен знаходзіцца ў коране вашага сайту, адтак як Service Worker можа кераваць толькі тымі сторанкамі, якія знаходзяцца ў межах дырэктарыі, з якой ён зарэгістраваны.

Перакантрацуе, чы ён працюе

Ёжчэ бачыць, як гэта працюе, запусціце свой сайт у браузеры, які падтрымляе Service Workers — Chrome, Firefox і Edge ўсе падходзяць.

• Ачыніце інструменты разработчыка браузера (F12 або Ctrl+Shift+I).
• Перайдзіце на панель Application.
• У бокавай панелі знайдзіце Service Workers. Ваш файл sw.js павінен там выказвацца як актыўны.

Адзін раз клікніце на Cache Storage, каб парадактаваць, чы ўсё ж такі існуе ваш кэш з назвай і чы ён містіць файлы, якія вы пераказалі.

Прызначыце галочку пры пунктаванні "Offline" ў верхней частцы раздзела Service Worker.

Перазавантажыце сторунку.

Якщо всё налажана правільна, сторунка запускаецца адразу, нават калі няма доступу да сеті. Рэзультаты работы консолі ў інструментах развіцця парадактаваюць, чы запиты перехопляюцца і адпавядаюць безпосередна з кэша, а не з сеті.

Дальнейшая праця з гэтым патерном: альтернатыўныя стратегіі кэшавання

Тое, што ўжо было описана, вядома як падход калі спачатку кэш, а толькі пасля — сеть — чырвоны для ресурсаў, якія рэдка змінююцца, такіх як статычныя картынкі аб’еднаныя скрыпты. Але Service Workers не обмежваюцца толькі гэтым патерном; існуе ўсё больш альтернатыўных распашчацоў:

• Спачатку сеть, толькі як альтэратыва кашэ: падходзіць для контента, які часта зміняецца і павінен застаўся актуальным. Процес выконвання спачатку прабуеяць запрашаць даны з сеті, і толькі як толькі такі запит не выйшае, напрыклад, з-за слабкага з’яўлення, ён пераходзіць на варыянт з кашэ.
• Стары контент паказваецца, пакуль адбываецца пераверыць: працоўнік негайна адпавядае тым, што вже ёсць у кашэ, для прышвычкі, а ў той жа час у фоне выканваецца запит да сеті, каб параднаваць кашэ для наступнага завантажэння сторанкі. Чыгунтаеце швальныя адпаведзі зараз і актуальны контент пасля гэтага.

Знанне гэтага базовага патэрану роботы без сеті таксама дапамагае ствараць полныя прогрэсіўныя веб-дзеяння, дзе падтрымка роботы без сеті спаўнаюцца з такімі можлівасцямі, як пуш-паведамленні і можлівасць установкі сайту на галоўны экран прыстрою як натывнага дзеяння.

Дадзенне гэтага шаблона да вашага проекта — это стосункова невялікі вклад за значны рэзультат: у звяроце замест таго, каб ён цэлком зірваў работу, вашы корыстнікі практычна не зазначаюць перерыву.