Как разработать заставку PWA с помощью Angular 8+

Когда вы уже создали (Angular) PWA, вы, вероятно, заметили, что сервис-воркер выполнит самообновление, но в фоновом режиме. Это означает, что когда вы развертываете новую версию своего приложения на своем сервере, в следующий раз, когда пользователь откроет приложение, оно автоматически обновится в фоновом режиме. Но в текущем сеансе пользователь видит старую версию приложения.

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

И я покажу вам, как это сделать.

🤔 Какова наша цель?

Обычное приложение Angular очень легко преобразовать в PWA. Вы просто запускаете несколько команд CLI, создаете значок и настраиваете цвета темы. Но нет такого понятия, как заставка из коробки.

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

Это один из классных примеров заставки на сайте dribbble.com, который мы могли бы реализовать с помощью следующего урока:



Болтливость - Анимация заставки
Самое время наконец рассказать об одном из проектов, над которым я работал (время от времени) в течение последних нескольких месяцев. … dribbble.com



❓Как проверить наличие обновлений

Angular предоставляет службу под названием SWUpdate, которая содержит всю информацию о вашем приложении и возможных обновлениях.

class SwUpdate {
   available: Observable<UpdateAvailableEvent>
   activated: Observable<UpdateActivatedEvent>
   isEnabled: boolean
   checkForUpdate(): Promise<void>
   activateUpdate(): Promise<void>
 }

источник: https://angular.io/api/service-worker/SwUpdate

Для чего нужны эти свойства и методы?

доступно
Этот наблюдаемый излучается всякий раз, когда обнаруживается новая версия. Он ищет новую версию при запуске или всякий раз, когда вы используете checkForUpdate().

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

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

checkForUpdate ()
Этот метод запускает проверку обновлений. К сожалению, он не возвращает значения. Таким образом, вы должны использовать его в сочетании с SwUpdate.available.

activateUpdate ()
Этот метод заставляет сервис-воркера активировать новую версию, но она по-прежнему используется только при следующей загрузке.

🤖 Итак, как мы можем использовать это в сочетании с заставкой?

Прежде всего, нам понадобится заставка, которая видна по умолчанию.

Этот экран-заставка представляет собой простой компонент Angular, имеющий position: absolute и стоящий над всем остальным. Когда мы уверены, что доступных обновлений нет, мы убираем заставку. Этот компонент нужно добавить в ваш корень AppComponent.

Теперь нам понадобится PwaService:

Важное примечание: ServiceWorkerModule ожидает стабилизации приложения перед регистрацией любого работника службы. Каждое использование наблюдаемых объектов не дает приложению стать стабильным, поэтому нам нужно использовать ApplicationRef.isStable и ждать с каждой проверкой обновлений, которую мы хотим сделать.

В конструкторе PwaService мы подписываемся на доступный поток, и каждый раз, когда мы находим новую версию, мы активируем ее и выполняем document.location.reload() после активации.

Затем мы реализуем метод checkForUpdate(), который выполняет несколько функций:

  1. Он проверяет, включены ли сервис-воркеры. Если нет, он возвращает наблюдаемое, которое напрямую сопоставляется с false (я просто реализовал короткое время ожидания, потому что экран-заставка, который сразу скрывается, может вызвать эффект мерцания).
  2. Когда сервис-воркеры включены, он выполняет метод SwUpdate.checkForUpdate() и сопоставляется с потоком available, который должен генерироваться сразу после разрешения SwUpdate.checkForUpdate() обещания при обнаружении обновления. Поскольку мы не получаем никакой информации, если обновление не найдено, доступный поток получает тайм-аут, который соответствует false, если обновление не найдено.

После этого нам просто нужно установить show на результат метода checkForUpdate(), который равен либо true, либо false. Это длится минимум 1 секунду, поэтому заставка не мерцает.

💎 Заключение

С помощью всего нескольких уловок можно легко реализовать функцию «заставка как экран» в вашем приложении Angular. Также ознакомьтесь с этой статьей:



Как использовать Angular 6+ Service Worker для (динамической) загрузки изображений
Сегодня я хочу показать вам, как использовать Angular 6+ Service Worker по умолчанию для кеширования динамически загружаемых ресурсов . Это… medium.com



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

Удачного кодирования 🤤!