5 способов, которыми сервисные работники изменяют современные веб-приложения

Сервисные работники предлагают множество интересных возможностей современным веб-приложениям. Они выходят далеко за традиционные рамки простого JavaScript, работающего в браузере. Эти воркеры работают в фоновом режиме и выполняют задачи, не требующие взаимодействия с пользователем.

В этой статье я расскажу о пяти расширенных функциях, которые сервис-воркеры добавляют в ваши веб-приложения.

Как только вы влюбитесь в сервис-воркеров, я рекомендую вам создавать свои собственные многоразовые функции, которые уменьшают количество шаблонов, необходимых для использования одной из многих возможностей SW. Вы можете использовать концентраторы компонентов, такие как Bit (Github), чтобы делиться своими функциями и повторно использовать их в будущих проектах (или даже обновлять их и синхронизировать изменения в используемых ими проектах).

1. Основа для создания автономных веб-приложений

Проблемы с подключением составляют значительную часть плохого использования, особенно при просмотре с мобильного телефона. Сервис-воркеры позволяют разработчикам создавать в веб-приложении автономный режим работы, что улучшит общее взаимодействие с пользователем. Однако при разработке автономных веб-приложений следует учитывать несколько аспектов.

Отображение настраиваемой офлайн-страницы

Использование отдельной автономной страницы - распространенная стратегия для обработки автономных сценариев. Разработчик может создать автономную страницу и позволить работнику службы предварительно загрузить ее и добавить в кеш. В случае сбоя подключения сервисный работник может отобразить настраиваемую автономную страницу.

self.addEventListener("install", function (event) {
  const offlineRequest = new Request("offline.html");
  event.waitUntil(
    fetch(offlineRequest).then(function (response) {
      return caches.open("offline").then(function (cache) {
        return cache.put(offlineRequest, response);
      });
    })
  );
});
self.addEventListener("fetch", function (event) {
  const request = event.request;
  if (request.method === "GET") {
    event.respondWith(
      fetch(request).catch(function (error) {
        return caches.open("offline").then(function (cache) {
          return cache.match("offline.html");
        });
      })
    );
  }
});

В этом сервис-воркере, когда он будет установлен, он получит автономную страницу и кэширует ее. Впоследствии, если мы попытаемся сделать запрос GET, а подключение больше не будет доступно, он проверит кеш браузера и ответит настраиваемой автономной страницей.

Кэшировать ресурс с использованием стратегии кэширования и обслуживать запрос

Обслуживание кэшированного содержимого для пользователя имеет важное значение для реализации автономного подхода для веб-приложений. Есть несколько стратегий для добавления ресурсов в кеш.

Устаревший во время повторной валидации
Сначала кеш, затем сетевое подключение
Сначала сетевое соединение, затем кеш
Только кеш

Несмотря на то, что стратегии разные, концепция кеширования очень похожа. Давайте посмотрим на следующий фрагмент.

self.addEventListener("install", function (e) {
  e.waitUntil(
    caches.open("resources").then(function (cache) {
      return cache.addAll([
        "/",
        "/index.html",
        "/help.html",
        "/about.html",
        "/styles/main.css",
        "/scripts/main.min.js",
        "/assets/logo.jpg",
      ]);
    })
  );
});
self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    })
  );
});

Здесь, когда Service worker устанавливается, он извлекает все ресурсы, необходимые для работы веб-приложения, такие как HTML-страницы, таблицы стилей, сценарии Java и изображения. Всякий раз, когда приложение пытается получить объект, оно будет отвечать кешированным объектом, если он доступен в кеше. В противном случае он принесет его с сервера ресурсов.

Использование фоновой синхронизации с сервис-воркерами

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

Фоновая синхронизация дает нам возможность дождаться подключения, а затем принять меры. Например, подумайте о сценарии, когда приложение чата должно получать новые сообщения. Мы можем делегировать операцию чтения данных с сервера фоновой синхронизации и позволить ему ждать соединения.

В основном файле скрипта мы можем зарегистрировать синхронизацию следующим образом:

navigator.serviceWorker.ready.then(function (registration) {
  return registration.sync.register("fetchChat");
});

В Service Worker мы можем обрабатывать синхронизацию следующим образом:

self.addEventListener("sync", function (event) {
  if (event.tag == "fetchChat") {
    event.waitUntil(getChatMessagesFromServer());
  }
});

2. Push-уведомления.

Push-уведомления - еще одна возможность сервис-воркеров, которая дает возможность повторно взаимодействовать с пользователями.

С помощью сервис-воркеров вы можете делать много вещей с помощью push-уведомлений, например:

Отображение простого оповещения
Отображение богатого контента
Пометка push-уведомлений
Управление подпиской и т. Д.

Эти возможности позволят реализовать ряд сценариев использования.

3. Балансировка нагрузки на стороне клиента.

Как сервис-воркер может перехватывать получение запросов и реализовывать алгоритм балансировки нагрузки.

self.onfetch = function(event) {
  var request = event.request;
  event.respondWith(loadBalancedFetch(request));
};
function loadBalancedFetch(request) {
 // Your load balancing algorithm
}

Наличие этой возможности на уровне браузера открывает множество возможностей. Один из лучших вариантов использования - реализация A / B-тестирования. В приведенном выше фрагменте кода можно проверить вызов API, и в зависимости от вашей стратегии разделения A / B; соответственно, вы можете направлять запросы к разным версиям API.

4. Офлайн-аналитика.

Сбор телеметрии, относящейся к пользователям в веб-приложении, очень полезен, когда речь идет об аналитике поведения пользователей. Типичные аналитические платформы требуют активного соединения для отправки этих данных на сервер. Однако с помощью сервис-воркеров вы можете фиксировать поведение пользователя на стороне клиента и отправлять его в аналитический механизм с фоновой синхронизацией. Реализовать это самостоятельно может оказаться непростой задачей. Google разработал инструмент для поддержки офлайн-аналитики под названием Workbox Google Analytics. Вы можете прочитать об этом подробнее, перейдя по следующей ссылке.

Рабочая панель Google Analytics | Разработчики Google
Если вы создаете приложение, которое работает в автономном режиме, то понимаете, как пользователи взаимодействуют с вашим приложением, когда… developers.google.com

5. Автоматическая отработка отказа

Представьте, что у вас есть несколько серверов для получения данных, и один из ваших серверов начинает выходить из строя. Используя сервис-воркеры, мы можем быстро реализовать резервный механизм для получения данных / ресурсов с другого сервера. В приведенном ниже примере вы можете видеть, что мы используем блок catch для переключения при отказе.

const FALLBACK_SERVER = "my.server.com";
self.addEventListener("fetch", function (event) {
  event.respondWith(
    fetch(event.request.url)
      .then((response) => {
        if (response.ok) {
          return response;
        } else {
          throw new Error("Unable to fetch");
        }
      })
      .catch((err) => {
        return fetch(FALLBACK_SERVER);
      })
  );
});

Резюме

В этой статье мы обсудили возможности и различные варианты использования Service Workers. Согласно пунктам обсуждения, очевидно, что сервис-воркеры предоставляют разработчикам большие возможности для создания полнофункциональных веб-приложений с отличным пользовательским интерфейсом.

Совместное использование и управление повторно используемыми JS-компонентами с помощью Bit

Используйте Bit (Github) для совместного использования, документирования и управления повторно используемыми компонентами из разных проектов. Это отличный способ увеличить повторное использование кода, ускорить разработку и создавать масштабируемые приложения.

Bit поддерживает Node, TypeScript, React, Vue, Angular и другие.