Где можно получить прогрессивные веб-приложения. Progressive Web Apps делают будущее ближе, а Интернет лучше

Возможно, вы о них еще не слышали, но прогрессивные веб-приложения (PWA) изменят расположение сил во всей мобильной индустрии. Заявленные в 2015 году компанией Google прогрессивные мобильные приложения уже сейчас становятся популярным трендом. Итак, что это за новый инструмент?

Что же такое прогрессивные мобильные приложения?

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

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

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

Как и в обычном приложении, пользователи могут сохранить PWA на свой Главный (Домашний) экран, чтобы в любой момент быстро открыть приложение. PWA не нужно устанавливать, достаточно просто открыть его по ссылке, что исключает утомительные хлопоты со скачиванием его из магазина приложений.

PWA vs. Нативные мобильные приложения

Хотя нативные приложения на самом деле имеют высокое качество и, соответственно, прекрасные пользовательские отзывы, они создают определенные сложности как для пользователей, так и для разработчиков.

Одним из самых больших различий между PWA и нативным приложением является наличие посредника в виде магазинов приложений App Store и Google Play. В случае с прогрессивными веб-приложениями это звено полностью исключено.

Что касается разработчиков, отсутствие магазинов приложений означает, что им больше не нужно загонять себя и приложение в рамки, установленные правилами и политикой iOS и Android. Здесь не будет никакого процесса одобрения — приложение готово к использованию сразу после его создания. Также нет необходимости и в обновлении приложения вручную, поскольку обновленная версия автоматически и моментально становится доступной для всех.

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

На рисунке внизу вы видите, что каждый шаг в процессе установки нативного приложения приводит к потере 20% пользователей . Это утомительно и нудно искать приложение в магазине, ждать, пока оно загрузится, да еще и переживать, что оно займет много свободного места в памяти, прежде чем приступить к работе с этим приложением. И поскольку в случае с PWA количество требуемых шагов радикально уменьшено (по сути, это процесс в один шаг), шансов, что приложение действительно будет использоваться, намного больше. В действительности мы используем в 4 раза больше сайтов, чем мобильных приложений , а следовательно, база потенциальных пользователей приложений на основе ВЕБ намного, намного больше.

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

Наконец, PWA очень легко найти. То есть такие приложения легко идентифицируются поисковыми системами, позволяя им находить поисковые запросы точно так же, как и любой другой веб-контент. PWA будет обрабатываться с помощью традиционной SEO, поэтому оно индексируется не просто как имя приложения, но и как контент в приложении. Оно не будет рассматриваться как конкретно приложение, но как часть контента, которая может «ответить» на чей-то «вопрос».

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

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

PWA vs. Мобильный веб-сайт

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

В отличие от «старых» мобильных сайтов PWA работают быстрее. Обращаем ваше внимание, что 53% пользователей покинут сайт , если его загрузка займет более 3 секунд. PWA загружаются мгновенно, независимо от состояния сети, и имеют быстро реагирующие интерфейсы. Это исключает их зависимость от сети, как это бывает у мобильных сайтов, обеспечивая мгновенную и надежную эксплуатацию. Также PWA обновляется в фоновом режиме, поэтому пользователям не нужно ждать загрузки нового контента.

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

Кто уже видит успех?

Для увеличения трафика и повторного привлечения клиентов косметическая компания Lancôme запустила прогрессивное веб-приложение для быстрого и удобного использования.

В 2016 году специалисты Lancôme впервые оценили, что мобильный трафик превышает трафик стационарного интернета. Несмотря на растущее число посетителей мобильных сайтов, коэффициент мобильной конверсии не совпадал с коэффициентом для обычного интернета. 38% заказов в корзине рабочего стола дошли до стадии покупки, в то время как мобильная конверсия составила всего 15%. Эти цифры показали, что клиенты испытывали значительные препятствия при попытке совершить покупку со своего мобильного устройства.

