Веб-приложения: SPA, MPA, PWA

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

SPA (Single Page Application)

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

Применение

• Социальные сети
• Почтовые клиенты
• Административные панели

Зачем нужно

• Для быстрого и плавного пользовательского опыта
• Минимальное время загрузки

Из чего состоит

• Клиентская часть (HTML, CSS, JavaScript)
• Фреймворки и библиотеки (React, Angular, Vue.js)
• API для взаимодействия с сервером

Как работает

1. Загрузка начальной HTML-страницы
2. Загрузка CSS и JavaScript файлов
3. Инициализация фреймворка/библиотеки
4. Запросы к API для получения данных
5. Динамическое обновление DOM с использованием данных из API
6. Обновление URL и состояния приложения без перезагрузки страницы

Плюсы и минусы

Плюсы:

• Быстрая загрузка после первого запроса (кэширование ресурсов и данных)
• Плавные переходы между разделами (виртуальный DOM, клиентская маршрутизация)
• Меньшая нагрузка на сервер (меньше запросов)

Минусы:

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

Примеры: Яндекс.Почта, ВКонтакте

Интеграция

• REST API, GraphQL для взаимодействия с сервером
• Веб-сокеты для работы в реальном времени

MPA (Multi Page Application)

MPA — многостраничное веб-приложение, где каждая страница загружается отдельно с сервера.

Применение

• Сайты с большим количеством контента
• Новостные порталы
• Интернет-магазины

Зачем нужно

• Лучшая интеграция с SEO (уникальный URL у каждой страницы)

Из чего состоит

• Серверная часть (бэкэнд на PHP, Python, Java и т. д.)
• Клиентская часть (HTML, CSS, JavaScript)
• Система маршрутизации

Как работает

1. Пользователь переходит по URL
2. Сервер обрабатывает запрос и возвращает HTML-страницу
3. Браузер загружает и отображает страницу
4. При переходе на другую страницу процесс повторяется
5. Дополнительные данные могут загружаться через AJAX-запросы

Плюсы и минусы

Плюсы:

• Простая SEO-оптимизация (каждая страница имеет свой статический контент)
• Чёткая структура и маршрутизация
• Простая архитектура

Минусы:

• Более длительное время загрузки при переходах (каждый переход требует запроса к серверу)
• Высокая нагрузка на сервер из-за частых запросов

Примеры: Озон, сайт РБК

Интеграция

• REST API для взаимодействия с сервером
• Встраивание iframe для отдельных модулей

PWA (Progressive Web Application)

PWA сочетает возможности веб-приложений и нативных мобильных приложений. Работает офлайн, отправляет push-уведомления и может устанавливаться на устройства.

Применение

• Веб-приложения с офлайн-доступом и уведомлениями
• Мобильные версии веб-сайтов

Зачем нужно

• Обеспечивает нативный пользовательский опыт
• Увеличивает вовлечённость пользователей

Из чего состоит

• Клиентская часть (HTML, CSS, JavaScript)
• Service Workers для офлайн-работы
• Web App Manifest для установки на устройства

Как работает

1. Пользователь открывает PWA в браузере
2. Устанавливаются Service Workers
3. Контент кэшируется для офлайн-доступа
4. Пользователь может установить PWA на устройство

Плюсы и минусы

Плюсы:

• Офлайн-доступ и кэширование
• Push-уведомления
• Возможность установки на устройства

Минусы:

• Ограниченная поддержка функций по сравнению с нативными приложениями
• Требует больше ресурсов на старых устройствах

Примеры: Лента.ру, КиноПоиск

Интеграция

• Service Workers для кэширования и работы офлайн
• Push API для уведомлений
• Web App Manifest для установки на устройства

Сравнительная таблица SPA, MPA и PWA

Критерий	SPA (Single Page Application)	MPA (Multi Page Application)	PWA (Progressive Web Application)
Перезагрузка страниц	Нет перезагрузки, динамическое обновление контента	Каждая страница загружается заново	Нет перезагрузки, динамическое обновление контента
Когда лучше выбрать	Высокий уровень взаимодействия, требуются быстрые переходы	Большие объемы контента, необходима SEO-оптимизация	Требуется офлайн-доступ, push-уведомления, мобильный опыт
Начальная загрузка	Долгая, так как загружается весь клиентский код и ресурсы	Быстрая, так как загружается только необходимая страница	Быстрая после первой загрузки, благодаря кэшированию
Обновление данных	Динамическое через API	Обновление данных через полную перезагрузку страницы или AJAX-запросы	Динамическое через Service Workers и кэш
SEO	Сложная оптимизация, требуется дополнительная настройка	Легкая оптимизация, каждая страница имеет уникальный URL	Похож на SPA, требует дополнительных настроек для SEO
Производительность	Высокая после первой загрузки	Может снижаться из-за частых перезагрузок	Высокая благодаря кэшированию и работе офлайн
Офлайн-режим	Нет, без дополнительных библиотек	Нет	Да, благодаря Service Workers
Push-уведомления	Нет	Нет	Да
Сложность разработки	Высокая, особенно управление состоянием и маршрутизацией	Умеренная, четкая структура и маршрутизация	Высокая, требуется настройка Service Workers и манифестов
Безопасность	Высокая, но необходимо следить за уязвимостями в клиентском коде	Умеренная, стандартные меры безопасности	Высокая, дополнительные настройки безопасности через Service Workers
Поддержка браузеров	Хорошая, но может зависеть от фреймворков	Отличная, классическая архитектура	Хорошая, но не все функции поддерживаются старыми браузерами

Подборка материалов

1. Web-приложение: понятие, компоненты и принципы работы
2. Веб-программа: описание и особенности
3. Следующий этап развития Веба
4. Веб-приложение и веб-сайт: в чем разница?
5. Влияние service worker'ов на web-приложения
6. Архитектура веб приложения: компоненты, слои и типы
7. JAMstack — зачем, почему и за что
8. Flutter for Web: гайд для начинающих
9. Что нужно для создания веб-приложений
10. Сравнительный анализ сайта, веб-приложения, SPA и PWA
11. Мобильное приложение или веб?

Видео

1. Как работает веб? MPA, SPA
2. Знакомство с MPA/SPA, SSR/CSR - отличия, недостатки, примеры реализации
3. Роутинг на React. SPA и MPA на примерах
4. Веб-приложение и веб-сайт: разница за 8 минут
5. Как работают SPA (Single Page Application)
6. PWA: что такое прогрессивное веб-приложение?
7. Как работают веб-приложения. Что происходит, когда вы вводите адрес в браузере
8. Архитектура современных WEB приложений. Эволюция от А до Я