![](https://habrastorage.org/getpro/habr/upload_files/c65/a3f/f61/c65a3ff616ccf8f9c9cdc2b207337854.png)
В данной статье, мы расмотрим как "прикрутить", и настроить PWA в Angular приложении.
Что такое PWA ?
PWA (Progressive Web App) – это веб-технология, трансформирующая сайт в приложение. При открытии, приложение запускается в обертке браузера, из за чего PWA позволяет использовать приложение на любой платформе, использующей браузер, соответствующий стандартам.
Внутри себя, PWA использует Service worker, который взаимодействует с браузером, для обеспечения доступа к некоторым встроенным функциям. У Service worker'a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Благодаря Service worker'у возможна реализация кешерования что позволяет PWA приложению работать, в режиме "офлайн".
Начальный сетап
Концентрироваться на приложении не будем, для примера просто создадим дефолтное, через Angular CLI, командой ng new app
.
В результате после запуска командой ng serve
, имеем стартовое Angular приложение на 4200 порте.
![](https://habrastorage.org/getpro/habr/upload_files/e7e/009/67e/e7e00967e28fbcf732255fbdb58a033f.png)
Установка необходимых пакетов
Собственно установка предельно проста и делается опять же через Angular CLI. Необходимо всего лишь ввести команду ng add @angular/pwa
. После успешного завершения, у нас добавятся новые файлы в проекте и обновится несколько существующих.
![](https://habrastorage.org/getpro/habr/upload_files/a57/4b3/871/a574b38713956d05257770ce277b26df.png)
Краткое описание добавившихся файлов в проект:ngsw-config.json
- конфиг отвечающий за создание ngsw-worker.js (serviceworker.js). Содержит базовую структуру для нашего Service worker'а.
manifest.webmanifest
- файл манифеста, определяет как приложение PWA будет выглядеть при открытии. Позволяет сконфигурировать такие параметры как значки, различные бекграунды, название и т.п.
Заглянув в файл src/index.html
, мы увидим что наш манифест прописался в head'е, html файла нашего приложения:
![](https://habrastorage.org/getpro/habr/upload_files/aa3/11f/fe7/aa311ffe7806874c576d5afefd0c1675.png)
И в angular.json
:
![](https://habrastorage.org/getpro/habr/upload_files/ffe/973/cfd/ffe973cfd3bebbadd46662c82f7d13b1.png)
Также автоматически сгенерировались иконки приложения в src/assets/icons/
под различные разрешения, которые можно в дальшейшем заменить.
![](https://habrastorage.org/getpro/habr/upload_files/2c8/75b/72a/2c875b72abf702bc48150082be3e731d.png)
В app.module.ts
добавился модуль Service worker для регистрации файла ngsw-worker.js
(данный файл генерируется при билде приложения) для прод окружения.
![](https://habrastorage.org/getpro/habr/upload_files/df3/0a9/d20/df30a9d20fda651b36a84f34fc515962.png)
Билд и запуск нашего PWA
Теперь можем сбилдить наше приложения и запустить его. Но так как PWA работает только с https и localhost и ng serve
не работает с Service worker'ами, нам необходим отдельный HTTP-сервер чтобы локально проверить ваш проект. Для этого нужно создать сборку и разместить ее отдельно, используя http-сервер. Для этого установим npm пакет http-server
командой npm i -g http-server
.
После этого находясь в корневой папке нашего приложения, создадим продакшен билд командой ng build --prod
.
По окончанию билда в папке dist появится наш собранный билд проекта. Так же в нем будет сгенерированный файл нашего Service worker'а ngsw-worker.js
.
![](https://habrastorage.org/getpro/habr/upload_files/edb/268/4c4/edb2684c4404286e3f3f458d40d51e28.png)
Теперь находясь в папке dist/app
запустим наше приложение на 8080 порте, командой http-server -p 8080
.
Наше приложение успешно запустилось на 8080 порту и при открытии, в адресной строке браузера появляется кнопка для установки PWA версии нашего приложения.
![](https://habrastorage.org/getpro/habr/upload_files/0a8/314/3fb/0a83143fb3ae5543d7cada01d0ba3de0.png)
Так же в dev tools'е, в разделе Application, мы можем отслеживать статус нашего Service worker'а
![](https://habrastorage.org/getpro/habr/upload_files/da4/76b/877/da476b87791f0a6a6f5d87482747084e.png)
Заключение
В этой статье мы рассмотрели базовую настройку и запуск приложения с технологией PWA, за экраном осталось описание возможностей работы Service worker'ов в "офлайн" режиме, и кеширования а также конфигурирование файла ngsw-config.json
, о котором можно почитать в официальной документации для Angular.
shuron
Извините за небольшой оффтоп: Насколько активно гугл продвигает эти свои PWA?
Мне казалось первоначальный хайп немного поутих, нет?
artschedrov Автор
Да действительно, после добавления PWA, в Google Play Store, особых событий не было. Скорее как технология, она заняла свою определенную нишу.