Во-первых, Lancôme рассматривала приложение для электронной коммерции как решение. Однако они поняли, что приложение имеет смысл только для клиентов, которые регулярно его посещают. Мобильные покупатели не будут еженедельно возвращаться к e-commerce приложению, не говоря уже о ежедневном, поэтому для них загрузка такого приложения не представляет никакой ценности. Компания захотела создать решение с эффективным пользовательским интерфейсом для всех устройств.

По словам Google , “Компания нуждалась в быстро загружаемом, мощном мобильном инструменте, который функционально будет подобен нативному приложению, но при этом он должен быть легко находимым и доступным для любого пользователя через интернет. Итогом стало Прогрессивное веб-приложение/Progressive Web App.

Результаты его использования ошеломительные:

на 84% снизилось время загрузки,

на 17% увеличилась конверсия,

на 53% увеличилось количество мобильных сеансов на iOS,

18% push-уведомлений открываются пользователями,

8% потребителей, которые открыли push-уведомление, совершали покупку.

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

Как же выглядит будущее?

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

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

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

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

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

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

Примечание: Пользователи Linux и Mac OS X должны включить в браузере политику chrome://flags/#enable-desktop-pwas , установив ее в значение Enabled . Google планирует добавить поддержку PWA по умолчанию для этих систем только в Chrome 72.

Установка PWA в Chrome

Компания Google интегрировала поддержку прогрессивных веб-приложений в Chrome 70 , релиз которого состоялся в октябре 2018 года. Для установки таких приложений используется довольно простой подход.

Пользователи Chrome должны посетить страницу PWA, например страницу приложения для заметок ">Notepad , и выбрать в основном меню Установка приложения “Notepad”... для установки.

Затем Chrome загружает приложение в собственный интерфейс, а затем добавляет в список установленных приложений в операционной системе. Пользователи Windows 10 смогут найти приложение в меню пуск и запустить его в любой момент.

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

Chrome также выводит список установленных прогрессивных веб-приложений и предоставляет пользователям опции для управления. Google приняла решение интегрировать их с приложениями в браузере. Таким образом, что посмотреть полный список установленных приложений, откройте страницу chrome://apps/ .

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

Chrome и PWA

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

Компания могла бы добавить прогрессивные приложения в Интернет-магазин Chrome, но на данный момент о таких планах не сообщалось.

Пользователи Chrome, которые хотят использовать PWA, вынуждены каждый раз посещать точный адрес приложения, чтобы установить его в основном меню Chrome. Искать подобные приложения можно вручную, а можно воспользоваться сторонними списками, например списком на ">Outweb .

Нашли опечатку? Нажмите Ctrl + Enter

Открыв спойлер можно узнать, что такое PWA

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

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

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

Эти приложения получат собственное окно и ярлык на панели задач (в Windows 10 и любой версии Chrome) или значок на главном экране (на устройствах Android и других смартфонах). Когда вы их открываете, они быстро загружаются благодаря API Cache и IndexedDB, который хранит ресурсы и данные приложения на вашем устройстве, что позволяет им работать, даже без интернета.

Новый Chrome 70 позволяет устанавливать PWA приложения на Windows 10. Они запускаются из меню "Пуск" и появляются так же, как родные приложения без адресной строки и без вкладок.

Chrome 70, уже доступный сейчас, позволяет устанавливать «Прогрессивные веб-приложения» / PWA в Windows. Когда вы посещаете веб-сайт с помощью PWA, например Twitter или Google Maps, вы можете теперь «установить» его так, чтобы он больше похож на обычное настольное приложение. Сейчас Google обновил сайт Google Фото (photos.google.com), чтобы функционировать в качестве прогрессивного веб-приложения.

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

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

Речь идет о том, чтобы установить новый стандарт для устанавливаемых приложений, поддерживаемых каждой платформой.

