Термины PWA и SPA встречаются все чаще, но разобраться в их значении не так просто. Мы решили собрать всю самую важную информацию об этих технологиях и рассказать об их пользе для вашего бизнеса.
Нельзя сказать, что какая-то технология лучше или главнее. Выбор технологии для сайта зависит от бюджета компании и навыков разработчика. Поэтому в конкретной статье мы рассмотрим недостатки и преимущества каждой, а решать, на чем остановиться, придется самостоятельно.
SPA переводится с английского как Single Page Application (одностраничное приложение). Для его загрузки необходима всего одна страница HTML. Перезагрузка в данном случае не требуется, так как приложение динамически обновляется благодаря AJAX. Код отрисовывается со стороны пользователя, приложение находится в самом браузере.
Шрифты и картинки не загружаются у вас на глазах. Все, что вы видите, – это экран загрузки.
Запуск приложения производится браузером.
При переходе на другие страницы или вкладки меняется только часть страницы, как в «Яндекс.Почте», в этом ключевое отличие от стандартных приложений. Пользователю не нужно будет ничего скачивать. Достаточно просто открыть свой браузер.
На загрузку страниц требуется меньше времени.
Главный плюс в том, что разработка одностраничных веб-приложений занимает меньше времени.
Во время запуска и работы существенно возрастает нагрузка на браузер. Поэтому другие приложения и программы могут работать некорректно.
Если отсутствует JS, некоторые функции могут работать неправильно или дать сбой.
Межсайтовый скриптинг позволяет получать доступ к коду. Благодаря этому появляется возможность добавления скриптов со стороны пользователя.
Пример сайта с использованием технологии SPA
Google относится к PWA
PWA или Progressive Web Apps (прогрессивное веб-приложение) функционирует иначе. Сайты с ними создают и запускают на движке JavaScript, реже – на HTML и CSS. По сути это приложение, которое отправляет пуш-уведомления. Его можно добавить на рабочий стол.
Простота разработки. Вам не нужно создавать новый отдельный сайт или приложение. Все, что нужно сделать, – это внести минимальные изменения в уже существующие проекты.
Приложение быстро устанавливается.
PWA работает с разными аппаратными платформами, операционными системами. Код адаптирован для разных платформ.
Приложение не требует серьезных аппаратных ресурсов. Оно будет работать без сбоев даже на самом простом устройстве.
Высокая скорость загрузки страниц.
Кэширование страниц. То есть загрузку можно выполнять в автономном режиме без подключения к сети.
Возможность работать полностью автономно с помощью аппаратных средств, не подключаясь к интернету.
Широкий функционал.
Сайт-приложение можно продавать и продвигать через Google Play, App Store.
Преимущества PWA-сайтов
Поскольку набор функций достаточно большой и разнообразный, не все браузеры способны их поддерживать и обеспечивать корректную работу.
Технология достаточно новая, поэтому не каждый разработчик с ней хорошо знаком. Основная проблема – это поиск высококвалифицированного специалиста.
Читайте также: Сколько стоит разработка мобильного приложения под ключ?
SPA-сайт разрабатывают по определенному алгоритму:
Проводят подготовительные работы, разрабатывая структуру сайта. В корне будут лежать index.php и .htaccess. Есть папка для стилей, библиотека (jquery.js). Папка pages отвечает за содержимое сайта. На каждую страницу приходится по одному файлу.
Готовят контент. На этом этапе важно определиться с набором страниц и их названиями, а потом выполнить разметку для контента.
Создают стили, общий код и конфигурации. Именно благодаря JavaScript-коду набор отдельных файлов превращается в одностраничный сайт.
Настраивают подгрузку контента. Привязывают все нужные события при помощи функции init.
Если говорить простыми словами, то для разработки таких приложений используют Framework. Разработчики не пишут код полностью. Они используют уже готовые решения и не тратят время на разработку аналогичных. Прогрессивный фреймворк Vue.js написан на языке JavaScript. С его помощью производится мониторинг и изменяются определенные участки программы. Есть и другие инструменты для внесения изменений – это, например, React и Angular.
Вот несколько примеров одностраничных динамических сайтов:
Sthmamd.org относится к SPA-сайтам
Динамический сайт с подгрузкой контента departures-international.com
Многие зарубежные ресурсы, такие как onepagelove.com, используют SPA
Разберемся, на чем базируется технология работы PWA:
Надежность. Обеспечивается быстрая загрузка вне зависимости от статуса и качества соединения с сетью.
Быстрота. UI отличается плавностью и отзывчивостью, что позволяет осуществлять взаимный обмен по сети с высокой скоростью.
Привлекательность. Сайты отличаются понятным интерфейсом, с которым приятно работать.
Создание веб-приложения PWA зависит от пожеланий разработчика. Например, большой популярностью пользуется технология ionic framework. С ее помощью можно разрабатывать полноценные приложения как для iOS, так для Android.
Приложения PWA имеют практически одинаковую архитектуру, поэтому одна версия создается под Android, а другая – для iOS. Это позволяет использовать продукт на планшетах и десктопных устройствах с одинаковым комфортом.
Поскольку за основу берется готовый шаблон, загрузить свой уникальный контент вы сможете в index.html. Вы легко сможете менять цвета, шрифты и тому подобное в файле CSS и других.
Для тестирования приложения и проверки корректной работы используют разные расширения, например Lighthouse. После проверки создается ярлык на рабочем столе. Далее прописывается манифест, в котором указывают имя, цветовую схему, информацию об иконке и т. п. Чтобы приложение работало в автономном режиме, важно добавить его в service worker.
Узнать о том, можно ли выпускать сайт, поможет простая проверка каждой страницы. Если в результате тестирования отсутствуют ошибки, прогрузка достаточно быстрая, а страница не зависает, вносить исправления не нужно.
Интерфейс ionic framework для создания приложения
Читайте также: Мобильные приложения для малого бизнеса: 9 главных вопросов
Примеры PWA-сайтов:
Страница сайта dev.to, относящегося к PWA
Facebook, классический пример PWA
В России также используется PWA (flipboard.com)
Первые сложности у сайтов СПА и ПВА возникают именно с индексацией. Это связано с тем, что боты «Яндекса» способны индексировать только HTML-страницы, но не JavaScript. Поэтому для полноценной индексации потребуются копии HTML-страниц.
Чтобы роботы узнали о наличии таких копий, важно прописать в url команду ?_escaped_fragment_=, а также использовать метатег meta name="fragment" content="!". Команды вносят в код динамических страниц. Например, чтобы адрес страницы http://world.com/home/ нормально проиндексировался роботом, он должен выглядеть следующим образом: http://world.com/home/?_escaped_fragment_=.
Второй вариант выполняют с использованием следующих символов: #!. Он подходит для адресов страниц, которые формируются с помощью символа решетки. В этом случае адрес страницы http://world.com/#url будет выглядеть как http://world.com/#!url.
Чтобы не менять каждый url вручную, используйте фреймворки с серверным рендерингом.
Оптимизация сайтов SPA в браузере Google Chrome выглядит проще. Благодаря клиентскому рендерингу не требуются копии HTML-страниц. Сначала бот при обходе для индексации анализирует каждую страницу. Потом определяется время, за которое будет произведен рендеринг. Аналогичная схема включается, когда скрипт сложен в обработке. Оптимальным считается вариант с созданием библиотек JS. Они упрощают индексацию и сокращают ее время. Благодаря полифиллам можно писать код, который будет работать на разных браузерах.
Полифилл – код, который реализует отсутствующий в некоторых браузерах функционал. Реализуется поддержка веб-стандарта HTML5.
При продвижении PWA и SPA откажитесь от использования окон iframe. Отдавайте предпочтение статическим url. Проводите оптимизацию скриптов, это поможет ускорить загрузку.
Читайте также: Скорость загрузки сайта: от чего она зависит и как ее увеличить
Любой новый скрипт нужно протестировать на наличие ошибок. Для этого можно использовать программу Netpeak Spider:
в настройках выбираем пункт «Основные»;
ставим галочку на «Включить рендеринг JavaScript и установить AJAX timeout, с»;
в появившуюся таблицу нужно вставить url, который вы собираетесь проверять на работоспособность;
осуществляем проверку;
после проверки url нажимаем «ПКМ по урлу»;
В появившемся меню кликаем по пункту «Исходный код и HTTP-заголовки»;
код открывается в новом окне.
Включаем рендеринг во вкладке «Основные»
Добавляем свой сайт для проведения теста
Рассматриваем код
Выполняя оптимизацию таких сайтов, обращайте внимание на ответ каждой страницы. Работающие будут выдавать код 200, а неработающие – 404. При возникновении ошибки проверить url можно в программе, о которой мы рассказывали выше.
При оптимизации PWA-сайтов индексация PWA-страниц веб-приложений в Google аналогична индексации SPA.
Процесс можно разделить на два этапа. На первом нужно изъять отображаемый контент на стороне пользователя. На втором происходит отрисовка JS. Она осуществляется только в тот момент, когда количество ресурсов будет достаточным для бота.
Для лучшей SEO-оптимизации:
Проводите оптимизацию для url каждой страницы. Помните: все они важны в одинаковой степени.
Адаптируйте сайт для мобильного телефона. Важно, чтобы дизайн, шрифты и прочая информация отображались корректно.
Уделите внимание защите протокола HTTPS. Это не позволит мошенникам самостоятельно изменять информацию на странице и наносить вред вашему ресурсу.
Сделайте упор на то, чтобы в дальнейшем расширять функционал и набор инструментов для своего сайта.
Используйте Sitemap (карту сайта) для облегчения работы поисковиков. Страница может быть как xml, так и html. В этом файле отображаются ссылки на все важные страницы вашего ресурса.
Основной упор в продвижении PWA и SPA всегда делают на то, чтобы робот поисковой системы мог корректно проиндексировать ваш ресурс. При проверке страниц на ошибки и работоспособность проводите тесты для разных поисковых систем. Так боты смогут произвести сканирование с добавлением своего индекса.
SPA- и PWA-приложения хорошо работают на мобильных устройствах
При выборе ориентируйтесь на свой бизнес. Например, технология PWA подойдет, если:
нужно создать многостраничный сайт или интернет-магазин с большим объемом информации;
для сайта нужно приложение, которое может отправлять push-сообщения и работает в офлайн-режиме.
SPA же подходит для создания небольшого одностраничного сайта. Так его смогут видеть браузеры, не поддерживающие JS.
Читайте также: Особенности проектирования высоконагруженных сервисов и порталов
PWA- и SPA-сайты сегодня достаточно популярны. Вам может подойти любой вариант.
Неважно, что вы выберете – динамический веб-сайт или прогрессивное веб-приложение PWA. Они достаточно быстро работают, просто разрабатываются, положительно влияют на опыт взаимодействия пользователя с вашим ресурсом.
Чтобы ваш браузер или поисковая система могли правильно обработать данные, важно позаботиться о некоторых моментах:
корректно настройте url-адреса;
создайте для каждой страницы HTML-копию, это поможет быстро восстановить данные при необходимости;
проверьте каждый код на ответ сервера;
все скрипты после изменения проверяйте на наличие ошибок и работоспособность.
Заказать создание SPA- и PWA-приложений на площадке Workspace можно при помощи объявления тендера или поиска специалистов из базы под ваши запросы. Для реализации digital-проекта необходимо будет заполнить договор на разработку сайта, который мы вам вышлем.
Подпишитесь на ежемесячную рассылку Workspace
Отлично! Мы отправили письмо на указанный вами электронный ящик с инструкцией по подтверждению.
Если письмо с подтвержением вашего e-mail не будет получено в течение 10 минут, пожалуйста, проверьте папку СПАМ в соответствующем почтовом ящике.
