Создание PWA с использованием Angular 6

В этом руководстве мы будем использовать последнюю версию Angular 6 для создания PWA, реализуя основные принципы создания PWA. Мы начнем с создания интерфейсного веб-приложения, использующего JSON API. В этом отношении мы будем использовать модуль Angular HttpClient для отправки HTTP-запросов к статически JSON API, сгенерированному из репозитория Simplified JavaScript Jargon GitHub. Мы также будем использовать Material Design для создания пользовательского интерфейса с помощью пакета Angular Material.

Далее мы будем использовать панель «Аудит» (Lighthouse) из Chrome DevTools для анализа нашего веб-приложения на соответствие основным принципам PWA. Наконец, мы объясним и добавим функции PWA в наше веб-приложение в соответствии с разделом «Прогрессивное веб-приложение» в отчете Lighthouse.

Прежде чем мы приступим к реализации нашего PWA, давайте сначала представим PWA и Lighthouse.

Рекомендуемое чтение : Native And PWA: выбор, а не претенденты!

Что такое PWA?

Прогрессивное веб-приложение или PWA — это веб-приложение, которое имеет набор возможностей (аналогичных собственным приложениям), которые предоставляют пользователям возможности, подобные приложениям. PWA должны соответствовать ряду основных требований, которые мы увидим далее. PWA похожи на собственные приложения, но развертываются и доступны с веб-серверов через URL-адреса, поэтому нам не нужно проходить через магазины приложений.

PWA должен быть:

• прогрессивный
  Работайте для каждого пользователя, независимо от выбора браузера, потому что они построены с прогрессивным улучшением в качестве основного принципа.
• Отзывчивый
  Подходит для любого форм-фактора, настольного компьютера, мобильного телефона, планшета или любого другого устройства.
• Независимость от подключения
  Усовершенствован сервисными работниками для работы в автономном режиме или в сетях низкого качества.
• App-подобный
  Используйте модель оболочки приложения, чтобы обеспечить навигацию и взаимодействие в стиле приложения.
• Свежий
  Всегда в актуальном состоянии благодаря процессу обновления Service Worker.
• Безопасно
  Подается через HTTPS, чтобы предотвратить отслеживание и гарантировать, что контент не был подделан.
• Обнаруживаемый
  Идентифицируются как «приложения» благодаря манифестам W3C и области регистрации сервис-воркеров, что позволяет поисковым системам их находить.
• Повторно привлекаемый
  Упростите повторное вовлечение с помощью таких функций, как push-уведомления.
• Устанавливаемый
  Позвольте пользователям «оставлять» приложения, которые они считают наиболее полезными, на своем домашнем экране без хлопот с магазином приложений.
• Ссылка
  Легко делитесь через URL и не требует сложной установки.
  

Представляем Маяк

Lighthouse — это инструмент аудита с открытым исходным кодом, созданный Google, который можно использовать для аудита веб-сайтов и приложений на предмет доступности, SEO, лучших практик и функций PWA.

Вы можете получить доступ к Lighthouse на вкладке « Аудит » в Chrome DevTools как модуль в Node.js или как инструмент CLI. Вы можете использовать Lighthouse, указав URL-адрес, а затем запустив аудит, который предоставит вам отчет, содержащий результаты аудита, которые в основном представляют собой предложения о том, как вы можете улучшить свое веб-приложение.

Установка Angular CLI v6 и создание проекта

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

Для Angular CLI требуется Node.js >= 8.9+ , поэтому сначала убедитесь, что у вас установлена ​​необходимая версия, выполнив следующую команду:

 $ node -v 

Если у вас не установлен Node.js, вы можете просто перейти на официальную страницу загрузки Node и загрузить двоичные файлы Node для своей системы.

Теперь вы можете установить последнюю версию Angular CLI, запустив:

 $ npm install -g @angular/cli

Примечание . В зависимости от вашей конфигурации npm вам может потребоваться добавить _sudo_ для глобальной установки пакетов.

Вы можете создать свой проект Angular 6, выполнив следующую команду в своем терминале:

 $ ng new pwademo

Это создаст проект со структурой, которая выглядит следующим образом:

Большая часть проделанной работы будет находиться в папке src/ , содержащей исходный код приложения.

Создание углового приложения

После создания проекта мы создадим веб-приложение, которое использует JSON API и отображает элементы на домашней странице. Мы будем использовать службу HttpClient для отправки HTTP-запросов и Angular Material для создания пользовательского интерфейса.

Добавление углового материала

Благодаря Angular CLI v6 и новой команде ng add добавить Angular Material в ваш проект можно всего одной командой. Вам просто нужно запустить следующую команду из вашего терминала:

 $ cd pwademo $ ng add @angular/material 