Это означает, что они будут запускаться как приложения на родном языке в Windows 10 и будут присутствовать в Windows Store . Это значительно повлияет на решение проблемы магазина корпорации microsoft, поскольку Google не хочет поддерживать универсальную Windows-платформу Microsoft (UWP). Другие разработчики, которые не хотели создавать отдельные приложения UWP, внезапно смогут поддерживать Windows 10 с помощью PWA в собственном стиле.

Как установить PWA в Windows 10

Чтобы установить PWA на компьютер под управлением операционной системы Windows, вам сначала нужно посетить веб-сайт, который имеет «Прогрессивное веб-приложение». В настоящее время, сравнительно мало сайтов предлагают PWA. Twitter предлагает PWA, YouTube, который использует свой мобильный интерфейс.

Когда вы находитесь на веб-сайте, который предлагает PWA, вы можете щелкнуть меню> Install , чтобы установить его. Например, открываем сайт ampbyexample и выбрать меню > Установить приложение AМP ampbyexample.

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

установка PWA в Windows 10

Вам будет предложено установить приложение в вашей системе. Нажмите «Установить».

Вы получите приложение со своим окном, значком в панели задач и записью в меню «Пуск».

Чтобы удалить PWA, нажмите кнопку меню в верхней части окна приложения и нажмите «Удалить [Имя приложения]».

Кстати, это приложение Twitter - это тот же PWA, который предлагается, когда вы устанавливаете Twitter через Store в Windows 10. Однако Google не доволен Microsoft, так как браузер Microsoft Edge не имеет никакого способа установить PWA из веб.

Вы должны установить их через приложение Store. Да, это странно, но для Microsoft - это простой способ расширить свой магазин приложений для Windows.

Поддержка устанавливаемых PWA доступна начиная с Chrome 67, в Chrome OS и подходит к MacOS и Linux с Chrome 72. Если вы являетесь пользователем Mac или Linux, вы можете протестировать эту функцию сегодня, включив #enable-desktop-pwas flags.

Где можно получить Прогрессивные веб-приложения

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

Каталоги, витрины, и примеры где можно подобрать интересные приложения (прогрессивные)

скриншот с сайта pwa-directory

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

PWA.Rocks-витрина прогрессивных веб-приложений.

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

Помните, что сайты не являются «мобильными», поэтому лучшие PWA отлично смотрятся на рабочем столе и на устройствах.

Витрина Google PWA : витрина Google для компаний, которые были подобраны из PWA.

Бизнес-пример для прогрессивных веб-приложений : Джейсон Григсби приводит убедительное доказательство преимуществ PWA.

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

Appcope, один из каталогов для Progressive Web Apps (PWA)

Список PWA / Лучшие примеры PWA приложений

Name	Description	Audit score
ReSTbasis	Web Starter Kit.	100
The Air Horner	An Air horn.	100
chromestatus	Chrome Platform Status	100
Serene Notes	text & picture notes, retrievable by context	100
Dev.Opera	Web features and implementations	73
Appscope	Directory of PWAs	100
Bet Calculator	Online bet calculator	91
emojoy		82
Expense Manager	Example expense manager
Firefox Platform Status	Roadmap for web platform features
Flipkart Lite	Online shopping	55
GitHub Explorer
Google I/O		82
Guitar Tuner	Tune a guitar	82
Instant Website Maker	Make A Website	100
Kite OnAir network	Kite Network
koolsol	solitaire card game	100
Memory Game PWA

12.04.2017

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

Если посмотрите на красочные квадраты на главном экране своего смартфона, то теперь они будут называться «нативными» или «родными приложениями». «Нативные» они потому что разработаны для операционной системы вашего смартфона (будь то iOS или Android).

Что же такое Progressive Web Apps

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

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

Сайты, подобные whatwebcando.today , способны анализировать API вашего браузера и показывать, какие из функций, изначально доступные на мобильных устройствах, также поддерживаются браузером. Попробуйте и будете удивлены. Версия Chrome (57) в моем примере поддерживает 27 из 36 функций.

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

