Введение в Progressive Web Apps: какое значение они могут иметь для вашего сайта и SEO

Введение в Progressive Web Apps: какое значение они могут иметь для вашего сайта и SEO

Progressive Web Apps (прогрессивные веб-приложения). О да, те самые ребята, которые, если верить Google, являются гибридом Ганди и Дамблдора, пришедшими спасти этот мир от кошмара под названием Мучительно Медленный ВебсайтTM.

Но что в действительности представляют собой PWA? Нужно ли вам такое приложение? И, если вы его создадите, как обеспечить ему высокие позиции? Что ж, если вам это интересно, читайте дальше…

Что такое PWA?

Учитывая, что термин был введен компанией Google, пожалуй, мы воспользуемся их же определением: «Progressive Web Apps используют современные веб-возможности, чтобы обеспечить пользователю опыт взаимодействия, подобный тому, что мы привыкли видеть в приложениях».
– Progressive Web Apps

Что особенно заманчиво в PWA: они могут сделать разработку приложения менее необходимой. Ваш мобильный вебсайт становится вашим приложением. В разговоре с моими коллегами из Builtvisible это стало темой интересного обсуждения: нужны ли компаниям одновременно вебсайт и приложение или достаточно PWA?

Если быть точнее, это значит, что мы будем рассчитывать на наличие push-уведомлений и фоновой синхронизации (background sync), на возможность работы вебсайта/приложения в оффлайн-режиме, на определенный внешний вид/дизайн, который будет напоминать «родное приложение», и на возможность установки на главный экран устройства.

Все это в большинстве случаев было недоступно для вебсайтов. Но, благодаря новым браузерам, все в большей степени поддерживающим HTML5, и развитию JavaScript, мы можем начать использовать некоторые из отмеченных параметров. В целом, о Progressive Web Apps можно сказать, что они:

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

Адаптивны
Подходят для устройств любого формата: компьютер, мобильный телефон, планшет и что бы ни последовало за ними.

Независимы от связи
Усовершенствованы технологией Service Worker, позволяющей работать в оффлайн-режиме или при низкой скорости связи.

Схожи с приложениями
Напоминают пользователям приложения, благодаря соответствующим способам взаимодействия и навигации, так как построены с использованием App Shell Model (модели оболочки приложения).

Актуальны
Всегда показывают актуальную информацию, благодаря процессу обновлений, который обеспечивается Service Worker.

Безопасны
Отображаются через HTTPS, чтобы воспрепятствовать перехвату и фальсификации контента.

Поддаются обнаружению
Могут быть определены как «приложения», благодаря манифесту W3C и регистрации Service Worker, которые позволяют поисковым системам обнаруживать их.

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

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

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

Источник: Ваше первое Прогрессивное Веб-Приложение (Google)

Остановимся чуть подробнее на моменте, обозначенном выше как «схожи с приложениями». По большому счету, PWA включают в себя две составляющие: Service Workers (к которым мы вернемся через мгновение) и Application Shell Architecture (архитектура оболочки приложения). Google дает следующее определение:

...минимальное использование HTML, CSS и JavaScript для обеспечения работы пользовательского интерфейса. Оболочка приложения должна:

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

Оболочка приложения (Application Shell) является секретом надежной производительности. Представьте, что оболочка приложения – это пакет, который вы опубликовали бы в магазине приложений, если бы разрабатывали «родное» приложение. Это загрузка необходимая, чтобы сдвинуться с мертвой точки, но этим дело не исчерпывается. Интерфейс пользователя при этом остается локальным, а контент динамично загружается через API.
– Веб-приложения с архитектурой Application Shell, обеспечивающие моментальную загрузку

Этот метод загрузки контента делает возможной невероятно высокую скорость приема данных. Мы можем практически моментально отобразить перед глазами пользователя то, что выглядит, как наш сайт, но без контента. Затем страница загрузит контент – и все готово. Разумеется, если бы мы в действительности использовали в работе подобный принцип, мы столкнулись бы с проблемами, связанными с SEO-оптимизацией, но к этому вопросу мы также обратимся чуть позже.

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

Использование PWA

Позвольте для начала внести ясность: для большинства людей PWA не являются необходимыми. Это достаточно важное замечание, и оно достойно повторения:

Вероятнее всего, PWA не представляют для вас необходимости.

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

Тогда в каком случае вам следует обратить внимание на PWA? Что ж, давайте взглянем на перечень ситуаций, которые могут означать, что вам действительно может понадобиться такое веб-приложение…

