PWA Angular 6+ - Паттерн PRPL

PWA Angular 6+ - Паттерн PRPL

PRPL паттерн – это новый метод, используемый для создания современных прогрессивных веб-приложений. (В контексте этой статьи речь пойдет о pwa angular – прим. автора перевода)

Он предназначен для обслуживания клиентской части приложения (CSS, JS и другие статические файлы) в рамках текущей запрашиваемой странице. При этом ресурс будет кэшироваться.

  • Это увеличивает скорость запуска приложений
  • Не тратит время на ненужную компиляцию неиспользуемого JS
  • Позволяет быстрее начать работу с приложением
  • Уменьшает обмен байтами между сервером и клиентом

PRPL означает:

  • Отправка критических ресурсов для начального URL-маршрута
  • Отрисовка начального маршрута
  • Предварительно кэшировать оставшиеся маршруты
  • Отложенная загрузка и создание оставшихся маршрутов по требованию

Фреймворк

Поскольку в Angular фреймворке есть все необходимое прямо из “коробки”, мы создадим простое приложение, которое использует этот шаблон.

Ангуляр особенности, в рамках реализуемого примера:

    • Service workers
    • Lazy loading
    • angular-cli

Приложение PWA Angular

Мы собираемся построить мобильное приложение для клининговых услуг. Мы позаимствовали эскиз из: www.sketchappsources.com

Эскиз был сделан Максом Хоменко.

Мы будем использовать Figma для загрузки эскиза и экспорта необходимых ресурсов: https://www.figma.com/file/VdyF2hYyzFtpFmb7fXzGPc0v/Cleaning-App

Библиотеки и технологии

Ради размера и производительности мы не будем использовать никаких библиотек пользовательского интерфейса или каких-либо сторонних компонентов.

  • Мы будем копировать содержимое normalize.css в наш основной style.css
  • В качестве метода позиционирования элементов будем использовать Flex.

Я не буду вдаваться в подробности о написании HTML, CSS и TypeScript в этом уроке, все это можно найти по ссылке GitHub в конце этой статьи.

Структура

Структура приложения соответствует следующей блок-схеме:

PWA Angular структура приложения

Bootstrapping

Создайте новое приложение Angular с помощью ( перед этим нам нужно будет установить @angular/cli@6.0.8 версия, потому что в последнем выпуске 6.1.1 есть проблема с модулем @angular/pwa):

ng new cleaning-app –routing -p capp –skip-git && cd cleaning-app

Затем мы добавим инструментарий PWA в наше приложение (что касается @angular/pwa@, мы установим 0.6.8 версию этого модуля, потому что в последнем выпуске есть ошибка.):

ng add @angular/pwa@0.6.8 –project cleaning-app

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

Мы сгенерировали значок и заменили стандартные в src/assets / icons.
Мы изменили несколько вещей в src / manifest.json (имя, short_name и theme_color в соответствии с нашим приложением). В конце концов, это выглядит так:

{
  "name": "Cleaning Service",
  "short_name": "CA",
  "theme_color": "#48b3e2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "index.html",
  "icons": [...]
}

Модули

После мы добавим 5 модулей:

ng generate module Step1 --routing
ng generate module Step2 --routing
ng generate module Step3 --routing
ng generate module Final --routing
ng generate module Shared

Routing

