Сборка прогрессивных приложений в Angular

24 марта, 2021 12:24 пп 342 views | Комментариев нет

, | | Комментировать запись

Прогрессивные приложения (progressive web apps, или PWA) создаются с помощью таких технологий, благодаря которым они могут вести себя как нативные приложения. Важное преимущество прогрессивных веб-приложений –бесперебойная работа при ненадежном покрытии сети. Кроме того, в отличие от нативных приложений, PWA не нужно устанавливать, а еще они работают быстрее, чем обычные веб-приложения.

В этом мануале мы вместе с вами создадим прогрессивное веб-приложение с помощью Angular и развернем его с помощью Firebase.

Полный код этого руководства можно найти на GitHub.

Примечание: В настоящее время существует пакет @angular/pwa, который упрощает процесс сборки прогрессивных приложений. Но в этом руководстве мы рассмотрим более ранний подход.

Требования

  • Локальная установка Node.js (здесь вы найдете инструкции для macOS, Debian, Ubuntu, Centos).
  • Последняя версия веб-браузера Google Chrome на вашем локальном компьютере.
  • Расширение Lighthouse для Chrome, которое позже поможет нам проверить, является ли наше приложение прогрессивным.
  • Учетная запись Google, если вы хотите загрузить приложение в Firebase.

Это руководство было протестировано на Node 14.5.0 и npm 6.14.5.

1: Создание нового проекта Angular

Создать новый проект можно с помощью Angular CLI. По умолчанию Angular создает тестовые файлы, которые в проекте этого руководства не буду использованы. Чтобы отменить создание этих файлов, добавьте флаг –skip-tests к следующей команде, которая создает новый проект:

npx @angular/cli@10.0.0 new ng-pwa --skip-tests

Команда задаст вам пару вопросов:

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

Это создаст каталог ng-pwa для нового проекта. Перейдите в этот каталог:

cd ng-pwa

Теперь можно создать манифест нового приложения.

2: Создание манифеста веб-приложения

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

Чтобы создать манифест для нашего веб-приложения, нам понадобится новый файл по имени manifest.json. Создайте его в корневом каталоге src:

nano src/manifest.json

Вставьте в файл следующий код:

