PWA и SPA, или Как выбрать архитектуру веб-разработки

Ориентация на пользовательский опыт (UX) и подход, ориентированный на мобильные устройства - вот, что сегодня важно для разработки приложений. Любой пользователь ожидает от веб-сайтов и приложений отзывчивости и доступности на любом устройстве. Чтобы удовлетворить эти требования, были разработаны новые архитектуры и технологии веб-приложений, которые имитируют работу нативных приложений.

Постоянно развивающиеся фреймворки вносят усовершенствования в процесс разработки веб-приложений. Выбор технологии существенно влияет на будущее развитие проекта, что требует ответственного подхода с пониманием будущих целей. 

Одностраничные приложения (SPA) и прогрессивные веб-приложения (PWA) на слуху у тех, кто задумывается о создании собственного приложения. Эти две архитектуры заслуживают внимания и того, чтобы между ними выбирать. Поэтому основными целями этой статьи являются сравнение PWA с SPA и помощь в выборе одной из архитектур.

Что такое Progressive Web Apps (PWA)?

Прогрессивные веб-приложения (Progressive Web Apps, или PWA) - это веб-приложения, которые используют современные возможности для предоставления пользователям опыта в стиле нативных приложений. PWA обеспечивают надежный и интерактивный опыт, который также улучшается со временем благодаря автоматическим обновлениям. 

Приложения PWA создаются с использованием распространенных веб-технологий, включая HTML, CSS и JavaScript. А рабочие службы и манифест приложений позволяют приложениям работать в автономном режиме и загружаться мгновенно.

Ключевые особенности PWA

• Рабочие службы позволяют PWA работать быстро, в автономном режиме или в сетях низкого качества, кэшируя файлы APP, используя минификацию, разделение кода и сжатие. Это позволяет сократить начальное время загрузки приложения и повысить общую производительность.
• В прогрессивных веб-приложениях также используется одна кодовая база, благодаря которой веб-приложение доступно на любом устройстве, без необходимости создавать различные версии.
• PWA могут использовать Notifications API для отправки пользователям push-уведомлений, независимо от того, открыто приложение или находится в фоновом режиме.
• PWA позволяют устанавливать автоматические обновления, не требуя от пользователя вручную обновлять приложение из магазина приложений. Когда вы обновляете PWA, новая версия автоматически загружается в фоновом режиме. 
• Такие приложения работают по протоколу HTTPS, что предотвращает прослушивание и гарантирует, что контент не был подделан во время передачи. Также использование HTML, CSS и JavaScript позволяет создавать приложения даже с небольшим бюджетом.
• PWA может появляться в поисковой выдаче и вам вовсе не обязательно загружать его в магазин приложений. Таким образом пользователь может легко установить его и получать к нему доступ через веб-ярлык на устройстве. 

Как и у любой технологии, у PWA есть свои недостатки. В веб-приложениях может быть достаточно много функций, которые помогают решать широкий спектр задач и выполнять различные процессы. Однако поскольку прогрессивные веб-приложения легковесны, они имеют лишь ограниченное количество функций, которые могут использовать пользователи. 

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

Компоненты PWA

Ключевой частью архитектуры PWA является использование рабочего сервиса для кэширования активов и обработки запросов на получение, а также файла манифеста веб-приложения. Эти компоненты работают вместе, чтобы обеспечить нативный опыт.

Рабочий сервис

Во время установки приложения PWA регистрируется рабочий файл службы (Service Worker), который впоследствии контролирует все последующие посещения приложения, как онлайн, так и офлайн.

Он кэширует статические активы и зависимости, чтобы прогрессивное веб-приложение загружалось сразу, подобно тому, как работают нативные приложения. Используя Cache API, он может хранить важные файлы оболочки приложения, статические активы, конечные точки API и многое другое, чтобы обслуживать данные без сети.

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

WebAssembly

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

WebAssembly также позволяет разработчикам интегрировать в PWA внешние библиотеки и код, написанный на разных языках программирования. 

Файл манифеста

