Как создать прогрессивную веб-программу с Angular и безголовой CMS

1656618021 kak sozdat progressivnuyu veb programmu s angular i bezgolovoj cms

автор Ондрий Кристина

4HQqCM-yVf9A4EjHPAsKPYvhDGdEtklfLcOm

Вы когда-нибудь задумывались, как безголовая система управления содержимым сочетается с прогрессивными веб-приложениями?

Недавно я прочитал рассказ своего коллеги Брайана о прогрессивных веб-приложениях. В статье говорится о реализации прогрессивного веб-приложения (PWA), содержащего перечень интересных мест, хранящихся в безголовой CMS.

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

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

Я сузил свой выбор до трех крупных игроков – React, Vue и Angular. Я решил использовать Angular, потому что он уже поддерживает сервисных работников, и я хотел использовать TypeScript.

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

Чтобы запустить приложение, просто загрузите или клонируйте комит и запустите npm install и ng serve -o. Весь код хранится в одной из веток.

Давайте приступим к этому!

Предпосылки

  • node.js версии 8+
  • Angular CLI версии 1.7.4 установлен как глобальная зависимость через менеджер пакетов npm: npm install -g @angular/cli

Начинаем

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

ng new cloud-sample-angular-pwa-aps

Типичная конфигурация

4Hjiz65hb-1T-nUK-LjuICXRKbymmoBvyx88
Настроенная шаблонная фиксация

Существует несколько шагов для настройки шаблона.

Сгенерированный код по умолчанию употребляет обычный CSS. Но, возможно, вы захотите облегчить свою жизнь с помощью SCSS. Чтобы достичь этого, выполните следующие действия.

  1. Набор defaults.styleExt значение от cssк scssв/.angular-cli.jsonфайл конфигурации
  2. Переименовать styles.css к styles.scss
  3. Переименовать /src/app.component.css к /src/app.component.scssи отразить это переименование в app.component.ts в атрибуте объявления компонента styleUrls стоимость имущества.

Создайте инициал содержание для программы

Давай посмотрим!

Al8CUwqAdD24f1o-Wuw5u4xrLM8HYpSmFaM7
вуаля, первый запуск программы

Просто запустите эту команду:

ng serve -o

Загрузите данные

4LCfjsHaWVGURtUehLSGhtx2095mR96ExNEr
Загрузка данных.

Давайте наконец-то воспользуемся мощностью Angular. В этом разделе мы определим инъекционный клиент, позволяющий получать данные Kentico Cloud. Я буду использовать тот же источник данных, который использовал Брайан в своей статье.

Прежде всего, установите Kentico Cloud Delivery SDK с помощью такой команды:

npm install -P kentico-cloud-delivery-typescript-sdk

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

Создайте новый файл в /src/app папку и назовите ее delivery-client.provider.ts. Этот модуль поставщика должен экспортировать объект, определяющий фабрику, используемую для создания нашего клиента. В следующем коде вы можете увидеть идентификатор проекта в Kentico Cloud, где хранятся данные.

import { DeliveryClient, DeliveryClientConfig } from 'kentico-cloud-delivery-typescript-sdk';

export const DeliveryClientFactory = (): DeliveryClient => {
    const projectId = '975bf280-fd91-488c-994c-2f04416e5ee3';
    
    return new DeliveryClient(
        new DeliveryClientConfig(projectId, [])
    );
};

export const DeliveryClientProvider = {
    provide: DeliveryClient,
    useFactory: DeliveryClientFactory,
    deps: []
};

Далее отредактируйте app.module.ts. Это место, где вы указываете, какие модули загружены.

... 
import { DeliveryClientProvider } from './delivery-client.provider';
...

@NgModule({
...
providers: [DeliveryClientProvider]
...
})

Теперь мы готовы использовать клиента в компоненте программы.

Мы установим app.component.ts использовать DeliverClient который автоматически вводится как параметр конструктора. Мы также подпишем компонент на наблюдаемом клиенте и определим соответствующее действие наблюдателя.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DeliveryClient, ContentItem } from 'kentico-cloud-delivery-typescript-sdk';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, OnDestroy {
  dataSubscription: Subscription;
  pointsOfInterest: ContentItem[];
  
constructor(private deliveryClient: DeliveryClient) { }

ngOnInit() {
    this.dataSubscription = this.deliveryClient
      .items<ContentItem>()
      .type('point_of_interest')
      .get()
      .subscribe(response => {
        this.pointsOfInterest = response.items;
      });
  }
  
ngOnDestroy(): void {
    this.dataSubscription.unsubscribe();
  }
}