Признаки того, что вам может пригодиться PWA

У вас есть:

  • Регулярно обновляющийся контент, такой как биржевые сводки, быстро меняющиеся цены, уровень запасов или другие постоянно изменяющиеся данные
  • Чат или коммуникационная платформа, требующие постоянных обновлений и push-уведомлений для новых элементов данных
  • Аудитория, склонная к просмотру данных в оффлайн-режиме после их загрузки (как, например, в случае с новостными приложениями или блогами, ежедневно размещающими множество статей)
  • Сайт с регулярно обновляемым контентом, который пользователи могут проверять несколько раз в день Пользователи, использующие преимущественно поддерживаемые браузеры

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

google pwa

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

Как они работают

Итак, вы могли бы извлечь для себя выгоду из подобного набора функциональных возможностей, но хотите знать, как это все работает. Познакомьтесь с чудом под названием Service Worker.

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

Если вы хотите получить более подробное объяснение принципа действия технологии Service Worker, просмотрите относительно техническое описание, предоставленное Джейком Арчибальдом из Google.

Что может делать Service Worker

Технология Service Worker по большому счету предназначена для предоставления дополнительных возможностей, которые ранее не были доступны для браузеров. Они включают в себя:

  • Push-уведомления, которые сообщают пользователям об определенных событиях (например, о получении нового сообщения или об очередном обновлении на странице, которую они в данный момент просматривают)
  • Фоновая синхронизация (background sync), предназначенная для обновления данных в то время, пока пользователь не использует страницу/сайт
  • Оффлайн-кэширование, благодаря которому пользователь может получить доступ к некоторым данным сайта в оффлайн-режиме
  • Операции с геолокацией или другой информацией, собираемой устройством (такой как данные встроенного гироскопа)
  • Предварительная загрузка данных, которые в скором времени понадобятся пользователю (сюда относятся, например, изображения, расположенные на странице ниже)

Планируется, что в будущем они смогут выполнять еще больше задач, чем сейчас. Но пока вы можете извлечь пользу именно из этих функций. Разумеется, когда приложение уже загружено, они грузят данные преимущественно при помощи AJAX.

Последствия для SEO

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

Существует несколько проблем, с которыми вы можете столкнуться, если планируете построить сайт с использованием архитектуры Application Shell. Во-первых, вам фактически придется использовать тот или иной JS-фреймворк или библиотеку, такую как Angular или React. В этом случае вам не помешает изучить некоторые SEO-советы, касающиеся Angular.JS или React. Если вы используете что-то другое, вам будет необходимо предварительно визуализировать страницы на сервере, а затем считывать их через приложение, когда они загрузятся. Это позволит вам использовать все самое лучшее, что есть в этих инструментах, при этом предоставляя данные, которые будут распознаваться Google и другими поисковиками. Несмотря на недавнее утверждение Google, что они совершенствуют визуализацию приложений подобного типа, на практике мы все еще встречаем множество примеров сбоя при сборе «тяжелых» JS-данных.

Предположим, что вы присоединились к миру продвинутых «фронтендовых» JS-технологий, тогда для действия по принципу PWA вам будет нужно использовать CSS и JS, необходимые для работы страницы, наряду с HTML. То есть не просто включать теги <script> с атрибутом <code>src, а встраивать весь файл.

Разумеется, это значит, что вы увеличите размер отправляемой страницы, но, с другой стороны, страница будет загружаться моментально. Более того, при моментальном предоставлении всех JS (необходимых для считывания) и CSS (необходимых для придания смысла дизайну), браузер сможет визуализировать ваш контент и обеспечить его корректное отображение и быструю работу.

Опять-таки, если мы будем использовать Service Worker для кэширования контента, как только тот будет получен, это не должно иметь слишком серьезных отрицательных последствий. Мы можем также отдельно кэшировать все необходимые внешние файлы CSS и JS и выдавать их из кэш-памяти вместо того, чтобы загружать их каждый раз по новой. Это немного повышает вероятность того, что PWA даст сбой при первом запросе вашего сайта пользователем, но вы сможете с достоинством выйти из положения, выдав сообщение об ошибке или страницу по умолчанию и повторить попытку со следующей страницей.

