Руководство о том, как преобразовать приложение 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 и присоединитесь к нашему Коллективу талантов.