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

Эта статья посвящена тому, как создать простое приложение PWA с использованием Angular 6, но перед этим давайте рассмотрим основные преимущества, которые делают PWA такими модными.

  • Связь с магазинами отключена. Публиковать их не нужно, иногда это может оказаться сложной и дорогостоящей задачей (особенно в случае Apple).
  • Не нужно их скачивать. Вы можете установить их прямо из окна браузера.
  • Как приложение. PWA действует и ощущается как собственное приложение, имея доступ к некоторым функциям устройства, таким как камера.
  • Автономный режим и веб-push-уведомления благодаря работникам службы.

Эти функции заставляют разработчиков и компании тратить время на создание PWA. Особенно в случае электронной коммерции.

Angular 6. Да, это очень помогает!

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

Давайте пойдем шаг за шагом, поэтому первое, что нам нужно сделать, это установить или загрузить последнюю версию angular-cli.

npm install -g @angular/cli

Затем мы собираемся создать новый проект.

ng new myPwaApp

Наконец, обслуживаем проект:

cd myPwaApp
ng build

Теперь наш проект работает на https: // localhost: 4200 / с некоторым содержимым по умолчанию. На самом деле нам не нужно сильно менять этот контент.

Теперь, благодаря Angular 6, мы можем превратить наш проект в PWA, просто выполнив следующую команду:

ng add @angular/pwa

После публикации нашего приложения давайте посмотрим, что эта команда сделала для нас.

Мы видим, что @ angular / service-worker добавлен в наш package.json. Он также создал manifest.json с данными нашего приложения и различными размерами значка.

В файл index.html добавлен файл masnifest.json.

Он также активировал для работника службы флага значение true в файле angular.json. Это флаг. Этот флаг приведет к созданию пары файлов в сборке для производства.

. ngsw-worker.js

. ngsw.json

Эти файлы - это сам Angular Service Worker. Ngsw.json сообщает сервис-воркеру, как он должен себя вести.

Если мы посмотрим на некоторые строки кода, мы увидим, что конфигурация загрузки PWA установлена ​​в этом файле. Например, основные файлы js и css загружаются в режиме «предварительной выборки». Это означает, что приложение будет загружать этот контент сразу при запуске (в первый раз).

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

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

Наконец, он добавил ServiceWorkerModule в app.module.ts, а также зарегистрировал сервис-воркер.

Публикация нашего приложения

Как только мы увидели, как angular 6 превратился в наш проект в PWA, пришло время опубликовать его и узнать, как он работает. Сервисному работнику необходим HTTPS для правильной работы. Итак, в моем случае лучший вариант для публикации приложения - использование Firebase Hosting. Для этого установите инструменты Firebase:

npm install -g firebase-tools

Войдите в свою учетную запись Firebase:

firebase login

Создайте новый проект Firebase:

Инициализируйте проект, следуя инструкциям интерфейса командной строки Firebase. (Не забудьте выбрать услугу «хостинг»)

firebase init

Затем добавьте проект Angular в общую папку проекта firebase и измените файл firebase.json, чтобы перенаправить вашу общую папку на правильный путь сборки проекта. У меня так получилось:

И, наконец, мы можем развернуть наш проект. С флагом «только хостинг» он будет развертывать только наше приложение, не заботясь о каких-либо других службах Firebase, которые мы можем использовать.

firebase deploy --only hosting

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

URL хостинга: https://jose-ant-ruiz.firebaseapp.com

В будущем я добавлю в приложение дополнительные функции, например push-уведомления. Спасибо за чтение и следите за обновлениями!