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

Что такое PWA?

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

Все PWA руководствуются одними и теми же принципами, но несколько разными способами реализации в интерфейсных технологиях. В этой статье я буду создавать PWA, используя angular. Мы бы создали просто Hello World Angular PWA.

Давайте начнем

Я предполагаю, что у вас уже установлен Angular CLI на вашем локальном компьютере, поэтому мы продолжим создание нового приложения Angular.

ng new angular-pwa

Теперь мы создали приложение Angular. Что дальше, это сделать cd в каталог приложения и добавить Angular PWA в приложение.

cd angular-pwa
ng add @angular/pwa

«ng add @ angular / pwa» устанавливает Angular PWA и angular service walker в наше приложение. Он также создает следующие файлы:

ngsw-config.json
manifest.webmanifest (in the assets folder)
icons.png (actually 8 icons of different sizes in assets/icons)

Что в файле?

Давайте посмотрим, что в этих файлах было добавлено в наш проект angular.

  1. ngsw-config.json: Вы можете назвать этот файл файлом конфигурации Angular Service Worker, и это просто файл конфигурации JSON, которому будет следовать Service Worker. Вот как это выглядит.
  • В строке 2 мы просто вызываем установленного нами сервис-воркера angular с помощью команды @ angular / pwa
  • Строка 3 просто спрашивает, какую страницу я должен сначала отобразить как index.html.
  • Строка 4 запускает список конфигураций asses. Конфигурация asses - это способ сообщить сервисному работнику, где будут расположены все наши файлы ресурсов после того, как мы запустим ng build - prod.
  • Строка 5–16 - это первая конфигурация с именем, которое идентифицирует конфигурацию; installMode предварительной выборки, который сообщает сервисному работнику, что нужно получить все файлы в этой группе. Ресурсы содержат список всех файлов, которые должен получить работник службы.
  • Строки 16–25 - это вторая конфигурация для файла ресурсов, но здесь есть две разные вещи: у нас есть новый параметр, который является updateMode, для которого установлена ​​предварительная выборка. Это сообщает сервисному работнику, что он должен получать самые свежие файлы при каждом обнаружении обновления. Наш installMode на этот раз настроен на ленивую загрузку.

2. manifest.webmanifest: Так же, как мы назвали ngsw-config.json Angular Service Worker Configuration, позвольте вызвать файл manifest.webmanifest как манифест веб-приложения.

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

  • name: Основное имя приложения.
  • short_name: альтернативное имя приложения в ситуациях, когда полное имя не может быть отображено полностью.
  • theme_color: это просто значение цвета темы метатега HTML, подобное этому
<meta name=” theme-color” content=”#000000">
  • background_color: это цвет фона приложения при запуске.
  • scope: это устанавливает границу для сервис-воркера и позволяет браузеру знать, какие URL-адреса находятся в приложении.
  • start_url: как вы можете догадаться, он сообщает браузеру, какой файл запускается первым при запуске. В нашем случае angular-pwa добавил только «/», что означает, что текущий каталог, и браузер будет выполнять свое поведение по умолчанию, которое запускается с index.html.
  • Значки: это массив объектов значков, описывающих источник, размер и тип значка. У нас есть несколько размеров значков, потому что необходимо использовать значки разных размеров в зависимости от устройства, на котором запущено приложение.

Хорошо, теперь мы закончили настройку, давайте создадим наше приложение для производства, запустив

ng build — prod

Обратите внимание, что PWA будет работать только в среде HTTP, но, поскольку я не развертываю приложение на активном сервере, я бы установил пакет узла, который может создать для меня такую ​​среду.

npm install -g [email protected]

теперь перейдите в. \ dist \ angular-pwa \ и выполните следующую команду, чтобы запустить HTTP-сервер

http-server -p 2019 -o

как только это будет сделано, откройте инструмент разработчика Chrome и нажмите аудит, чтобы запустить аудит приложения.

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

На изображении выше изображено приложение PWA Tic Tac Toe, размещенное на базе firebase, которое можно установить как на мобильном, так и на настольном компьютере. Вот URL-адрес приведенного выше примера приложения https://tic-tac-toe-ng.web.app

Вывод

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

Удачного кодирования :)