Параллельно в PWA работает файл манифеста - это JSON-файл, содержащий метаданные о прогрессивном веб-приложении. Обычно называемый manifest.json, он позволяет определять:

• Поведение дисплея. Должен ли PWA вести себя как приложение и использовать весь экран, или как веб-страница.
• Ярлыки. Возможность добавить ярлыки/иконки на главный экран на мобильном или настольном компьютере.
• Наименование. Название и краткое описание приложения.
• Ориентация. Предпочтительная ориентация дисплея - портретная или альбомная.
• Цвет темы. Устанавливает цвет темы по умолчанию для вкладок Chrome, баннеров приложений и т. д.
• URL-адрес запуска. URL-адрес точки входа для запуска приложения с ярлыков.

Итак, в целом файл манифеста позволяет PWA контролировать отображение, доступ и вести себя подобно стандартному установленному приложению.

Инструменты для разработки PWA

Для создания прогрессивного веб-приложения можно использовать следующие инструменты:

1. Ionic построен на передовом технологическом стеке Apache Cordova и фреймворке Angular.js. Он поставляется с огромной библиотекой компонентов для Android и iOS, которые используются разработчиками для создания веб-страниц, запускаемых в браузере устройства с помощью WebView. Это главное преимущество Ionic для разработки PWA.
2. Polymer - это фреймворк прогрессивных веб-приложений с открытым исходным кодом от Google. Он состоит из широкого спектра шаблонов, инструментов для создания прогрессивных веб-приложений и веб-компонентов, которые упрощают весь процесс разработки PWA. 
3. AngularJS является одним из самых популярных фреймворков для разработки прогрессивных веб-приложений, благодаря наличию необходимых инструментов, большим сообществом и определенному способу реализации приложения.
4. Vue.js используется для создания PWA благодаря простоте кодирования и высокой скорости рендеринга. Это позволяет масштабировать прогрессивное веб-приложение с помощью дополнительных пакетов. 

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

Примеры PWA приложений

Также в понимании данной архитектуры веб-разработки вам могут помочь реальные примеры использования PWA:

• Облегченная PWA-версия Twitter Lite (на данный момент X) предназначалась для пользователей в регионах с ограниченным доступом в Интернет. Она предлагает быстрое время загрузки, автономный доступ и push-уведомления.
• Веб-приложение Uber было полностью переработано в PWA, чтобы обеспечить идентичность процесса оформления заказа с нативным мобильным приложением.
• PWA Starbucks обеспечивает удобство заказа для мобильных устройств, позволяя клиентам делать заказы, оплачивать их и получать вознаграждения, не загружая приложение.

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

Трудности при работе с PWA

Несмотря на доступность на разных платформах, прогрессивные веб-приложения работают на iOS только с версии 11.3 и выше, а также сталкиваются с множеством технических сбоев при работе в Safari и Firefox. 

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

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

Также существуют некоторые вопросы безопасности. Поскольку PWA загружаются из неизвестных источников, проблемы безопасности и конфиденциальности, связанные с PWA, вполне обоснованы, а ваши пользователи обязательно получат уведомление о безопасности скачивания.

Обычно браузеры, например Google Chrome, могут автоматически исправлять синтаксис HTML, не доставляя неудобств ни разработчикам, ни пользователям. Однако это не всегда работает с ошибками Javascript. В результате ошибки JavaScript могут помешать поисковым системам просмотреть и проиндексировать ваше прогрессивное веб-приложение.

Что такое Single Page Applications (SPA)?

Одностраничные приложения (Single Page Applications, или SPA) представляют собой веб-приложения, которые загружают одну HTML-страницу и динамически обновляют ее по мере взаимодействия пользователя с приложением, вместо того чтобы загружать целые новые страницы. 

Приложения SPA опираются на JavaScript для маршрутизации на стороне клиента, а не на полное обновление страницы в браузере. Для создания сложных SPA используются популярные фреймворки, такие как React, Angular и Vue.js. Сокращая загрузку страниц, SPA повышают производительность и позволяют более плавно взаимодействовать с приложениями.

