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

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

Сервис SwUpdate

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

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

Доступные и активированные обновления

Два события обновления, доступные и активированные, являются наблюдаемыми свойствами SwUpdate:

Код TypeScript:

@Injectable()
export class LogUpdateService {
  constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
    });
    updates.activated.subscribe(event => {
      console.log('old version was', event.previous);
      console.log('new version is', event.current);
    });
  }
}

Демонстрация в реальном времени:

См. Pen log-update.service.ts от w3resource ( @ w3resource ) на CodePen .

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

Проверка обновлений

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

Сделайте это с помощью метода checkForUpdate ():

проверить-для-update.service.ts

Код TypeScript:

@Injectable()
export class LogUpdateService {
  constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
    });
    updates.activated.subscribe(event => {
      console.log('old version was', event.previous);
      console.log('new version is', event.current);
    });
  }
}

Демонстрация в реальном времени:

См. Pen check-for-update.service.ts от w3resource ( @ w3resource ) на CodePen .

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

Чтобы избежать негативного влияния на начальный рендеринг, ServiceWorkerModule по умолчанию будет ожидать стабилизации приложения перед регистрацией сценария ServiceWorker. Постоянный опрос на наличие обновлений, например, с помощью interval (), будет препятствовать стабилизации приложения, и сценарий ServiceWorker никогда не будет зарегистрирован в браузере.

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

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

Принудительная активация обновления

Если текущая вкладка должна быть немедленно обновлена до последней версии приложения, она может попросить сделать это с помощью метода activUpdate ():

Код TypeScript:

@Injectable()
export class PromptUpdateService {
  constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      if (promptUser(event)) {
        updates.activateUpdate().then(() => document.location.reload());
      }
    }); 
  }
}

Демонстрация в реальном времени:

См. Pen prompt-update.service.ts от w3resource ( @ w3resource ) на CodePen .

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

Предыдущий: App shell
Далее: Настройка рабочего сервиса