{
"name": "Angular Progressive Web App",
"short_name": "Ng-PWA",
"start_url": "./",
"theme_color": "#008080",
"background_color": "#008B8B",
"display": "standalone",
"description": "A PWA that is built with Angular",
"icons": [
{
"src": "/assets/images/icons/icon-16x16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-150x150.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-180x180.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
] }

В манифесте мы определили имя приложения (параметр name), которое будет прикреплено к иконке на главном экране пользователя, и short_name, которое заменит его, если оно будет слишком длинным. Мы также задали целевую страницу приложения при запуске с главного экрана; это делается с помощью параметра start_url. Параметр theme_color определяет цвет, который примет пользовательский интерфейс браузера при посещении этого сайта. Свойство background_color управляет цветом фона, на котором будет отображаться иконка нашего приложения, когда пользователь запустит его с главного экрана. С помощью display мы определяем, нужно ли скрывать пользовательский интерфейс браузера, когда пользователи посещают сайт.

Мы ожидаем, что пользователи будут посещать сайт с разных устройств (что значит – и с экранов разного размера), поэтому нам необходимо добавить в манифест копии иконок приложения разных размеров.

Когда вы закончите добавлять изображения, перейдите в файл src/index.html и вставьте следующее в раздел <head>:

...
<head>
...
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#008080">
</head>

Манифест веб-приложения не будет добавлен в папку сборки, если мы не попросим Angular сделать это. Для этого добавьте в раздел apps в файле .angular-cli.json запись о файле manifest.json в массив assets:

...
"apps": [
{
...
"assets": [
...
"manifest.json"
],
...

Примечание: Если ваше приложение создано в Angular 6 или более старой версии, вам нужно отредактировать файл angular.json вместо .angular-cli.json:

angular.json

...
"projects": {
"ng-pwa": {
...
"architect": {
"build": {
...
"assets": [
"src/manifest.json"
],
...

После создания файла manifest.json и редактирования файлов index.html и angular-cli.json (или angular.json) мы готовы перейти к следующему этапу.

3: Добавление воркеров

Сервис-воркеры (service workers) – основа любого прогрессивного приложения. Написанные на JavaScript, воркеры помогают кэшировать важные ресурсы и файлы, что позволяет поддерживать работоспособность приложения, когда покрытие сети недоступно или ненадежно. Помимо прочего, воркеры также могут перехватывать запросы и управлять ответами.

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

С помощью пакета npm по имени sw-precache-webpack-plugin мы установим пакет и настроим его.

Примечание: В настоящее время разработчик sw-precache-webpack-plugin рекомендует использовать плагин GenerateSW из набора workbox-webpack-plugin.

Затем мы можем запустить команду, которая автоматически сгенерирует сервис-воркер в папке сборки.

Запустите команду npm install в каталоге ng-pwa, чтобы установить пакет.

npm install --save-dev sw-precache-webpack-plugin@1.0.0

После установки пакета создайте файл precache-config.js:

nano precache-config.js

Добавьте в файл следующие строки:

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
module.exports = {
navigateFallback: '/index.html',
navigateFallbackWhitelist: [],
stripePrefix: 'dist',
root: 'dist/',
plugins:[
new SWPrecacheWebpackPlugin({
cacheId: 'ng-pwa',
filename: 'service-worker.js',
staticFileGlobs: [
'dist/index.html',
'dist/**.js',
'dist/**.css'
],
})
],
stripePrefix: 'dist/assets',
mergeStaticsConfig: true
};

Файл preache-config.js настраивает sw-precache-webpack-plugin посредством пар «ключ-значение».

Как фронтенд фреймворк для создания одностраничных приложений Angular использует маршрутизацию URL-адресов на стороне клиента. Это значит, что он может генерировать произвольные URL-адреса, которые не кэшируются автоматически созданным сервис-воркером. В таких ситуациях нужно определить запись HTML, с которой будет сопоставляться запрошенный URL, и для этого существует параметр navigateFallback. HTML-запись должна предоставить желаемые ресурсы. Поскольку наше приложение является одностраничным (SPA), а index.html является его точкой входа, оно может обрабатывать произвольные URL-адреса, – поэтому index.html должен быть среди файлов, выбранных для кэширования в массиве staticFileGlobs.

Параметр navigateFallbackWhitelist может быть пустым или содержать регулярное выражение, определяющее тип или шаблон URL-адреса, для которого будет использоваться navigateFallback.

Чтобы получить более полное представление о том, как настроить sw-precache-webpack-plugin, читайте документацию.

Чтобы завершить настройку сервис-воркера, мы создадим пользовательский сценарий или команду npm для сборки приложения и автоматического сгенерирования файла сервис-воркера в папке сборки. Перейдите в файл package.json и добавьте в scripts следующее:

...
"scripts": {
...
"pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
},
...

Итак, мы установили sw-precache-webpack-plugin, создали preache-config.js и отредактировали package.json. Пора переходить к следующему разделу.

4: Создание представления

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

Отредактируйте файл src/app/app.component.html, замените его содержимое следующим кодом:

<div class="container">
<h1>
A Progressive Web App Built with Angular.
</h1>
<img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">
<h2>Get Started With Progressive Web Apps:</h2>
<ul>
<li>
<h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>
</li>
<li>
<h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>
</li>
<li>
<h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>
</li>
</ul>
</div>

Он генерирует веб-страницу, на которой будет изображение, некоторый текст и три ссылки.

Атрибут rel=”noopener” необходим прогрессивным приложениям, если по соображениям безопасности и производительности для атрибута target установлено значение _blank.

Откройте файл src/styles.css и замените его содержимое следующим кодом:

body {
background-color: teal;
}
.container {
text-align: center;
}
ul {
list-style: none;
}
h1, h2, a {
color: white;
}

Этот код устанавливает бирюзовый цвет фона, центрирует текст и придает ему белый цвет.

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

5: Развертывание приложения

На этом этапе вы развернете свое приложение в Firebase.

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

Чтобы начать работу, посетите firebase.google.com. Если у вас еще нет учетной записи, создайте ее, чтобы получить доступ к консоли. В консоли создайте новый проект Firebase.

После входа в систему кликните на Go to console в правом верхнем углу. Попав в консоль, выберите Create a project. Вам будет предложено ввести название вашего проекта и включить Google Analytics. Здесь мы Google Analytics не используем, но вы можете включить его, если хотите.

Нажмите Create project и дождитесь завершения процесса.

После создания проекта можно нажать Continue, чтобы перейти в панель управления проектом (Project Dashboard). В этом руководстве нас интересуют раздел Develop и страница Hosting.

Теперь вы можете вернуться в свой терминал. Запустите команду npm install, чтобы установить пакет firebase-tools глобально:

npm install -g firebase-tools@8.4.3

Пакет firebase-tools позволит нам тестировать запуск и развертывать приложения в Firebase из терминала.

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

Чтобы создать приложение Angular и автоматически сгенерировать сервис-воркер, запустите в каталоге ng-pwa следующую команду:

npm run pwa

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

Пришло время загрузить приложение в Firebase. Выполните эту команду, чтобы войти в Firebase:

firebase login

На этом этапе вам будет предложено ввести учетные данные. Введите их в терминал.

После аутентификации выполните следующую команду для инициализации Firebase в проекте:

firebase init

Затем дайте следующие ответы на вопросы программы:

Are you ready to proceed? (Y/n) = Y
Which Firebase CLI features do you want to setup for this folder? = Hosting
Select a default Firebase project for this directory = Your-Firebase-Project-Name
What do you want to use as your public directory? = dist
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) = Y
File dist/index.html already exists. Overwrite? (y/N) = N

Теперь приложение готово к развертыванию. Выполните следующую команду, чтобы развернуть приложение в Firebase:

firebase deploy

И запустите эту команду, чтобы увидеть приложение:

firebase open hosting:site

Устранение неполадок

Если вместо целевой страницы приложения вы видите сообщение «Firebase Hosting Setup Complete», вы, возможно, перезаписали свой index.html. Выполните повторную сборку приложения с помощью команд:

npm run pwa
firebase init

и убедитесь, что вы выбрали No для перезаписи index.html:

File dist/index.html already exists. Overwrite? (y/N) = N

В зависимости от конфигурации ваше приложение может существовать под именем ng-pwa (это имя проекта Angular). Чтобы избежать этого, во время инициализации firebase вместо dist вы можете установить в качестве публичного каталога dist/nw-pwa.

Теперь прогрессивное веб-приложение создано и развернуто, и мы можем использовать Lighthouse, чтобы проверить его.

6: Тестирование приложения с помощью Lighthouse

Lighthouse – это расширение Chrome, разработанное Google. С его помощью можно проверить, насколько наше прогрессивное веб-приложение соответствует стандартам.

Наивысшая оценка Lighthouse составляет 100%, а оценка PWA нашего приложения будет 91%.

Чтобы протестировать PWA, откройте свое приложение в веб-браузере Google Chrome. Нажмите кнопку Extensions и выберите Lighthouse. На экране появится окно с предложением нажать кнопку Generate report. Нажав эту кнопку, вы увидите временный экран Waiting for Lighthouse results. Когда тестирование завершится, вам будет представлен экран с результатами теста.

Заключение

В этом мануале мы создали прогрессивное веб-приложение с помощью Angular и развернули его через Firebase. Прогрессивные веб-приложения предоставляют пользователям возможности, аналогичные нативным приложениям, но при этом они более легкие, гибкие и могут работать при плохом сетевом соединении.

Tags: , , ,

Добавить комментарий