Сейчас все говорят о прогрессивных веб-приложениях, держу пари, что вы, наверное, что-то о них слышали. Они могут побеждать драконов, ездить на единорогах или заряжаться со скоростью звука.
Эта статья посвящена тому, как создать простое приложение 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-уведомления. Спасибо за чтение и следите за обновлениями!