На скриншоте видно, что команда устанавливает необходимый пакет из npm и обновляет кучу файлов для настройки Angular Material в вашем проекте, которые ранее требовали ручного обновления.

Настройка HttpClient и использование JSON API

Теперь давайте настроим проект Angular для использования HttpClient для отправки HTTP-запросов. Во-первых, вам нужно импортировать модуль HttpClientModule в основной модуль приложения в файле src/app/app.module.ts :

 /*...*/ import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ /*...*/ HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

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

В демонстрационных целях мы будем использовать статически сгенерированный JSON API из репозитория Simplified JavaScript Jargon GitHub. Если вы используете какой-либо другой ресурс, убедитесь, что у вас включен CORS, чтобы браузер не запрещал чтение удаленного ресурса из-за той же политики происхождения .

Давайте создадим сервис, который взаимодействует с API. Внутри папки вашего проекта запустите:

 $ ng g service api

Это создаст службу с именем ApiService в файле src/app/api.service.ts .

Теперь откройте файл src/app/api.service.ts и обновите его, чтобы отразить следующие изменения:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; export interface Item{ name: string; description: string; url: string; html: string; markdown: string; } @Injectable({ providedIn: 'root' }) export class ApiService { private dataURL: string = "https://www.techiediaries.com/api/data.json"; constructor(private httpClient: HttpClient) {} fetch(): Observable<Item[]>{ return <Observable<Item[]>this.httpClient.get(this.dataURL); } }

Сначала мы импортировали HttpClient и Observable , затем HttpClient в конструктор как httpClient и добавили метод fetch() , который вызывает метод get() HttpClient (для отправки HTTP-запроса GET на нашу конечную точку JSON) и возвращает Observable, который мы можем подписаться позже.

Мы также объявили интерфейс Item , который представляет один элемент возвращаемых данных JSON.

Затем импортируйте эту службу из компонента приложения. Откройте файл src/app/app.component.ts и добавьте:

 import { Component, OnInit } from '@angular/core'; import { ApiService } from './api.service'; import { Item } from './api.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ title = 'pwademo'; items: Array<Item>; constructor(private apiService: ApiService){ } ngOnInit(){ this.fetchData(); } fetchData(){ this.apiService.fetch().subscribe((data: Array<Item>)=>{ console.log(data); this.items = data; }, (err)=>{ console.log(err); }); } }

Мы импортируем ApiService , который мы создали ранее, и внедряем его как apiService , мы также импортируем класс Item , который представляет один элемент наших данных JSON, и мы объявляем переменную items типа Array<Item> , которая будет содержать извлеченные элементы.

Затем мы добавляем метод fetchData() , который вызывает наш метод fetch() , определенный нами в ApiService , который возвращает Observable. Мы просто подписываемся на этот наблюдаемый объект, чтобы отправить запрос GET на нашу конечную точку JSON и получить данные ответа, которые мы, наконец, назначаем массиву items .

Мы вызываем метод fetchData() в событии жизненного цикла ngOnInit() , поэтому он будет вызываться после инициализации компонента AppComponent .

Добавление пользовательского интерфейса приложения

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

Прежде чем использовать компонент Angular Material, вам необходимо импортировать его модуль. Каждый компонент Материала принадлежит своему собственному модулю.