Исследование, проведенное в 2015 году marketingland.com, показало удивительную статистику - мобильные пользователи тратят 80% времени на своих устройствах, используя только три приоритетных нативных приложения.

Доля времени, проведенная в приоритетных приложениях, различных пользователей

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

Количество скачиваемых нативных приложений из года в год падает. За последние годы оно упало на 20% и эта цифра продолжает увеличиваться. В 2016 году число скачиваемых приложений стало меньше, чем число удаленных.

Среднее количество нативных приложений, устанавливаемых в месяц

Другим недостатком мобильных приложений является то, что эти приложения нужно искать. Будь то App Store или Google Play, чтобы загрузить приложение из магазина нужно, прежде всего, найти его там (что означает, что нужно точно знать, что ищете, иначе вам придется перепробовать десятки приложений, чтобы найти то, которое вас устроит). Нажать на «Загрузить», согласиться на условия, дождаться загрузки приложения, а далее и его установки… К тому времени, как все закончится, вы можете легко забыть, что вы искали и для чего.

Прелесть Progressive Web App в том, что его очень легко обнаружить, как обычный веб-сайт - вы загуглили его, щелкнули ссылку, чтобы открыть, и все, у вас есть приложение на устройстве, готовое к показу. При этом браузер сам предложит вам добавить иконку на рабочий стол. Если вы согласны с этим, вы увидите значок своего приложения на главном экране телефона, мирно находясь рядом с родными приложениями. Теперь вы можете запускать PWA так же, как и мобильное приложение - с приятной заставкой, распознаванием ориентации и т. д.

Вес приложения - еще один немаловажный фактор. Средний вес нативного приложения составляет около 25 Мб. Некоторые из них откормились. Чем больше появляется различных сервисов, тем больше приложений теснятся в наших смартфонах и не всегда для всех них достаточно места.

Средний вес Progressive Web Apps - всего 2Мб.

Какая выгода от Progressive Web Apps

Веб-разработчики, что не побоялись первыми взяться за новые технологии, утверждают, что PWA просты в разработке, в сравнении с современными сайтами.
Progressive Web Apps становятся незаменимыми в сфере SEO. Google поднимает PWA значительно выше в поисковой выдаче. Также все прогрессивные веб-приложения работают по протоколу HTTPS, соответственно, Google так же позитивно реагирует на это и награждает сайт более благоприятным ранжированием сайта.
Кроссплатформенность Progressive Web Apps дает нам возможность делать одно веб-приложение, которое будет работать абсолютно на всех устройствах, где присутствует браузер.
Возможность продолжать работу с приложением при сбоях в интернет-подключении и увеличенная скорость загрузки с помощью PWA обезопасит вас от утери потенциальных конверсий и от увеличения количества отказов.

Итак , Progressive Web App - это сайт , который:

может «устанавливаться» на смартфон
выглядит как нативное приложение
работает offline
присылает push-уведомления

При этом его преимущества перед нативными приложениями:

кроссплатформенность
индексируется
маленький вес
установку предлагает браузер
установка моментальная
не нужно обновлять, всегда предоставляют свежий контент и интерфейс
улучшения в SEO

Согласитесь, такие сильные стороны Progressive Web Apps заставляют задуматься о том, что нативные мобильные приложения вскоре будут обречены.

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

Давайте посмотрим, как PWA может функционировать в качестве собственного мобильного приложения.

Кэширование оболочки приложения

Это минимальный набор HTML, CSS и JavaScript, необходимых для отображения главной страницы приложения. Когда вы заходите в Интернет и открываете веб-сайт, вы дожидаетесь загрузки всей главной страницы, и это включает в себя не только динамический контент страницы, но и все изображения, шрифты, таблицы стилей, JavaScript, используемые на странице, — и большинство из них остаются неизменными независимо от того, сколько раз вы открываете сайт. Так почему бы не кэшировать все это?

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

Читайте також: 10 причин, почему ваша аудитория в Instagram не растет, и как это исправить

Кэширование ответов

