Дорога к PWA – часть 2

navigator.serviceWorker
    .register($pathToServiceWorkerFile);

HTTPS. Только

Во время развития это нормально для установки сервисного работника от localhost Отказ Всякий раз, когда мы готовы опубликовать нашу PWA, нам требуется надлежащая настройка HTTPS.

Как упоминалось ранее, работники обслуживания действительно мощные в отношении запроса манипулирования. Вы не захотите установить такие вещи из небезопасных мест.

Этапы жизненного цикла

После звонка Регистрация () Метод, сервисный работник проходит через следующие три этапа:

1. Установить
2. Ожидающий
3. Активировать

Давайте посмотрим на каждый из этих этапов!

Этап 1: Установка сервисного работника

Всякий раз, когда мы пытаемся зарегистрировать новый сервисный работник или прикладные изменения в уже зарегистрированном, AN Установить событие уволено. Это событие является одним из событий жизненного цикла обслуживания работника, к которым мы можем прикрепить, и он идеально подходит для выполнения E.G. Предварительно кэширование для нашего приложения. Event.waituntil () дает нам возможность вручную продлевать Установить Этап, пока мы не сделаем с нашей первоначальной настройкой.

Мы обсудим перед кэшированием и кэшированием в целом в моем следующем посте.

Этап 2: Ожидание активации

Немедленно обновление сервисного работника может быть плохой идеей. В случае, если мы обновили свое поведение в E.g. Верните другой ответ, чем раньше, мы хотели бы включить «чистый разрез», прежде чем новая версия будет активирована.

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

• Если мы действительно хотим, мы можем переопределить это поведение, позвонив Self.skipwaiting () Внутри сервисного работника к немедлению введите следующий этап.

Этап 3: Активируя обслуживающий рабочий

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

Похож на Установить Событие, мы можем вручную продлевать этот этап, позвонив Event.waituntil () Отказ При этом мы можем выполнить задачи очистки для удаления устаревших данных от других работников.

Типичная задача сделать на этом этапе, состоит в том, чтобы убрать в конце концов устаревшие кэши. Еще раз, мы посмотрим на это в моем следующем посте.

Следующий фрагмент показывает содержание одного из моих RegisterServiceWorker.js Файлы:

import {
    capabilities
} from "./capabilities";

console.log('Trying to register service worker.');
if (capabilities.sw) {
    navigator.serviceWorker
        .register('../../sw.js')
        .then(registration => {
          console.log("Registered service worker with scope: " + registration.scope);
        });
} else {
    console.log('Service workers not supported, skipping registration.');
}

Этот довольно короткий фрагмент кода на самом деле содержит довольно много, чтобы обсудить.

navigator.serviceWorker
    .register('../../sw.js');

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

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

Каждый запрос, который мы выдаем в нашем приложении, имеет источник . И сервисный работник настраивается, что происхождение падает под его контроль. По умолчанию приспособление сервисного работника устанавливается на его местоположение, поэтому, когда он находится на нашем уровне корневого уровня, он контролирует целую область, и мы можем перехватить каждый запрос. При установке на E.g. ./OTHER/SCORE. Мы сможем перехватить только запрос из https://toplevel.domain/oTher/scope Отказ Область SW настраивается путем передачи объекта конфигурации к Регистрация () вызов.

{
  scope: './other/scope'
}

Вообще говоря, мы можем настроить только настроить объем, который больше всего на том же уровне, что и наш сервисный работник или ниже. Так что это невозможно (по крайней мере, не без дополнительной работы) для настройки / Область применения для обслуживания, расположенного в Е.Г. /src./js/sw.js Отказ

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

Поддержка обслуживания работника

Еще одна деталь стоит упомянуть, является следующий импорт:

import {
    capabilities
} from "./capabilities";

Я представил этот модуль для удобства.

export const capabilities = {
    sw: 'serviceWorker' in navigator,
    idb: 'indexedDB' in window,
    sync: 'serviceWorker' in navigator && 'SyncManager' in window
};

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

Есть еще несколько чеков, с которыми мы будем иметь дело с позже, на данный момент мы просто проверяем

'serviceWorker' in navigator

caniuse.com Предоставляет обзор, которые версии браузера поддерживают обслуживающие работники.

В этом посте мы узнали о возможностях обслуживания работников и их жизненным циклом. Немного примера кода демонстрировал, как зарегистрировать сервис-работника и как настроить дополнительный объем. Мы говорили о том, как мы можем манипулировать макс. Область применения, добавив Допустимый сервис-работник Заголовок и как проверить для совместимости браузера.

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

• Предварительная кэширование
• Динамическое кеширование
• Кэширование динамического контента
• Утилиты кэша

К концу моего следующего поста у нас будет все, чтобы сделать наш PWA установить на мобильные устройства!

Увидимся в следующий раз!

Симон