Откройте файл src/app/app.module.ts и добавьте следующие импорты:

 /*...*/ import { MatToolbarModule } from '@angular/material/toolbar'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ AppComponent ], imports: [ /*...*/ MatToolbarModule, MatCardModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Мы импортируем модули для панелей инструментов, карточек и компонентов кнопок и добавляем их в массив imports AppModule .

Затем откройте файл src/app/app.component.html , удалите то, что там есть, и добавьте:

 <mat-toolbar color="primary"> <mat-toolbar-row> <span>JS-jargon</span> </mat-toolbar-row> </mat-toolbar> <main> <mat-card *ngFor="let item of items"> <mat-card-header> <mat-card-title>{{item.name}}</mat-card-title> </mat-card-header> <mat-card-content> {{item.description}} </mat-card-content> <mat-card-actions> <a mat-raised-button href="{{item.url}}" color="primary">More</a> </mat-card-actions> </mat-card> </main>

Мы используем материальные компоненты для создания пользовательского интерфейса. Компонент <mat-toolbar> используется для создания панели инструментов материала, а компонент <mat-card> используется для создания карточки материала и т. д.

Мы перебираем массив items , который заполняется методом fetchData() при инициализации компонента, и отображаем элементы в виде карт Материалов. Каждая карточка содержит название, описание и ссылку для получения дополнительной информации (ссылка оформлена в виде кнопки материала с использованием директивы mat-raised-button ).

Это скриншот приложения:

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

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

Давайте создадим приложение для производства, используя следующую команду:

 $ ng build --prod

Производственная сборка будет доступна в папке dist/pwademo . Мы можем использовать такой инструмент, как http-server чтобы обслуживать его.

Сначала установите http-server с помощью следующей команды:

 $ npm i -g http-server

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

 $ cd dist/pwademo $ http-server -o

Параметр -o автоматически откроет браузер по умолчанию в вашей системе и перейдет по адресу https://127.0.0.1:8080/ , где доступно наше веб-приложение.

Анализ приложения с помощью Lighthouse

Давайте теперь проанализируем наше приложение с помощью Lighthouse. Сначала запустите Chrome и посетите адрес нашего приложения https://127.0.0.1:8080/ .

Затем откройте Инструменты разработчика или нажмите Ctrl + Shift + I и нажмите на панель « Аудит ».

Для эмуляции мобильной среды желательно установить Эмуляцию на Мобильный , а не на Рабочий стол . Затем нажмите синюю кнопку «Выполнить аудит… ». У вас откроется диалоговое окно, в котором вам нужно выбрать типы аудита, которые вы хотите выполнить для своего веб-приложения. Снимите флажки со всех типов, кроме Progressive Web App , и нажмите кнопку « Выполнить аудит» .

Подождите, пока Маяк сгенерирует отчет. Это скриншот результата на этом этапе:

Lighthouse выполняет ряд проверок, подтверждающих аспекты прогрессивного веб-приложения, указанные в контрольном списке PWA. Мы получаем первоначальный балл ³⁶ ⁄ ₁₀₀ , потому что мы прошли несколько аудитов.

Наше приложение имеет 7 неудачных аудитов, в основном связанных с Service Workers , Progressive Enhancement , HTTPS и манифестом веб-приложения , которые являются основными аспектами PWA.

Регистрация сервис-воркера

Первые два неудачных аудита («Не регистрирует сервис-воркер» и «Не отвечает кодом 200 в автономном режиме») связаны с сервис-воркерами и кэшированием. Так что же такое сервисный работник?

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

Чтобы пройти эти аудиты, нам просто нужно зарегистрировать сервис-воркера и использовать его для локального кэширования файлов. В автономном режиме ПО должно возвращать локально кэшированную версию файла. Чуть позже мы увидим, как добавить это с помощью одной команды CLI.

Рекомендуемая литература : Создание сервисного работника: пример из практики

Прогрессивное улучшение

Третий неудачный аудит («Не предоставляет резервный контент, когда JavaScript недоступен») связан с прогрессивным улучшением , которое является важным аспектом PWA и просто относится к способности PWA работать в разных браузерах, но предоставлять расширенные функции, если они доступны. Одним из простых примеров PE является использование HTML-тега <noscript> , который информирует пользователей о необходимости включить JavaScript для запуска приложения, если он не включен:

 <noscript> Please enable JavaScript to run this application. </noscript>

HTTPS

Четвертый неудачный аудит («Не перенаправляет HTTP-трафик на HTTPS») связан с HTTPS, который также является основным аспектом PWA (сервисные работники могут обслуживаться только из безопасных источников, за исключением локального хоста). Сам аудит «Использует HTTPS» считается пройденным Lighthouse, поскольку мы проверяем локальный хост, но после того, как вы используете реальный хост, вам потребуется сертификат SSL. Вы можете получить бесплатный SSL-сертификат от различных сервисов, таких как Let's Encrypt, Cloudflare, Firebase или Netlify и т. д.

Манифест веб-приложения

Три неудачных аудита («Пользователю не будет предложено установить веб-приложение», «Не настроен для пользовательского экрана-заставки» и «Адресная строка не соответствует фирменным цветам») связаны с отсутствующим манифестом веб-приложения , который является файл в формате JSON, содержащий имя, описание, значки и другую информацию, необходимую для PWA. Он позволяет пользователям устанавливать веб-приложение на главный экран так же, как и нативные приложения, не заходя в магазин приложений.

Вам необходимо предоставить манифест веб-приложения и сослаться на него из файла index.html с помощью <link> со свойством rel , установленным на manifest . Далее мы увидим, как мы можем сделать это автоматически с помощью одной команды CLI.

Реализация функций PWA

Angular CLI v6 позволяет быстро добавлять функции PWA в существующее приложение Angular. Вы можете превратить свое приложение в PWA, просто выполнив следующую команду в своем терминале из корня проекта:

 $ ng add @angular/pwa

Команда автоматически добавляет функции PWA в наше приложение Angular, такие как:

• файл manifest.json ,
• Различные размеры значков в папке src/assets/icons ,
• Рабочий сервис ngsw-worker.js .

Откройте папку dist/ , содержащую производственную сборку. Вы найдете различные файлы, но давайте сосредоточимся на файлах, связанных с функциями PWA, о которых мы упоминали выше:

Был добавлен файл manifest.json со следующим содержимым:

 { "name": "pwademo", "short_name": "pwademo", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

Как видите, добавленный файл manifest.json содержит всю информацию, необходимую для PWA, такую ​​как имя, описание, start_url и т. д.

Файл manifest.json , ссылки на значки разных размеров, которые также были автоматически добавлены в папку assets/icons . Вам, конечно, нужно будет заменить эти значки своими собственными, как только вы будете готовы создать окончательную версию своего PWA.

В файле index.html на файл manifest.json ссылаются, используя:

 <link rel="manifest" href="manifest.json">

Также автоматически был добавлен файл ngsw-worker.js , содержащий сервис-воркер. Код для установки этого сервис-воркера автоматически вставляется в файл src/app/app.module.ts :

 ... import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [ AppComponent ], imports: [ ... ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }) ],

