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

Я не верю в воровство чужих вещей.

И убегать с товарищами THUNDER - неправильно.

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

Вот и все, без всякого шума и звяканья.

1. Добавьте обслуживающего работника.

ng add @angular/pwa --project *project-name*

Вы можете найти название проекта в вашем файле angular.json.

Раньше на это у экспертов уходили часы или дни. Теперь трехлетний бритва может установить это до того, как вы его остановите. Эта команда выполняет ОГРОМНУЮ работу с тяжелыми грузами.

Вы должны знать о некоторых вещах, которые он выполняет ...

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

2. Настроить сервис воркер.

Сервисный воркер по умолчанию автоматически кэширует следующие файлы.

  • index.html
  • favicon.ico
  • Все артефакты сборки (пакеты JavaScript и CSS).
  • Любые файлы, расположенные в папке с ресурсами.
  • Изображения и шрифты настроены прямо под outputPath (по умолчанию ./dist/<project-name>/) или resourcesOutputPath.

Режим установки

Мы можем установить installMode для разных активов.

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

Режим обновления

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

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

3. Готово!

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

И не забывайте следить за мной на Medium. Спасибо!



Почему я выбираю Angular… вместо React. И почему вы должны это делать.
Итак ... почему так много поклонников React думают, что Angular - это глубокий и темный фреймворк, которого следует избегать? Или что этому слишком сложно научиться? Или… medium.com





Базовое руководство по RxJS для начинающих. (Часть 1)
Разве RxJS не пугает? Это совершенно понятно. Мои глаза слегка закатились, когда я увидела… medium.com





Как добавить компоненты семантического пользовательского интерфейса в ваше приложение Angular 8… не расстраиваясь.
Скажите… все эти странные ошибки Gulp разочаровывают. Нет более простого способа? medium.com