Необходим сайт, который максимально будет удобен для пользователя? Progressive Web App.

Прежде чем мы начнем с Progressive Web Apps, давайте сначала посмотрим на текущее состояние всемирной сети. По состоянию на январь 2017 года 8,05 млрд. устройств подключены к интернету (больше, чем население планеты, которое составляет 7,5 млрд. человек). Из которых 55% (4,42 млрд.) соединений исходят от смартфонов. Пользователей Chrome на мобильных устройствах составляет 1 миллиард в месяц, что на 150% больше, чем в прошлом году. По оценкам, к 2020 году 40-50 миллиардов устройств будут подключены к интернету по всему миру. Большинство пользователей будут подключаться из сельских местностей и развивающихся стран, где трафик либо слишком дорогой, либо пользователи имеют высокую задержку, либо и то, и другое.

Поведение пользователей:

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

Это связано с тем, что нативные приложения:

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

Но охват пользователей, использующих браузер на мобильных устройствах, практически в 3 раза выше, чем тех, кто использует приложения.

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

Преимущества мобильного веба:

  • оперативность - мобильные веб-сайты могут быть моментально доступны;
  • доступность - мобильные веб-сайты легко найти;
  • охват - среднестатистический пользователь посещает 100 сайтов в месяц;
  • совместимость - мобильные веб-сайты совместимы практически со всеми устройствами;
  • связываемость - легко поделиться сайтом с помощью URL, что не требует никаких установок;
  • SEO - мобильные вебсайты могут быть проиндексированы поисковыми системами;
  • самодостаточность - чтобы использовать мобильные вебсайты, вам всего-лишь нужен браузер, тогда как приложения требуют установки.

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

Согласно исследованиям Google, среднее время загрузки мобильного сайта составляет 19 секунд. Но пользователь ожидает загрузки сайта в течение 3 секунд. Таким образом, вы потеряете около 40% пользователей, если ваш веб-сайт загружается дольше 3 секунд. И 100% пользователя, если для загрузки требуется более 10 секунд.

Кроме того, легче нажать на значок на главном экране, чем набирать URL в адресной строке.

У мобильного сайта нет возможности push-уведомлений.

Решение?

Progressive Web Apps (PWA).

Что такое PWA?

PWA - это пользовательский интерфейс, сочетающий лучшее из веба и лучшее из приложений.

PWA:

  • прогрессивные - работают для каждого пользователя, независимо от выбора браузера, потому что они построены с использованием прогрессивного улучшения (progressive enhancement) в качестве основного принципа;
  • резиновые - подстраиваются под любой форм-фактор: десктоп, смартфон, планшет;
  • независимые от подключения - Service Worker позволяют работать в автономном режиме или в сетях низкого качества;
  • приложение-подобные - пользователь ощущает, что работает в приложении со всеми его стилями и навигациями;
  • "свежие" - постоянно актуальные, благодаря процессу обновления в Service Worker;
  • безопасные - работают через HTTPS;
  • видимые - определяются как «приложения» благодаря манифесту W3C и service worker, что позволяет поисковым системам их находить;
  • оповещательные - упрощают повторное взаимодействие с помощью такой функции, как push-уведомление;
  • устанавливаемые - позволяет пользователям «сохранять» приложения, которые им кажутся наиболее полезными, на своем домашнем экране, без захода в магазин приложений (app store);
  • связываемые - легко делиться сайтом с помощью URL, что не требует никаких установок.
  • Основные состовляющие

    Service Worker

    Service Worker - это прокси, которая находится между клиентом (браузером) и сервером.

    • Регистрация Service Worker
    • Если браузер поддерживает SW и он зарегистрирован, файл SW будет запускаться в ServiceWorkerGlobalScope, который представляет собой отдельный поток выполнения без доступа к DOM, а также не мешает основному потоку JS. Сюда относятся события Service Worker.
      1. установка - в большинстве случаев в обработчике этого события кешируются необходимые ресурсы (js, css, images и т.д.);
      2. активация - в основном используется для управления кэшем;
      3. бездействие;
      4. fetch или message - обрабатывать весь сетевой запрос при последующей загрузке страницы;
      5. завершение - событие для сохранения памяти.
    • Service worker скрипт