Вот основные особенности одностраничных приложений (SPA):

• SPA отображают пользовательский интерфейс на стороне клиента, а не на сервере. Вся навигация происходит внутри одной HTML-страницы. Это позволяет избежать полной перезагрузки страницы.
• Изменяя строку URL без перезагрузки, SPA обеспечивают интерактивность, подобную приложению, благодаря динамическому обновлению контента.
• Кэширование JavaScript и других активов позволяет SPA поддерживать базовое автономное использование, то есть работать в оффлайн-режиме.
• Такие фреймворки, как React и Angular, включают системы сборки, упрощающие управление зависимостями и поставку кода в комплекте.
• Благодаря уменьшению полной загрузки страницы SPA обеспечивают быструю начальную загрузку и высокую производительность при переходе между маршрутами.

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

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

Также SPA могут быть уязвимы к определенным проблемам безопасности, таким как атаки межсайтового скриптинга (XSS), если они не защищены должным образом. 

Компоненты SPA

SPA используют архитектуру client-side, где большая часть логики приложения и обработки данных происходит в браузере пользователя. 

• Одна HTML-страница. SPA изначально загружают одну HTML-страницу и динамически обновляют ее содержимое с помощью JavaScript по мере того, как пользователь взаимодействует с приложением.
• Маршрутизация на стороне клиента. SPA используют маршрутизацию на стороне клиента для управления навигацией между различными представлениями или разделами приложения без перезагрузки всей страницы.
• Получение данных и управление ими. SPA используют JavaScript и AJAX (Asynchronous JavaScript and XML) для асинхронного получения данных с сервера без обновления страницы.
• Управление состоянием. SPA управляют состоянием приложения (например, пользовательским вводом, данными и состоянием пользовательского интерфейса), используя различные техники, такие как Redux, Vuex или собственные решения по управлению состоянием.

SPA работают с данными динамически, получая их с сервера с помощью AJAX-запросов. Полученные данные хранятся в системе управления состоянием приложения, которая обеспечивает их неизменность и доступность во всем приложении.

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

Инструменты для разработки SPA

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

1. Angular. Данный фреймворк от Google, обеспечивает структурированный подход к созданию SPA и предлагает такие функции, как двусторонняя привязка данных, инъекция зависимостей и интерфейс командной строки для создания проектов. 
2. React. Его компонентная архитектура, виртуальный DOM и сильная поддержка сообщества делают его отличным выбором для создания одностраничного приложения. Гибкость React позволяет интегрировать его с другими библиотеками и фреймворками.
3. Aurelia. Данный фреймворк предлагает двустороннюю привязку данных, удобную систему маршрутизации и настраиваемую архитектуру. Модульная кодовая база Aurelia делает ее отличным выбором для создания одностраничных приложений.
4. Ember.js. Фреймворк поставляется с набором встроенных инструментов и практик, позволяющих легко создавать сложные SPA. Также удобен встроенный инструмент генератор Ember "ember-cli" для выполнения общих задач. 

К другим вариантам также относятся Vue.js, Svelte, Mithril и др.

Примеры SPA приложений

А вот несколько примеров применения SPA:

• SPA-дизайн Gmail обеспечивает плавное и отзывчивое управление электронной почтой, динамическую загрузку писем и плавную навигацию между папками.
• Trello, как одностраничное приложение, позволяет пользователям создавать и эффективно управлять проектными досками, карточками и задачами, обеспечивая высокую интерактивность и удобство совместной работы.
• Netflix предлагает удобный SPA интерфейс для обеспечения доступа к ТВ-приставкам и фильмам с динамической загрузкой контента и персонализированными рекомендациями.

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

Трудности при работе с SPA

Сайты, работающие по SPA архитектуре, всегда будут иметь проблемы с оптимизацией в поисковых системах. Виной тому отсутствие JavaScript в краулерах некоторых популярных поисковых систем.

