Главная » Хабрахабр » Angular6. PWA. Lazy loading modules. Auto-deploy в Firebase

Angular6. PWA. Lazy loading modules. Auto-deploy в Firebase

Angular 6 позволяет буквально в несколько команд создать основу для Progressive Web Application (PWA), создавать верстку для навигационных страниц, таблиц, dashboard.

0. Нам необоходим angular-cli версии не ниже 6. 0, поэтому проверим версию установленного пакета:

ng --version

и при необходимости установим последнюю версию:

npm i -g @angular/cli

Так же имеются различия и в функциональности. Все это мы проделываем, так как существуют различия в структуре проектов, которые создаются angular-cli 6 версии и проектов созданными более ранними версиями. Как раз о некоторых из этих особенностей эта статья.

Итак, создадим типовой проект сразу с функционностью роутинга, так как планируется реализовать и демонстрацию возможостей отложенной загрузки модулей (lazy loading modules):

ng new angular-pwa-ci --routing

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

git init
git add .
git commit -m "Initial commit"

Следующая команда превратит наш проект в Progressive Web Application (PWA)

ng add @angular/pwa --project "angular-pwa-ci"

Выдача по результатам выполнения команды содержит следующее:

Заголовок спойлера

Installed packages for tooling via yarn.
CREATE ngsw-config.json (392 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
CREATE src/manifest.json (1085 bytes)
UPDATE angular.json (3571 bytes)
UPDATE package.json (1389 bytes)
UPDATE src/app/app.module.ts (605 bytes)
UPDATE src/index.html (390 bytes)

Сделаем еще один коммит.

И поспешим убедиться насколько наше приложение теперь соответствует требованиям предъявляемым к PWA.

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

Если эта утилита еще не установлена, то установить ее можно командой:

npm i -g lighthouse

Поэтому проверим наличие в файле src/index.html строки Эта утилита, в том числе будет проверять отображение нашим приложением контента при отключенном в браузере javascript.

<noscript>Please enable JavaScript to continue using this application.</noscript>

Теперь выполним сборку нашего проекта в режиме production, так как настойками по умолчанию предусмотрена работа service workers только в режиме prodaction.

ng build --prod

Создадим в корне проекта файл server.js
Если вы используете в качестве редактора Visual Studio Code, то рекомендую установить расширение Angular Essential , которой включает в себя расширение Angular v6 Snippets , с помощью которого можно начать вводить: Далее в данной статье будет описана процедура auto-deploy на бесплатный хостинг предоставляемый сервисом firebase, но сейчас для целей разработки нам будет достаточно локального сервера, который мы сейчас и напишем.

ex-node-

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

node server.js

Наше приложение доступно по адресу: http://localhost:8080 и мы можем запустить аудит

lighthouse http://localhost:8080

Откроем его в браузере и увидим результаты аудита. Утилита создаст в корне нашего проекта файл вида localhost_2018-06-08_23-42-21.report.html. 100% мы не набрали, но все еще впереди.

Для того чтобы организовать автодеплой нашего приложения на firebase, на понадобится аккаунт на http://firebase.com.

Устанавливать будем локально, так как этот пакет будет использоваться в дальнейшем для автодеплоя. После этого установим firebase-tools.

npm i -D firebase-tools

А чтобы не писать длинный путь node_models/firebase-tools/bin/firebase каждый раз — установим еще и глобально.

npm i -g firebase-tools

Залогинимся в сервисе firebase:

firebase login

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

Создание нового проекта возможно только в Firebase Console, поэтому перейдем по адресу https://console.firebase.google.com и создадим новый проект, который назовем angular-pwa-ci.

Следующией командой создадим файлы конфигурации.

./node_modules/firebase-tools/bin/firebase init

Эта команда вызовет диалог, где мы:

  • выберем проект angular-pwa-ci;
  • из сервисов будем использовать только hosting;
  • папкой для синхронизации укажем dist/angular-pwa-ci/;
  • сконфигурируем наше приложение, как SPA (переадресуем все запросы на index.html);
  • откажемся от перезаписи index.html.

Теперь выложим наше приложение на хостинг в ручном режиме

./node_modules/firebase-tools/bin/firebase deploy --only hosting

Например, https://angular-pwa-ci.firebaseapp.com. В выдаче этой команды, будет указан адрес, по которому будет доступно наше приложение.

А теперь еще раз проведем аудит нашего приложения.

lighthouse https://angular-pwa-ci.firebaseapp.com

Вот наше приложение стало PWA на 100%.

Lazy loading modules

Заодно исследуем еще одну из возможностей angular 6.
Добавим поддержку angular/material для нашего проекта. Немного украсим наше приложение.

ng add @angular/material @angular/cdk

Теперь создадим навигационную страницу нашего приложения

ng g @angular/material:material-nav --name=nav -m app

Настало время внести изменения в код нашего проекта в ручном режиме.

// src/app/app.component.html
<app-nav></app-nav>

// src/app/nav/nav.component.ts @Component({
- selector: 'nav',
+ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'] })

Создадим модуль

ng g m table --routing

В созданном модуле table создадим компонент с уже готовой разметкой и стилями.

ng g @angular/material:material-nav --name=table --flat=table -m table

// src/app/app-routing.module.ts
-const routes: Routes = [];
+const routes: Routes = [
+ {
+ path: 'table',
+ loadChildren: './table/table.module#TableModule'
+ },
+ {
+ path: '',
+ redirectTo: '',
+ pathMatch: 'full'
+ }
+];

// src/app/table/table-routing.module.ts
-const routes: Routes = [];
+const routes: Routes = [
+ {
+ path: '',
+ component: TableComponent
+ }
+];

Заменим ссылку на routerLink и добавим router-outlet

// src/app/app.component.html <mat-toolbar color="primary">Menu</mat-toolbar> <mat-nav-list>
- <a mat-list-item href="#">Link 1</a>
+ <a mat-list-item routerLink="/table">Table</a> <a mat-list-item href="#">Link 2</a> <a mat-list-item href="#">Link 3</a> </mat-nav-list>
@@ -25,5 +25,6 @@ </button> <span>Application Title</span> </mat-toolbar>
+ <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container>

Обратите внимание. После этого запустим наше приложение в режиме разработки ng serve. Если до этого вы находились в этом режиме, то нужно запустить заново.
Мы можем наблюдать, что создался дополнительный chunk.
А в панели разработчика на вкладке network мы увидим, про при переходе по ссылке наш модуль table подгружается динамически.

Создадим еще один функциональный модуль и компонент с разметкой для dashboard

ng g m dashboard --routing
ng g @angular/material:material-dashboard --flat=dashboard --name=dashboard -m dashboard

Действия по изменению кода — аналогично модулю table.

В результате мы получим PWA приложение с двумя динамически подгружаемыми функциональными модулями.
Самое время перейти к реализации автоматического деплоя нашего приложения на firebase.

CD для Firebase

Нам понадобится аккаунт на https://travis-ci.org и аккаунт на https://github.com.
Создадим репозиторий angular-pwa-ci в github и разместим в нем код нашего приложения

git remote add https://github.com/<ваш аккаунт>/angular-pwa-ci.git
git push -u origin master

Для этого на странице https://travis-ci.org/profile/ нажмем кнопку синхронизации, и в списке репозиторием подключим angular-pwa-ci
После этого подключим наш репозиторий angular-pws-ci к сервису travis-ci.

Для деплоя нашего приложения нам понадобится ключ для этого выполним команду

firebase login:ci

Скопируем его значение и добавим его в переменные окружения travis-ci под именем FIREBASE_TOKEN
Выдача этой команды будет содержать ключ.

Осталось добавить в наш проект файл .travis.yml

language: node_js
node_js: - "node" before_script:
- npm i -g firebase-tools
script:
- npm install
- npm run build
- firebase use --token $FIREBASE_TOKEN angular-pwa-ci
- firebase deploy -m "build $TRAVIS_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
cache: directories: - "node_modules"

В результате сработает триггер, который запустит job на travis-ci. Сделаем commit и отправим наш на github. По окончании наш проект на хостинге firebase будет обновлен.

Исходный код проекта доступен
Демо проекта
"Поиграться" с кодом можно


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Дайджест свежих материалов из мира фронтенда за последнюю неделю №335 (15 — 21 октября 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.     Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Занимательное Медиа • Подкаст «Веб-стандарты», Выпуск №142: Safari и Edge, бюджет на перфоманс, новые теги в HTML, киевское сообщество, кто такие Котаны?• Подкаст «Frontend Weekend» ...

Вышла Oracle Database 18c XE

Можно открывать шампанское и закатывать вечеринку — спустя более, чем 7 лет с момента выпуска предыдущего релиза, для скачивания наконец доступна свежайшая Oracle Database 18c XE. Свершилось! Пока только для Linux x64, но версии для других платформ, также как и ...