что такое pwa приложение
Основы прогрессивных веб-приложений
Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.
То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это — далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?
Автор материала, который мы сегодня публикуем, расскажет о таких вот приложениях, о том, зачем они нужны, и о том, как их создавать.
Вероятно, вы уже поняли, что мы только что говорили о так называемых прогрессивных веб-приложениях (Progressive Web App, PWA). Такое приложение можно установить прямо из окна браузера, значок для его запуска будет выглядеть как значок обычного мобильного приложения, и оно, как многие мобильные приложения, позволит вам работать с ним без подключения к интернету.
Кнопка «Добавить на главный экран»
Поговорим теперь о том, что такое «прогрессивность» в применении к веб-приложениям. Предлагаю познакомиться с ними поближе, выяснить, чем они отличаются от обычных веб-приложений, и, кроме того, хочу рассказать вам о том, почему я полагаю, что PWA лучше традиционных мобильных приложений.
Что такое прогрессивное веб-приложение?
Термин «Progressive Web App» придумали Алекс Рассел и Франсес Берриман. По словам Алекса, прогрессивные веб-приложения — это всего лишь веб-сайты, которые принимали правильные витамины. То, что лежит в основе PWA, нельзя назвать новым фреймворком или новой технологией. Это, фактически, набор передовых методов разработки, которые позволяют сделать так, чтобы поведение веб-приложения оказалось бы очень похожим на поведение классических настольных или мобильных приложений.
Значок PWA на главном экране
PWA дают пользователю новые удобные возможности посредством прогрессивных улучшений приложений. В целом, это означает, что PWA, на мобильных устройствах разных поколений, будут работать примерно одинаково. Конечно, некоторые возможности обычных телефонных приложений могут быть им недоступны, но такие приложения обычно работают на разных устройствах так, как они и должны на них работать.
Зачем нужны прогрессивные веб-приложения?
Прежде чем разобраться с тем, зачем вообще нужны PWA, поговорим о том, с какими проблемами мы сталкиваемся, проектируя веб-приложения и обычные мобильные приложения.
Есть множество причин использовать PWA, здесь хотелось бы выделить основные возможности, которые они дают. Если описать эти возможности одним словом, то тут подойдёт аббревиатура FIRE (Fast, Integrated, Reliable, Engaging), то есть, прогрессивное веб-приложение должно быть быстрым, интегрированным в рабочую среду устройства, надёжным, и иметь средства вовлечения пользователей в работу с ним.
Как создать прогрессивное веб-приложение?
Компания Google опубликовала контрольный список по разработке прогрессивных веб-приложений. Рассмотрим минимальные требования к приложению, соответствие которым позволяет называть его PWA.
▍1. Манифест приложения
Манифест PWA — это файл manifest.json примерно такого содержания:
Перед нами — обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный инструмент, автоматизирующий создание таких файлов.
Сайт, облегчающий создание файла manifest.json
▍2. Сервис-воркеры
Сервис-воркеры — это воркеры, управляемые событиями, которые выполняются в фоне приложения и действуют в роли посредников между приложением и сетевыми ресурсами. Они могут перехватывать сетевые запросы и кэшировать информацию для приложения. Их можно использовать для загрузки данных, которые планируется использовать для обеспечения работы приложения в оффлайновом режиме. Сервис-воркеры представляют собой JavaScript-программы, которые перехватывают обработку определённых событий и выполняют некие задачи.
▍3. Значки
▍4. Безопасность
Для того чтобы некое приложение можно было бы называть PWA, оно, кроме прочего, должно поддерживать обмен данными по защищённому каналу связи с использованием HTTPS. SSL-сертификат для организации такого соединения несложно получить, воспользовавшись возможностями сервисов вроде Cloudflare и LetsEncrypt. Защита приложений — это не только то, что в наши дни прямо-таки обязательно, это ещё и способ продемонстрировать пользователю надёжность приложения и выстроить с ним доверительные отношения.
Итоги
В этом материале мы поговорили о прогрессивных веб-приложениях, рассказали о том, зачем они нужны, какие проблемы они решают, какие требования к ним предъявляются. Так же здесь мы затронули тему их разработки, в частности, поговорили о манифесте PWA, о сервис-воркерах, о значках приложений, и о том, что их нужно защищать, используя HTTPS. Технологию PWA нередко воспринимают как нечто, относящееся исключительно к Android-смартфонам, и до недавнего времени такая точка зрения вполне имела право на жизнь. Однако, учитывая события, произошедшие в этом году, можно говорить о том, что PWA ждёт очень интересное будущее на множестве платформ. Тема PWA, на самом деле, всем этим далеко не исчерпывается. Поэтому, вполне возможно, мы к ней ещё вернёмся.
Уважаемые читатели! Как вы относитесь к прогрессивным веб-приложениям?
Для тех, кто не понял с первого раза
Я не буду подробно разжевывать тебе о PWA, так как на эту тему написано уже много статей.
Моя цель — простым языком дать основную информацию, которой тебе хватит, чтобы понимать что такое PWA. Потом показать реальный пример, которым забетонируем всё, что ты усвоил.
После прочтения ты будешь понимать следующее:
А ну и еще, я настоятельно рекомендую взять сейчас ноутбук и повторять всё, что я буду делать. Иначе, информация вылетит из головы.
На этом вводная часть закончена, переходим к основной части.
Не просто верстка. Что нужно знать, чтобы верстать ХОРОШО?
Как и почему хорошая верстка напрямую влияет на качество продукта. Лучшие практики, чтобы повысить качество верстки.
Возможности и преимущества
Я подготовил несколько логически связанных пунктов, которыми попробую описать всю картину.
Технология PWA была анонсирована компанией Google в 2015 году. Она позиционирует себя как дополнительная надстройка, которая позволяет сделать из сайта подобие мобильного приложения.
При этом внутренности никакие не меняются, не трансформируются, сайт остаётся тем же, трансформируется только браузер.
Какие возможности предоставялет PWA?
Пару слов о преимуществах
Хотите разработать мобильное приложение? Уверены?
Преимущества и недостатки PWA для бизнеса в сравнении с мобльным приложением.
Не приятные моменты
Думаю, этого вполне достаточно, чтобы уже представить что такое PWA. Ну а если мало, можно почитать тут
Вот список сайтов, которые используют PWA — https://pwa.rocks
Основные понятия
Service Worker — Это по сути файл со скриптами, который отвечает за всю эту магию. Все запросы браузера идут через него, что даёт кучу возможностей, например, если отсутствует соединение с интернетом возвращает контент из кэша(если он конечно там есть).
В нем мы обрабатываем различные события, запись, удаление файлов из кэша и многое другое.
Скрипты работают в фоновом режиме, параллельно с приложением.
Manifest.json — Файл настроек. Там мы указывает какие иконки использовать, какой текст отображать в ярлыке, в каком формате открывать окно браузера и тд. Более подробно поговорим о нём чуть ниже.
Application Shell — Так называют оболочку для PWA. А если конкретнее, это браузер, который слегка трансформируется, чтобы дать больше возможностей разработчику.
HTTPS — Одно из главных требования PWA — передача данных по https протоколу, что более безопасно.
При разработке можно использовать localhost.
Push Notifications — технология для отправки push-уведомлений.
Настройка PWA
А настроить её на самом деле очень просто, и чтобы это доказать, давай сразу перейдем к написанию кода, так будет проще. Погнали!
Вот ссылка на уже готовый код https://github.com/denisoed/PWA-example, от туда можешь скачать картинки, которые потребуются дальше, ну и за одно ознакомишься с тем, что получилось.
Итак, начнем с создания папки для проекта, назовем её PWA. Далее в эту папку добавим index.html, в котором будет вот такой код
Верстку я уже подготовил, но пока без стилей это выглядит плохо, поэтому добавим и их. Создаём папку css, в которую добавляем файл styles.css и вставляем в него код ниже
Конечно же, подключаем этот файл в index.html, в тэг …
Давай сразу подключим нужные картинки, которые можно скачать тут. Перейдешь по ссылке, там будет кнопка Clone or download, зеленая такая, жмешь её, потом кликаешь Download ZIP. Скачается архив, в нем и будут картинки в папке images. Фух, думаю довольно доступно объяснил
Открываешь проект, создаешь там директорию images, куда вставляешь все картинки. Далее открываешь index.html и вставляешь в тэг … мета информацию. Что это и зачем, можешь почитать тут.
В итоге, в файле index.html должна быть вот такая структура
Теперь остаётся запустить и посмотреть, что получилось. Я тут нашел очень удобный экстеншн Web Server for Chrome, который запускает локальный сервер, его нужно установить, он нам понадобится далее. Там ничего сложно, просто укажи папку с проектом, где лежит index.html, он сам всё сделает. Копируешь ссылку и вставляешь в браузер.
И вот что у нас получилось. Я бы не сказал, что это шЭдЭвр, но как по мне нормально!
После того, как пройдет процесс валидации, мы увидим следующую картину: пункт отвечающий за PWA будет серым. Это говорит о том, что у нас отсутствуют настройки.
И если проскроллить ниже, можно увидеть рекомендации, которые нужно выполнить, чтобы PWA работало как часы.
Вкладка Lighthouse поможет тебе отслеживать все ошибки при настройки PWA.
Ну вот, наконец-то мы дошли до самого интересного.
Для начала нужно создать файл manifest.json в корне проекта. В него мы добавляем следующие метаданные:
Этого пока достаточно. Вот тут есть описание всех свойств этого файла, как будет время, почитай обязательно.
PWA — это просто
Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.
Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.
Философия PWA
Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться и «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника; и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому что где-то внутри него бьется горячее сердце работника сферы услуг (service worker’a).
Относительность PWA заложена в самом названии — «прогрессивное». Прогрессивный сравнительно с чем и в какой мере? Но эта относительность, на самом деле, очень хороша, потому что изучать технологии PWA и применять их в своих текущих проектах можно постепенно, без глобального ремоделинга и рефакторинга.
С другой стороны, идея у PWA есть, и идея достаточно четкая и мощная. И то, как неспешно она разворачивается, вполне может свидетельствовать о масштабности последствий.
Архитектура PWA
PWA — это веб приложение, созданное с использованием определенных технологий для достижения заданных целевых показателей.
Целевые показатели расшифровываются следующим образом:
Надежность (Reliable) — приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
Быстрота (Fast) — взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
Привлекательность (Engaging) — делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…
С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.
Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», работать оффлайн при необходимости). Насколько далеко продвинется по этому пути разработчик зависит только от него.
PWA и нативные приложения
То, что PWA внешне похожи на нативные приложения, является, скорей, косметическим решением (хотя и важным для пользователя с психологической точки зрения). А вот то, что они похожи внутренне (все основные ресурсы приложения можно хранить на клиенте, по сети будет передаваться только меняющийся контент) — это огромное достижение.
Можно даже назвать это скрытой революцией. По сути, браузер используется как некая виртуальная машина, хранящая и запускающая в себе PWA приложение. Как Андроид является виртуальной машиной для андроид-приложений, так и браузер становится виртуальной машиной для PWA. Как нативное приложение обращается через файловую систему к своим ресурсам, так же и PWA обращается к своим ресурсам — пусть по HTTP, но хранящимся локально.
И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.
Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:
— Не нужно писать различные версии для Android и iOS (и Windows)
— Не нужно регистрировать в Google Play и App Store и платить за это
— Открыт прямой выход на десктоп
До нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской.
Сейчас эти барьеры сломлены. И сломала их Google. Учитывая то, что именно она является флагманом интернет-технологий, подобный заход на территорию iOS, скорей всего, вполне продуман и просчитан. Остается ждать бума PWA.
Различия PWA с нативными приложениями, конечно, есть — в основном, в правах доступа к ресурсам системы, но работа в этом направлении идет даже в поле чистого HTML5, а для PWA дополнительные привилегии проблемой не будут.
Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.
Технологии
Кратко рассмотрим основные движители PWA.
Service Worker
Сердце PWA — Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него. Данное разделение на два независимых слоя позволило сделать переход обычного веб сайта в PWA максимально простым.
Из хранилищ у Service Worker’a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Но, самое главное, полная свобода для реализации бизнес логики.
Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер — который будет думать, что ответ ему пришел от сервера. Или не будет — как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.
В тоже время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker’a, чтобы превратиться в PWA.
PWA не зависит ни от каких-то фреймворков, это чистый javascript, хотя даже специалисты Google на Хабре зачем-то советуют использовать библиотечные генераторы кода. Service Worker прекрасно пишется руками, и это нужно, чтобы хорошо понимать и контролировать логику работы твоего приложения.
С программистской точки зрения Service Worker представляет собой javascript файл, подключаемый в html коде страницы. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.
HTTPS
PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. SSL сертификат можно получить бесплатно, некоторые хостеры это делают за вас. Но критично, чтобы на сайте не было ссылок на незащищенные ресурсы — некоторые браузеры просто не будут отображать сайт в этом случае.
Основная встречаемая в таких случаях проблема — картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.
Application Shell
App shell — это просто скелет графического интерфейса, шаблон. Для примера, возьмем средний сайт c хидером, двумя колонками и прочим. Грубо говоря, вырежем из него контент текущей страницы и всю динамическую информацию, оставшаяся статика — app shell.
Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)
Данную архитектуру сайта — загрузку контента и иной динамичной информации через ajax вызовы — можно продумать и реализовать на сайте заранее, тогда переход в PWA будет совсем несложным.
App shell — это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу, и многое станет проще.
Web App manifest
JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.
Push Notifications
Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов пользуют PWA технологии. А 90% тех, что пользуют, делают это только ради Push Notifications.
Пока что это самая популярная и самая злоупотребляемая технология PWA — за последние несколько месяцев число сайтов, заходя на которые первым делом ищешь «мышкой» кнопку «Блокировать» на предложение получать самые свежие новости, выросло, такое ощущение, многократно, а само желание навязать свой Push похоже на Spam.
А ведь можно же предлагать подписку на второй или третий заход пользователя на сайт, когда уже понятно, что он тут не случайно.
Push notifications must be timely, precise and relevant
Enable push notifications from the site and ensure the use cases they’re using the push notifications for are:
Timely — A timely notification is one that appears when users want it and when it matters to them.
Precise — A precise notification is one that has specific information that can be acted on immediately.
Relevant — A relevant message is one about people or subjects that the user cares about.
See our guide on creating great push notifications for advice. If your content is not timely and relevant to this user, consider using email instead.
PWA: очередная фишка Google или спасение для SEOшников?
Progressive Web Applications или PWA — что это? По сути, это нечто среднее между веб-приложением и сайтом. За счет использования таких технических “фишек”, как Service Worker, Push notifications, App Shell, Web App Manifest, HTTPS и т.д.), такие решения обеспечивают мгновенный переход от сайта к “приложению” без самого приложения, обеспечивая высочайший уровень безопасности, производительности и юзабилити.
Вот три основных концепта, на которых базируются PWA:
Ниже мы расскажем о преимуществах PWA именно в контексте поисковой оптимизации.
Эксперты Google выделяют следующие преимущества PWA для поисковой оптимизации.
Одной из главных целей создания PWA было ускорение индексации страниц. Косвенно это означает повышение характеристик использования PWA для мобильных посетителей. В то же время у веб-мастеров отпадает потребность в использовании глубоких ссылок, что также положительно влияет на поисковую оптимизацию.
PWA демонстрируют стабильно высокую производительность в сравнении с обычными веб-сайтами. В частности, этому способствует использование Service Workers, которые выполняют запрос только необработанных данных. Высокая производительность решения напрямую влияет и на повышение конверсии, а значит, сайт начинает занимать более высокие позиции в поисковой выдаче.
Для еще большей конверсии PWA позволяют использовать push-уведомления, которые оповещают пользователей о текущих акциях, скидках и специальных предложениях, пока приложение работает в фоновом режиме.
И, наконец, еще одно преимущество с точки зрения SEO – сокращение общего количества шагов, необходимых для совершения целевого действия, а именно – загрузки и установки приложения на пользовательское устройство. Так, у пользователей нет никакой необходимости загружать софт из Google Play или App Store и утомительно ждать завершения установки.
А теперь давайте вкратце разберемся в том, чем PWA отличаются от нативного софта.
Для создания нативного приложения разработчики используют стандартные для платформ инструменты: Java или Kotlin вместе с Android Studio (для платформы Android), Swift или Objective-C в паре с XCode (для платформы iOS). Если же говорить о PWA, они основаны на JavaScript, а значит, что у потенциального владельца есть куда больше шансов найти подходящих разработчиков.
Кэширование в случае с нативным софтом может быть реализовано не всегда удачно. Что же касается кэширования PWA, современные веб-браузеры позволяют создавать веб-страницы с возможностью частичной работы и в автономном режиме.
Кроме того, Progressive Web App загружает контент преждевременно, перед тем, как пользователь его увидит. Это обеспечивает возможность использования PWA при отсутствии интернет-соединения.
Что касается рендеринга на стороне сервера, в случае с PWA его можно реализовать через JS-based Vue.js, отрисовывая DOM непосредственно в браузере. Можно сделать и наоборот, отрисовывая HTML код на сервере.
Как бы там ни было, а SSR обеспечивает практически мгновенную визуализацию веб контента, положительно влияя на SEO и гарантируя высокую отзывчивость даже при низкоскоростном интернет соединении.
Обычно одной из главных причин создания нативного софта являлась его высокая производительность. Тем не менее, с появлением PWA, которые адаптированы для многопользовательского доступа, необходимость в создании родных приложений стала куда ниже.
Продвижение приложений через App Store and Google Play – достаточно муторное мероприятие: кроме того, что приложение должно соответствовать непростым политикам этих площадок, так еще и использование ключевых слов здесь мало чем помогает. В случае же с продвижением PWA, их Google любит: этот поисковик “заточен” под то, чтобы продвигать подобный софт.
Пользовательский опыт мобильных приложений далеко не всегда оказывается передовым. Другое дело – PWA, в которых сама концепция предполагает использование технологий для обеспечения идеального UX (например, через Push Notifications, immersive full screen experience, etc.). Нет никаких проблем здесь и со скачиванием, что немаловажно для устройств с ограниченными ресурсами памяти.
Progressive Web Application по умолчанию использует HTTPS для соответствия требованиям Google. Что же касается нативных приложений, здесь безопасность может оказаться под вопросом, так как со стандартами в этом случае куда сложнее.
В этом вопросе PWA тоже превосходят нативные решения, прежде всего, за счет кэширования при участии Service Worker. То есть, некоторые манипуляции, ранее требующие подключения софта к серверу, могут выполняться теперь только на стороне клиента.
Фактически, за счет этого обеспечивается максимальная скорость загрузки статического контента, а значит, создаются оптимальные условия для посещения страниц через устройства с ограниченной производительностью. Понятие AMP существует с 24 февраля 2016 года.
Как AMP, так и PWA направлены на оптимизацию мобильного опыта и могут быть использованы совместно друг с другом. Они способны ускорить время загрузки страницы и уменьшить период ожидания.
С технической точки зрения, AMP включает в себя CSS и стандартизованный JavaScript код, а PWA основаны на решениях наподобие Service Worker, Web App Manifest, App Shell и т. д. За счет этого первые более адаптированы для презентации статического контента, а вторые – для решений eCommerce (без емкостной графики и без большого количества JS компонентов).
В общем, если вы заинтересованы в разработке интернет-магазина или любого сайта с динамическим контентом, вам, вероятно, стоит обратить внимание на технологии PWA, что максимально приблизит его к полноценному мобильному софту. AMP также может использоваться для сайтов eCommerce, однако разработчикам придется столкнуться с некоторыми ограничениями, которые могут усложнить процесс разработки.
PWA можно по праву считать чем-то средним между мобильными приложениями и сайтами. Вот главные преимущества PWA:
Отметим, что у PWA есть и ряд нюансов, которые накладывают некоторые ограничения на их владельцев:
Вообще говоря, Web Vitals были призваны определять степень удовлетворенности посетителей веб сайта, ориентируясь на такие показатели, как:
Формально они выражаются в индикаторах LCP (Largest Contentful Paint), FID (First Input Delay) и CLS (Cumulative Layout Shift).
На картинке вы можете ознакомиться с пороговыми значениями Google для вышеперечисленных показателей:
Представители Google считают, что в будущем оптимизация значений этих метрик поможет поддерживать на стабильно высоком уровне качество контента, представленного в веб-формате.
И да, в поддержании всех этих трех показателей на должном уровне могут помочь PWA. Именно за счет PWA вы стабильно оптимизируете скорость загрузки, максимизируете отзывчивость и улучшите стабильность шаблона веб-страницы.
Более того, в скором времени ожидается, что Google выставит к разработчикам PWA метрики Core Web Vitals в виде списка требований. Поэтому, чем быстрее вы перенесете ваш сайт в такой новый формат, тем будет лучше для его дальнейшей SEO. Более полную информацию о внедрении PWA от тех, кто непосредственно работает с этим ПО в сфере SEO, можно будет услышать на ближайшей практической онлайн-конференции NaZapad, которая состоится 23 апреля. Ниже мы кратко рассмотрим основные принципы их внедрения.
Кстати, технологии PWA уже активно используют такие сайты, как Starbucks, Uber, Google Developers, Pinterest, AliExpress, Konga, Twitter, Forbes, The Financial Times, 5miles, The Washington Post и пр. Многие из них, такие, как, например, AliExpress и 5miles, уже официально подтвердили повышение показателей конверсии.
Чтобы подготовить ваш вебсайт к переходу в PWA концепт, вам следует выполнить следующие действия: