Хорошо, прежде чем мы подробно рассмотрим, как настроить 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.
- 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.
Удачного кодирования :)