Поскольку SPA является одной страницей, такая архитектура нарушает конструкцию браузера для навигации по истории страницы с помощью кнопок "вперед" или "назад". То есть, когда пользователь нажимает кнопку "назад" для возвращения к предыдущему состоянию экрана в SPA, одностраничное приложение "сбрасывается" и отображается предыдущая страница в истории браузера. Тем не менее, избавиться от этой проблемы можно изменив идентификатор хэш-фрагмента URL-адреса браузера в соответствии с текущим состоянием экрана.

Другой трудностью станет работа с аналитикой. Инструменты аналитики, такие как Google Analytics, в значительной степени зависят от загрузки в браузере полноценных новых страниц. 

Что касается SPA, то после первой загрузки страницы все последующие изменения обрабатываются внутри приложения. Если в этот момент приложение не вызовет функцию для обновления пакета аналитики, то браузер никогда не вызовет новую загрузку страницы, ничего не будет добавлено в историю браузера, и пакет аналитики не будет иметь представления о том, кто и что делает на сайте.

Критерии выбора PWA и SPA

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

1. Нативный опыт. Если вы хотите создать нативное приложение, с такими функциями, как автономный доступ и push-уведомления, но ограничены в бюджете, то PWA - подходящий выбор.
2. Производительность и отзывчивость. Для приложений, требующих высокой производительности и отзывчивости, особенно на мобильных устройствах, лучше подойдет SPA.
3. Совместимость устройств. Если целевая аудитория использует широкий спектр устройств и браузеров, PWA будет более подходящим вариантом благодаря совместимости с различными платформами.
4. Сложность и трудоемкость разработки. SPA могут быть более сложными в разработке по сравнению с традиционными PWA, поэтому следует учитывать технические знания и доступные ресурсы.
5. Бизнес-цели. Конкретные задачи и цели бизнеса, а также потребности пользователей должны в конечном итоге определять выбор между PWA и SPA.

В целом, вы можете оценить функционал PWA и SPA не только по описаниям в нашей статье, но и используя веб-приложения, которые доступны практически в любой локации. Это позволит вам определиться с архитектурой для вашего приложения.

Сравнение PWA и SPA

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

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

Несколько слов о MPA

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

Многостраничные приложения (Multi-Page Applications, или MPA) - это веб-сайты, состоящие из нескольких взаимосвязанных страниц, где каждая страница представляет собой отдельный HTML-файл. Когда пользователи просматривают эти сайты, они загружают новые страницы с сервера.

Многостраничные приложения имеют улучшенную видимость в поисковых системах, что помогает компаниям привлекать больше трафика. MPA подходят для больших приложений, требующих обработки большого объема контента и трафика.

Для сравнения, одностраничные приложения (SPA) загружают все страницы заранее и обновляют определенные разделы веб-страницы без обновления всей страницы, создавая более плавный и интерактивный опыт для пользователей. MPA уступают SPA в скорости загрузки из-за наличия большего количества контента.

Заключение

В целом, PWA обеспечивают удобство работы с нативными приложениями, доступность в автономном режиме и повышенную производительность, а SPA - бесшовное взаимодействие с пользователями и динамическое обновление контента. Выбор между PWA и SPA зависит от конкретных требований и приоритетов проекта, и это выбор можно сделать оценив собственные возможности и особенности двух архитектур.

PWA предлагают пользователям более нативные возможности, такие как push-уведомления и поддержка автономной работы, и часто лучше для поисковой оптимизации (SEO), поскольку они индексируются поисковыми системами, как обычные веб-сайты. Однако для их создания может потребоваться больше ресурсов и опыта разработчиков, а их обслуживание и обновление может быть более дорогостоящим, поскольку они связаны с внутренним сервером.

SPA, с другой стороны, обеспечивают более плавный опыт работы с приложением для пользователей, поскольку не требуют обновления всей страницы для изменения контента. Одностраничные приложения, как правило, проще в разработке и могут быстрее загружаться на начальном этапе, но могут медленнее модернизироваться и сложнее индексироваться поисковыми системами.