Это, возможно, самая мощная вещь, на которую способны PWA. Они могут кэшировать не только статические компоненты оболочки приложения, но и целые ответы из GET-запросов.

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

Существует несколько алгоритмов кеширования, которые возможно реализовать, выбор зависит от цели приложения.

Алгоритмы кеширования

Cache with fallback to Network	Network with fallback to Cache	Cache and Network race
«Кэш с резервом для сети» Используйте, если вы создаете автономное первое приложение. Если ответ уже находится в кэше, он будет передан пользователю, и онлайновый запрос никогда не будет выполнен. Если ответ еще не кэширован, приложение попытается загрузить его онлайн и затем поместить в кэш. Этот подход следует использовать для контента, который изменяется очень редко или не изменяется вообще.	«Сеть с откатом к кэшу» Это подход, при котором онлайн-пользователи всегда получают актуальную онлайн-версию, а автономные пользователи получают кэшированную версию. Используйте его для ресурсов, которые часто обновляются.	«Кэш и сетевая гонка» Это когда вы ищете ответ в кеше, одновременно запрашивая онлайн-контент. Сначала вы показываете кешированный ответ пользователя, а затем заменяете его новым контентом сразу после его появления или добавляете новый контент поверх кэшированных страниц, таких как Facebook и Twitter.

Манифест PWA

Независимо от того, какой шаблон используется, всегда возможен случай, когда ответ не кэшируется и не может быть получен в режиме онлайн. В этом случае обслуживается статическая HTML-страница (которая также кэширована как часть оболочки приложения), которая скажет что-то изящное, чтобы успокоить пользователя, например «Извини, чувак, твой кэш пуст и интернет не работает». Это способ сообщить пользователю, что что-то пошло не так и нет возможности обслуживать этот конкретный контент в данный момент. Это сделает приложение отказоустойчивым и сделает его работоспособным даже во время апокалипсиса.

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

{ "name": "Название приложения" , "short_name": "Краткое имя" , "icons": [{ "src" : "images/icons/icon-128x128.png" , "sizes" : "128x128" , "type": "image/png" }, { "src": "images/icons/icon-144x144.png" , "sizes" : "144x144" , "type": "image/png" }, {…}, { "src": "images/icons/icon-256x256.png" , "sizes": "256x256" , "type": "image/png" }], "stert_url": "/index.html" , "display": standalone" ,//browser? minimal-ui, fullscreen "background_color": "#3E4EB8 "display": "2F3BA2 }

Если вы дважды открываете приложение на мобильном устройстве, по крайней мере, 5 минут между посещениями, вам будет предложено установить его на устройстве, о чем мы уже писали выше (при условии, что манифест на месте, конечно).

Service Worker

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

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

Прогрессивные веб-приложения — это группа приложений, которые созданы с помощью стека технологий JS, HTML и CSS. Простыми словами, эти приложения построены на веб-технологиях.

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

Пользователю не нужно заходить в Google Play, искать приложение и затем скачивать его. Progressive web applications поддерживают кроссплатформенность. То есть разработчикам не нужно изучать Swift и Kotlin, чтобы создать своё приложение. PWA будут доступны с любых устройств: Windows, Linux, iOS, и так далее. И это огромное превосходство перед обычными приложениями.

В 2019 году начнут появляться первые 5G-смартфоны. Развитие 5G позволит еще серьезнее взглянуть на прогрессивные веб-приложения как на замену App Store и Google Play.

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

PWA по взаимодействию с пользователем ничем не отличаются от обычных приложений. Они поддерживают все анимации и работают очень плавно. Например, давайте скачаем приложение Timo. Для этого нажимаем на “Launch app”, после чего откроется сайт hellotime.co, который предложит добавить приложение на рабочий стол.

Добавляем значок на рабочий стол и перед нами установленное веб-приложение. Удобно и легко. Теперь, отключив интернет, оно всё будет запускаться и работать.

Не сомневаюсь в том, что будущее именно за PWA. А что думаете вы?