@angular/service-worker устанавливается командой ng add и добавляется как зависимость к pwademo/package.json :

 "dependencies": { ... "@angular/service-worker": "^6.1.0" }

Поддержка сборки сервисного работника также включена в интерфейсе командной строки. В файле angular.json добавлен параметр конфигурации "serviceWorker": true .

В файле index.html добавлен метатег для theme-color со значением #1976d2 (он также соответствует значению theme_color в файле manifest.json ):

 <meta name="theme-color" content="#1976d2">

Цвет темы сообщает браузеру, каким цветом следует окрашивать элементы пользовательского интерфейса, такие как адресная строка.

Добавление цвета темы в файлы index.html и manifest.json исправляет проверку соответствия цветов бренда в адресной строке.

Файл конфигурации Service Worker

В проект добавляется еще один файл src/ngsw-config.json , но он не является обязательным для PWA. Это файл конфигурации, который позволяет указать, какие файлы и URL-адреса данных должен кэшировать сервисный работник Angular и как он должен обновлять кэшированные файлы и данные. Вы можете найти все подробности об этом файле в официальной документации.

Примечание . На момент написания этой статьи с последней версией 6.1.3 предыдущая команда ng add @angular/pwa завершится ошибкой: Path “/ngsw-config.json” already exists , поэтому на данный момент решение состоит в том, чтобы понизить версию @angular/cli и @angular/pwa до версии 6.0.8 .

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

 $ npm i @angular/[email protected] $ ng i @angular/[email protected] $ ng add @angular/pwa

Теперь давайте повторно проведем аудит нашего локального PWA, размещенного локально. Это новая оценка PWA:

Angular CLI не добавляет автоматически резервный код JavaScript, который мы упоминали в разделе «Прогрессивное улучшение», поэтому откройте файл src/index.html и добавьте его:

 <noscript> Please enable JavaScript to run this application. </noscript>

Затем перестройте приложение и повторно запустите проверки. Это результат сейчас:

У нас есть только один неудачный аудит, связанный с перенаправлением HTTPS. Нам нужно разместить приложение и настроить перенаправление с HTTP на HTTPS.

Давайте теперь запустим аудит размещенной и защищенной версии нашего PWA.

Мы получаем оценку ¹⁰⁰ ⁄ ₁₀₀ , что означает, что мы успешно реализовали все основные принципы PWA.

Вы можете получить окончательный код этого демонстрационного PWA из этого репозитория GitHub.

Заключение

В этом руководстве мы создали простое приложение Angular и превратили его в PWA с помощью Angular CLI. Мы использовали Google Lighthouse для аудита нашего приложения на наличие функций PWA и объяснили различные основные принципы PWA, такие как Service Workers , для добавления поддержки в автономном режиме и push-уведомлений. Файл веб-манифеста для включения функций добавления на главный экран и экрана-заставки, прогрессивного улучшения , а также HTTPS .

Вам также может потребоваться вручную проверить другие выделенные элементы (в разделе «Дополнительные элементы для ручной проверки»), но не проверенные Lighthouse автоматически. Эти проверки требуются в соответствии с базовым контрольным списком PWA от Google. Они не влияют на оценку PWA, но важно проверить их вручную. Например, вам нужно убедиться, что ваш сайт работает в разных браузерах и что каждая страница имеет URL-адрес, который важен для возможности совместного использования в социальных сетях.

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