Рубрики

Сервисные работники в Javascript

Что такое сервисный работник:
Сервисный работник — это скрипт, который выполняется независимо в фоновом режиме браузера. На стороне пользователя он может перехватывать свои сетевые запросы и решать, что загружать ( извлекать ).
Сервисные работники в основном обслуживают такие функции, как фоновая синхронизация, push-уведомления, и они обычно используются для «автономных первых» приложений, предоставляя разработчикам возможность получить полный контроль над пользовательским интерфейсом.

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

Жизненный цикл сервисного работника:
Жизненный цикл работника сервиса полностью отделен от веб-страницы. Это программируемый сетевой прокси, который завершается, когда он не используется, и перезапускается, когда в следующий раз это необходимо. Работники службы в значительной степени полагаются на использование обещаний Javascript , поэтому хорошо бы их просмотреть, если они для вас новички.

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

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

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

Ниже приведено изображение места работника сервиса между браузером и сетью.

Цепочка запросов веб-сайта с использованием Service Worker.

Предпосылки:

  1. HTTPS если только на локальном хосте
    • Сервисные работники требуют использования HTTPS-соединения. Перед развертыванием рабочие работают под локальным сервером, но если вы хотите загрузить его в Интернет, вам нужно настроить HTTPS на вашем сервере. Хорошее место для размещения бесплатных демонстраций — это страницы GitHub , которые работают по протоколу HTTPS.
  2. Поддержка браузера
    • Сервисные работники высоко поддерживаются через Интернет Chrome , Firefox , Opera , Safari и Edge , что делает их достойными для развертывания.

Постановка на учет:
Для настройки сервисного работника его необходимо зарегистрировать. Это сделано в Javascript вашей страницы. После регистрации сервисного работника браузер начнет устанавливать его в фоновом режиме.

// Убедитесь, что браузер поддерживает API сервисного работника

if (navigator.serviceWorker) {

  // Запуск процесса регистрации при каждой загрузке страницы

  window.addEventListener('load', () => {

      navigator.serviceWorker

          // Функция регистра принимает в качестве аргумента

          // путь к файлу рабочего

          .register('/service_worker.js')

          // Gives us registration object

          .then(reg => console.log('Service Worker Registered'))

          .catch(swErr => console.log(

                `Service Worker Installation Error: ${swErr}}`));

    });

}

Установка:
После того, как сервисный работник зарегистрирован, его нужно установить, это делается в файле сервисного работника и там, где вы обычно хотите получить ресурсы кэша.

Следующие шаги должны быть предприняты:

  1. Открыть кеш
  2. Кэшируйте активы
  3. Убедитесь, что кэширование прошло успешно

var cacheName = 'geeks-cache-v1';

var cacheAssets = [

    '/assets/pages/offline-page.html',

    '/assets/styles/offline-page.css',

    '/assets/script/offline-page.js',

  
];

  
// Вызов установить событие

self.addEventListener('install', e => {

    // Дождаться окончания обещания

    e.waitUntil(

        caches.open(cacheName)

        .then(cache => {

            console.log(`Service Worker: Caching Files: ${cache}`);

            cache.addAll(cacheAssets)

                // Когда все установлено

                .then(() => self.skipWaiting())

        })

    );

})

Активация:

// Call Activate Event

self.addEventListener('activate', e => {

    console.log('Service Worker: Activated');

    // Очистить старые кэши, просматривая все

    // кэшируем и удаляем любые старые кэши или кэши, которые

    // не определены в списке

    e.waitUntil(

        caches.keys().then(cacheNames => {

            return Promise.all(

                cacheNames.map(

                    cache => {

                        if (cache !== cacheName) {

                            console.log('Service Worker: Clearing Old Cache');

                            return caches.delete(cache);

                        }

                    }

                )

            )

        })

    );

})

Извлечение события:
Как только сервисный работник настроен, он должен начать взаимодействовать и использовать кэшированные ответы. Когда конкретный пользователь перемещается по веб-страницам, работник сервиса начинает получать события выборки . В следующем примере демонстрируется случай, когда работник получает событие выборки и ищет соответствующий кеш, если он есть, он возвращает кэшированный файл / значение, в противном случае он возвращает ответ по умолчанию на вызов fetch.

var cacheName = 'geeks-cache-v1';

  
// Call Fetch Event

self.addEventListener('fetch', e => {

    console.log('Service Worker: Fetching');

    e.respondWith(

        fetch(e.request)

        .then(res => {

            // Ответ является потоком и в порядке браузера

            // потреблять ответ и в то же время

            // кешируем ответ, который должен быть

            // клонирован, чтобы иметь два потока.

            const resClone = res.clone();

            // Открыть кеш

            caches.open(cacheName)

                .then(cache => {

                    // Добавить ответ в кеш

                    cache.put(e.request, resClone);

                });

            return res;

        }).catch(

            err => caches.match(e.request)

            .then(res => res)

        )

    );

});

Сервисный работник не может:

  • Доступ к родительскому объекту
  • Доступ к объекту окна
  • Доступ к объекту документа
  • Доступ к DOM
  • Однако Сервисный работник может:

  • Активы кэша и вызовы API
  • Управление Push-уведомлениями
  • Контролировать сетевой трафик
  • Хранить кэш приложений
  • Общие случаи использования:

  • Оффлайн-оптимизированный опыт
  • Отправка Push-уведомлений
  • Фоновая синхронизация
  • Ссылка: https://developers.google.com/web/fundamentals/primers/service-workers/

    Рекомендуемые посты:

    Сервисные работники в Javascript

    0.00 (0%) 0 votes