Все модули мы подключим с “ленивой” загрузкой:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'step1'
  },
  {
    path: 'step1',
    loadChildren: 'src/app/step1/step1.module#Step1Module'
  },
  {
    path: 'step2',
    loadChildren: 'src/app/step2/step2.module#Step2Module'
  },
  {
    path: 'step3',
    loadChildren: 'src/app/step3/step3.module#Step3Module'
  },
  {
    path: 'final',
    loadChildren: 'src/app/final/final.module#FinalModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Состояния – States

Мы можем определить возможное состояние из эскиза приложения. Наше PWA Angular приложение имеет один поток и для этого мы будем использовать только один сервис и одну модель.

Нам нужен сервис для сохранения состояния приложения (выбранные опции). Это будет сделано через оффер сервис.

ng generate service shared/services/Offer

Мы создадим Оффер модель, а также

ng generate class shared/services/Offer –type model

со всеми необходимыми атрибутами.

 

export class Offer {
  total = 0;
  beds = 0;
  baths = 0;
  windows: boolean;
  ironing: boolean;
  fridge: boolean;
  oven: boolean;
  when: Date;
  time: string;
  location: string;
  name: string;
  city: string;
  mobile: string;
  email: string;
  notes: string;
  waitingAtHome: boolean;
  keysAndSecurity: boolean;
  keyUnderDoormat: boolean;
}

Важно, что мы можем сбросить полное состояние после окончания процесса.

В offer.service.ts мы создали все необходимые методы set и unset для атрибутов предложения.

Общий модуль

Общий модуль нашего PWA Angular приложения, как следует из его названия, будет содержать общие компоненты

Как мы определили его на эскизе приложения, у нас будет четыре общих компонента: Заголовок, ввод, кнопка и шаг. Мы создадим их в общем модуле:

ng generate component shared/components/Header -c 'OnPush' --module shared/shared.module.ts --export
ng generate component shared/components/Input -c 'OnPush' --module shared/shared.module.ts --export
ng generate component shared/components/Button -c 'OnPush' --module shared/shared.module.ts --export
ng generate component shared/components/Step -c 'OnPush' --module shared/shared.module.ts --export

Маркировка компонента OnPush означает, что этот компонент является ‘глухим’ компонентом, и обнаружение изменений будет запускаться только при изменении Input.

Шаг 1

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

ng generate component step1/components/Home –module step1/step1.module.ts
Мы можем заметить на эскизе приложения, что у нас есть один повторяющийся компонент (кнопки уменьшения и увеличения), поэтому мы создадим его в нашем модуле step1.

ng generate component step1/components/controls –module step1/step1.module.ts -c ‘OnPush’
Все компоненты, которые не ржали маршруты, должно быть ‘глухими’  компонентами и помечены OnPush.

Наш окончательный дизайн для шага 1 выглядит так:

PWA Angular step 1

Шаг 2

Опять же, мы создаем компонент home для этого модуля.

ng generate component step2/components/Home –module step2/step2.module.ts
После добавления всех необходимых методов для предложения сервиса и HTML с CSS, наш компонент выглядит так:

PWA Angular step 2

Шаг 3

Что касается шага 3, мы создаем домашний компонент для этого модуля.

ng generate component step3/components/Home –module step3/step3.module.ts
После нанесения всех необходимых стилей, она выглядит вот так:

PWA Angular step 3

Финальный шаг

Опять же, как и все выше, мы создаем home компонент.

ng generate component final/components/Home –module final/final.module.ts
Мы определили компонент Option на этой странице и создадим его с помощью:

ng generate component final/components/option –module final/final.module.ts -c ‘OnPush’
После того, как все необходимые компоненты стилизованы и импортированы, это выглядит так:

PWA Angular step 4

Сжатие

Поскольку angular-cli не делает сжатие gzip файлов JS и CSS из коробки, мы достигнем этого с помощью gulp script, который мы запустим после команды NG build.

Офлайн

Приложение работает в автономном режиме, но для него не написана бизнес-логика (например, агрегирование заказов в локальном хранилище).

Производительность и тестирование с LightHouse

Наша цель состояла в том, чтобы служить html нашим клиентам в первую секунду, и мы достигли этого, как вы можете видеть на странице Lighthouse page.

PWA Angular в LightHouse

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

Репозиторий и демо

Демо-приложение развертывается с now.sh ( и он должен быть открыт с помощью мобильного телефона): https://cleaning-app-sjgglugavc.now.sh

Весь исходный код можно найти на GitHub: https://github.com/vladotesanovic/cleaning-app

Заключение

Если кто-то заинтересован, чтобы закончить и коммерциализировать это приложение, пожалуйста, дайте мне знать. Может быть, мы сможем создать из этого что-то хорошее 🙂

 

Оригинал статьи: https://itnext.io/the-prpl-pattern-for-progressive-web-applications-using-angular-6-f7237b7dc2a7

Больше информации по теме:

 

 

 

 

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *