Руководство о том, как преобразовать приложение Angular в прогрессивное веб-приложение (PWA).

Вы слышали об историях успеха PWA?

Starbucks, например, смогла уменьшить размер своего приложения на 99,84%, когда они перешли с iOS-приложения на PWA. Подробный кейс можно прочитать здесь.

А Pinterest увеличил свои доходы от рекламы на 44%.

Не говоря уже о Spotify, Uber, Twitter и других компаниях, которые добились огромного успеха благодаря прогрессивным веб-приложениям.

Но даже с этими дразнящими историями успеха я все еще сталкиваюсь с компаниями, которые используют Angular, но не преобразовали свое приложение Angular в PWA — даже если это занимает всего 5 минут или меньше. 😲

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

So…

Сегодня мы обсудим использование сервис-воркеров Angular для создания PWA (прогрессивного веб-приложения).

Готовый?

Давайте углубимся и начнем с рассмотрения преимуществ.

Каковы преимущества?

Вот несколько преимуществ, которые вы получите, превратив свое приложение Angular в прогрессивное веб-приложение.

  • Безумная скорость загрузки (если все сделано правильно).
  • Нативное приложение, к которому можно получить доступ через мобильный браузер или Google Play Store (и Apple Store, если вы знаете, как это сделать).
  • Независимость от магазина приложений.
  • Возможность работы в автономном режиме (благодаря сервисным работникам).
  • Возможность отправки push-уведомлений через сервис-воркер.
  • Иметь собственный экран-заставку (также известный как оболочка приложения в Angular)
  • Потрясающий SEO-рейтинг. Как и у быстрых и отзывчивых веб-страниц, PWA имеют средний SEO-рейтинг 85.
  • Меньший размер файла (нативные приложения, как правило, требуют больше данных для загрузки, чем PWA).
  • Безболезненные обновления (служебный работник автоматически обновит приложение в фоновом режиме, не требуя от пользователя никаких действий).

Каковы недостатки?

Недостатки?

Честно говоря, минусов, о которых я знаю, очень мало.

Самый большой недостаток, о котором я знаю, заключается в том, что политика Apple Store не позволяет разработчикам развертывать свои прогрессивные веб-приложения как приложения.

«Ваше приложение должно включать в себя функции, контент и пользовательский интерфейс, которые выводят его за пределы переупакованного веб-сайта. Если ваше приложение не является особенно полезным, уникальным или «похожим на приложение», ему не место в App Store». —Apple App Store

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

Как это сделать?

Первый шаг — использовать Angular CLI для установки пакета @angular/pwa.

ng add @angular/pwa

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

Так что же только что произошло?

Пакет @angular/pwa представляет собой схему Angular, которая добавляет поддержку Progressive Web App в приложение Angular. Вкратце, вот несколько вещей, о которых вам следует знать:

  • Автоматически импортирует и регистрирует работника службы в модуле приложения.
  • Обновляет index.html, чтобы включить файл manifest.json, содержащий сведения о прогрессивном веб-приложении.
  • Создает файлы значков для поддержки PWA. Они помещаются в папку src/assets/icons и должны быть обновлены значком приложения в целях брендинга.
  • Создает src/ngsw-config.json. Этот файл используется для настройки работника службы.

И вот как преобразовать ваше приложение Angular в PWA.

Если у вас есть вопросы о том, как настроить поведение кэширования, ознакомьтесь с этой страницей в документах Angular.

Как работает Angular PWA?

В случае, если вы изо всех сил пытаетесь понять, что все происходит, позвольте мне потратить несколько минут, чтобы объяснить.

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

Мы только что использовали пакет @angular/pwa Schematics для создания сервис-воркера, который будет кэшировать все, что мы настроим для кэширования. По умолчанию сервис-воркер автоматически кэширует следующие файлы.

  • favicon.ico
  • Все артефакты сборки (пакеты JavaScript и CSS).
  • Любые файлы, расположенные в папке с ресурсами.
  • Изображения и шрифты прямо под настроенными outputPath или resourcesOutputPath.

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

И становится лучше.

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

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

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  constructor( private swUpdate: SwUpdate) {}

    ngOnInit() {
      if (this.swUpdate.isEnabled) {
        this.swUpdate.available.subscribe(() => {
          if(confirm("You're using an old version of the control panel. Want to update?")) {
            window.location.reload();
          }
        });
      }
    }
}

Готово!

А теперь я хотел бы услышать от вас:

Планируете ли вы преобразовать свой проект Angular в прогрессивное веб-приложение?

А может вы считаете, что оно того не стоит?

Дайте мне знать в разделе комментариев ниже.

Подпишитесь на меня: GitHub, Medium, Личный блог

Первоначально опубликовано на https://danielk.tech.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.