Последним шагом является отображение данных из CMS с помощью Angular. ngFor директива для перебора элементов и их воспроизведения

<header>
    <h2>Pack and Go</h2>
</header>
<main class="main">
    <div class="card" *ngFor="let poi of pointsOfInterest">
        <h2 class="title">{{poi.title.value}}</h2>
        <div class="content" innerHTML="{{poi.description.value}}"></div>
        <a class="map-link" target="_blank" href="
           Open the map
        </a>
    </div>
</main>

Разрешить добавить значок ярлыка

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

hDtH-KcbAIVk8hyusfrbGV8JaHEd--pLYSbk

Этот шаг достаточно легок. Для этого нужно создать файл JSON, содержащий метаданные программы, и связать его с файлом head тег. Файл манифеста должен указывать на несколько URL-адресов иконок разного размера.

Мы также должны перечислить manifest.json подать в декларацию об имущественном положении в .angular-cli.json конфигурационный файл.

{
    ...
    apps: {
        assets : [
            ...,
            "
        ],
        ...
    },
    ...
}

Но, что важнее, ссылка на manifest.json файл с index.html.

<link rel="manifest" href=" />

Наконец, мы создадим сам манифест вместе со всеми значками. Выделите ссылку ниже, чтобы увидеть результат.

jmtJk-647gvGgq-bdjB3ssca-qbgo2QbmR8p
Зафиксируйте ссылку с данными.

Настройте сервисного работника

Концепция служащего – это то, что делает программы PWA революционными.

Сервисные работники работают как прокси между клиентом и Интернетом. В зависимости от фактической конфигурации служащий может предварительно кэшировать скелет программы (так называемый «оболочка программы») при первой загрузке. Это означает, что следующие запросы выполняются очень быстро. Service Worker также может молча кэшировать все остальные данные программы.

Прежде всего, необходимо установить модуль service worker в программу.

npm install -P @angular/service-worker

Теперь включите Service Worker в Angular в .angular-cli.json конфигурационный файл.

{
    ...
    apps: {
        "serviceWorker": true,
        ...
    },
    ...
}

Теперь давайте импортируем модуль Service Worker в нашу программу с помощью app.module.ts файл.

...
import { ServiceWorkerModule } from '@angular/service-worker';
...
@NgModule({
  ...
  imports: [
    ...
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],
  ...
})
˛...

Последнее – это настроить стратегию кэширования для оболочки программы и данных. Сначала нам нужно создать ngsw-config.json конфигурационный файл под /src папку.

Для оболочки программы мы будем использовать настройки по умолчанию, описанные в документации. Эта конфигурация будет предварительно загружена index.html , favicon.ico , и оболочку приложения, включая связанные пакеты CSS и JavaScript. Файлы в /assets папки загружаются отложено.

Запросы на данные от Kentico Cloud будут использовать другую стратегию кэширования. Мы определим конечную точку API как новую группу данных и настроим кэширование на использование стратегии свежести. В следующей ссылке для фиксации вы можете увидеть все содержимое файла конфигурации.

-fdiGKoHlYE2tkUjOZiS7V89pT0d1jjedLkc
Ссылка на фиксацию

Теперь мы готовы установить приложение на устройстве. К примеру, в Chrome в Android вы можете сделать это, нажав глиф с точками и выбрав «Добавить на главный экран».

NLmY5ZkuUm8267AT-VfDutcekoSzFp6uhGuO

Ладно, мы кончили. Несмотря на быструю и простую реализацию, приложение достаточно мощное и быстрое. И мы можем расширять его разными способами, например импортировать дизайн материала или значки шрифтов.

API PWA также позволяет нам использовать крутые собственные функции, такие как:

  • считывать датчики устройства
  • отображать push-сообщение
  • и использовать камеру устройства.

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

Как видите, создать PWA в Angular легко, но позволяет нам значительно расширить приложение.

Добавить комментарий

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