Есть и другие потенциальные проблемы, с которыми можно будет столкнуться. Например, Washington Post создали PWA-версию своего сайта, но он работает только на мобильных устройствах. Разумеется, это значит, что сайт может быть эффективно просканирован роботами Google на мобильном устройстве, но не на компьютере. Важно помнить про первую букву аббревиатуры PWA – вебсайт должен обеспечивать доступность функций, которыми посетитель имеет возможность воспользоваться, но при этом также работать и в нормальном режиме для тех, кто использует браузеры, не поддерживающие данные параметры. Суть состоит в том, чтобы совершенствовать функциональность прогрессивно, а не требовать от людей обновления их браузера.

Небольшой нюанс во всем этом заключается в том, что для наилучшего результата необходимо создавать приложение по принципу «offline-first» («оффлайн в первую очередь»). То, как это делается, упоминается Джейком в видео, уже отмеченном здесь ранее. Единственная проблема при выборе данного курса действий: вы подаете контент после того, как кто-то зашел на ваш сайт и прождал достаточно времени, пока все загрузится. Разумеется, в случае с Google ничего хорошего из этого не выйдет. Поэтому вот, что я предлагаю…

Вместо того, чтобы просто отправлять оболочку своего приложения (Application Shell), затем использовать AJAX для запроса загрузки контента, после чего считывать его, используйте следующую схему работы:

  • Пользователь заходит на сайт
  • Сайт отправляет оболочку приложения (минимум HTML, JS и CSS, чтобы все работало без промедлений), одновременно с...
  • ...ответными данными AJAX, загруженными предварительно – как состояние приложения Приложение загружает эти данные автоматически, а затем считывает интерфейс.

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

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

Это значит, что мы сможем предоставлять контент, который Google и др. смогут индексировать без возможных последствий в результате сбоев в AJAX-запросах. С точки зрения Google и пользователей, мы просто предоставляем высокопроизводительную исходную загрузку, затем прибегаем к использованию Service Worker для быстрой загрузки каждой последующей страницы и, возможно, для обеспечения дополнительной функциональности. В случае с погодным приложением для этого может требоваться ежедневная предварительная загрузка погоды на завтрашний день (скажем, в полночь) или, к примеру, оповещение пользователя об ожидающихся осадках.

Узнать больше

Если вы хотите получить больше информации, я рекомендую вам прочесть данное руководство по PWA от Эдди Османи (инженера Google Chrome) и затем создать элементарный рабочий образец, наподобие примера с поездами, упомянутого Джейком в его презентации на YouTube, на которую мы уже ссылались выше. Если вам это интересно, рекомендую обратиться к обучающему курсу Джейка на Udacity. Курс посвящен созданию PWA и доступен по данной ссылке.

Перевод поста из блога moz.com от 15.10.2016


Отзывы о нашей работе

Интернет Проекты
Пенза ул. Гагарина, 16, оф. 215, г. Пенза, 440000 8 800 301-58-77
Сотрудничество на долгосрочной основе
С 2009 года сотрудничаем с «Интернет Проектами» и за это время разработали 4 сайта по различным направлениям. Каждый раз получали то, что хотели.
Рылина Екатерина Андреевна
Главный редактор журнала SD
Два туристических объекта в одном сайте
На нашем сайте решена задача по объединению информации о двух туристических объектах: гостинице «Ласточка» и турбазе «Чистые пруды».
Кояков Сергей Васильевич
Исполнительный директор ООО «Пензатурист»
Оживление Вашего бизнеса
Если вы хотите внести оживление в ваш бизнес - рекомендую студию "Интернет Проекты" как высокого профессионала в своем деле!
Самофалова Татьяна
Партнер, технический директор тренингового центра "Чаровница"
Все наши идеи были воплощены в реальность
Мы получили сайт, который максимально подробно и понятно характеризует нашу продукцию и привлекает к сотрудничеству промышленные компании.
Никонов Сергей Александрович
Коммерческий директор ТК «Евроснаб»
Быстро, корректно, качественно
Нам делали сайт для промышленной компании. Все очень быстро (стояла задача успеть к выставке), корректно, качественно.
Птицын Вячеслав  Александрович
Директор ООО «Гравотэк»
Взаимовыгодное сотрудничество
Для новостного портала главное - это оперативность. Благодарен ребятам за своевременное решение проблем с сайтом.
Черный Сергей Алексеевич
Редактор Интернет-портала ИЦ "Пензенская правда"
У Вас остались вопросы?
Задайте их
нашим
специалистам
Вам ответят в течение
1 рабочего дня