Что такое SPA и PWA приложения

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

Чтобы понять, что такое SPA и PWA приложения, пожалуйста, прочитайте эту статью полностью.

Что такое SPA-приложение

SPA – (на англ) single page application. Что значит “одностраничное приложение”. Обычно данный термин применяют к веб-сайту роль которого больше функциональная, нежели информационная. SPA это больше приложение, нежели сайт.

Инсайд: самый обычный сайт тоже может быть SPA-приложением. Но пока выбросьте это из головы чтобы не запутаться. К этой мысли мы придем вместе через статью.

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

SPA приложение несет в себе куда большую функциональную нагрузку. Весь функционал прямо зависит от задумки владельца и программистов. Яркий пример SPA – это сайт гос.услуг (gosuslugi.ru) и Яндекс Почта образца 2017-2018 года.

SPA и обычный сайт: отличия (с примерами SPA)

Страницы SPA-приложения не загружаются привычным способом, как, например, этот блог. Если сейчас Вы перейдете на другую страницу, браузер открывает ее перерендарив все содержимое (другими словами пересобирает).

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

SPA работает по другому. Когда Вы впервые попадаете на сайт SPA, то происходит старая добрая загрузка. Дальше – ее как будто больше и нет. Перемещаясь по вкладкам сайта, у Вас меняется только часть содержимого страницы. Вот Яндекс Почта будет сейчас отличным примером в данном случае. Т.е SPA это веб-приложение (как компьютерная или мобильная программа), только работает оно внутри браузера и разрабатывается такими же инструментами как и обычные сайты.

SPA приложение запускается вашим браузером, как программа операционной системой. А обычный сайт запускается сервером и отдается браузеру.

Как разрабатывается SPA-приложение

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

SPA-приложения разрабатывают с помощью “реактивных” фреймворков (читать как инструмент). Термин “реактивный” пошло из программирования, когда программа сама “мониторит” ее внутренние данные и при их изменении сама изменяет определенные участки программы.

Самый доступный пример это банковские графики в Сбербанк Онлайн. При изменении баланса счета график сам “перезагружается” показывая обновленные и актуальные данные.

Такие вещи реализуются с помощью языка программирования JavaScript, а конкретно силами его лучших инструментов (фреймворков): Vue.js, React, Angular.

Что такое PWA-приложение

PWA – (на англ.) progressive web application. Что значит – прогрессивное приложение. Ну и раз мы так много рассказали про SPA, здесь можно подвести итог совсем кратко: PWA это следующая ступень развития SPA. Т.е еще более крутая и функциональная.

PWA и SPA: отличия (с примерами PWA)

PWA умеет все то, что умеет SPA, и еще в придачу пару новых функций: PWA-приложение можно установить иконкой в телефоне и запускать с рабочего стола как приложение. Оно даже будет выглядеть как приложение, и его можно продвигать в Google Play и Apple Store! PWA умеет отправлять push уведомления (в браузер и на телефон). И самая крутая функция PWA – это возможность работать в приложении без подключению к интернету. Грубо говоря у Вас не сайт, а почти что кроссплатформенное мобильное приложение!

Самые популярные примеры PWA приложений, которые приходят нам в голову: Google Documents, Google Почта, и Яндекс Почта образца 2020 года. Да, без интернет соединения все равно здесь мало что сделаешь, но написать письмо, сделать заказ, написать текст и потом все это сохранить после появления интернета не составить труда. Так еще можно и по страницам перемещаться и заполненные текстом поля не пропадут.

Вывод

SPA-приложением может называться любой сайт, который работает без “перезагрузки” страниц (как мобильное приложение). PWA – это уже более сложный сайт, который может работать без интернета, послать push уведомления и вообще составляет прямую конкуренцию простым мобильным приложениям.