Angular. Прогрессивные веб приложения (PWA)

Главная » Видеоуроки » JavaScript » Angular. Прогрессивные веб приложения (PWA)

Progressive Web App (PWA) — одна из самых полезных возможностей Angular. Благодаря встроенной поддержке Service Worker можно превратить обычное SPA-приложение в приложение, которое работает быстрее, кэширует ресурсы, поддерживает офлайн-режим и автоматически обновляется при публикации новой версии.

В этой статье разберем, как создать PWA в Angular, настроить Service Worker, кэшировать HTTP-запросы и реализовать проверку обновлений приложения.

Что такое PWA

Progressive Web App (PWA) — это веб-приложение, которое максимально похоже на нативное мобильное приложение.

Основные преимущества PWA:

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

Главной частью любого PWA является Service Worker.

Конфигурация ngsw-config.json

Все поведение Service Worker описывается в файле ngsw-config.json (см. код ниже).

В секции assetGroups находятся статические ресурсы приложения.

В примере кэшируются:

index.html;
manifest.webmanifest;
CSS;
JavaScript;
favicon.

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

Кэширование HTTP API

Angular умеет кэшировать не только файлы приложения, но и HTTP-запросы.

Для этого используется раздел dataGroups.

Проверка обновлений приложения

Одним из преимуществ PWA является возможность автоматически получать новые версии приложения.

Для этого используется сервис SwUpdate.

Проверка PWA через Lighthouse

После настройки Service Worker рекомендуется проверить приложение с помощью Lighthouse в Chrome DevTools.

Lighthouse анализирует:

производительность;
доступность;
SEO;
корректность настройки PWA;
работу Service Worker;
наличие Web Manifest;
возможность установки приложения.

Если все настроено правильно, приложение получит высокий рейтинг по категории Progressive Web App.

Angular предоставляет практически готовую инфраструктуру для создания Progressive Web App. Достаточно настроить Service Worker и файл ngsw-config.json, после чего приложение получает множество преимуществ:

работу в офлайн-режиме;
кэширование HTML, CSS и JavaScript;
кэширование REST API;
автоматическое обновление приложения;
более высокую скорость загрузки;
возможность установки на мобильные устройства;
улучшенные показатели Lighthouse.

Если вы разрабатываете современное Angular-приложение, поддержка PWA — отличный способ повысить производительность, надежность и удобство для пользователей без использования сторонних библиотек.

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.csr.html",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "users-api",
      "urls": ["https://jsonplaceholder.typicode.com/users/"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "3s"
      }
    }
  ]
}

app.ts

import { Component, inject, Signal, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toSignal } from '@angular/core/rxjs-interop';
import { SwUpdate, VersionEvent } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  imports: [],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  protected users: Signal<any> = signal([]);

  private http = inject(HttpClient);

  constructor(private swUpdate: SwUpdate) {
    this.users = toSignal(this.http.get('https://jsonplaceholder.typicode.com/users/'));
    if (swUpdate.isEnabled) {
      this.swUpdate.versionUpdates.subscribe((event: VersionEvent) => {
        console.log('Event type', event.type);
      });

      this.swUpdate.checkForUpdate().then((hasUpdate) => {
        if (hasUpdate) {
          console.log('New version available, click ok to refresh');
          window.location.reload();
        }
      });
    }
  }
}