PWA: назначение, структура и примеры использования

1. Что такое PWA

логотип pwa

Progressive Web Application (PWA) или прогрессивное веб-приложение — это веб-приложение, которое по своему внешнему виду и функциональности напоминает нативное приложение. Оно может использовать такие функции, как push-уведомления, GPS-навигация и другие возможности. PWA можно установить на рабочий стол и использовать в оффлайн-режиме.

2. История PWA разработки

Концепция PWA была впервые озвучена Стивом Джобсом в 2007 году, когда он предложил создать приложения с использованием технологий Web 2.0 и полной интеграцией с iPhone без использования SDK. Однако эта идея не получила широкого распространения.

В 2010 году в веб-разработке появилось понятие Responsive Web Design, позволяющее поддерживать различные устройства с разными разрешениями экрана.

В 2015 году Алекс Рассел ввел термин PWA.

В 2016 году Google признал PWA новым стандартом разработки.

В 2017 году Windows объявила о поддержке PWA.

В 2018 году Google добавил новый фактор PWA в рейтинг Google Page Speed.

В 2018 году PWA стал стандартом для Microsoft Edge и Windows 10.

В 2018 году Google запустил индексацию страниц с приоритетом для мобильных устройств.

В 2018 году Apple анонсировала поддержку PWA.

история pwa

3. Характеристики, service workers, манифесты и другое

Характеристики (целевые показатели):

Discoverable — контент должен быть доступен для поисковых систем.
Installable — приложение должно быть возможно установить и запускать с рабочего стола устройства.
Linkable — возможность делиться ссылкой на приложение.
Network independent — приложение должно работать в оффлайн-режиме и при плохом соединении.
Progressively enhanced — базовые функции должны работать на старых браузерах, а все возможности — на современных.
Re-engageable — возможность отправлять push-уведомления при появлении нового контента.
Responsively designed — приложение должно одинаково отображаться на всех устройствах и разрешениях экрана.
Secure — соединение между сервером и клиентом должно быть защищено

Технологии, которыми достигаются целевые показатели:

Service worker
Web manifest
HTTPS
Appshell
Push Notifications

Service worker

Service Worker - это скрипт, который браузер запускает в фоновом режиме отдельно от веб-страницы. Он позволяет реализовывать функции push-уведомлений, фоновой синхронизации, кэширования и перехвата сетевых запросов.

Service Worker работает в контексте worker, что означает отсутствие доступа к DOM и выполнение в отдельном потоке от основного JavaScript. В целях безопасности Service Worker может работать только по HTTPS.

взаимодействие с service worker

Пример кода:

navigator.serviceWorker.register('/service-worker.js');
/* service-worker.js */

// Install
self.addEventListener('install', function(event) {
    // ...
});

// Activate
self.addEventListener('activate', function(event) {
    // ...
});

// Listen for network requests from the main document
self.addEventListener('fetch', function(event) {
   // Return data from cache
    event.respondWith(
        caches.match(event.request);
    );
});

self.addEventListener('push', function(event) {
  var payload = event.data ? event.data.text() : 'Alohomora';
 
  event.waitUntil(
    // Показываем уведомление с заголовком и телом сообщения.
    self.registration.showNotification('My first spell', {
      body: payload,
    })
  );
});

Web App Manifest

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

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

< link rel = "manifest" href="/manifest.json" >

Минимальный манифест

{ 
    "name": "My Sample PWA", 
    "lang": "en-US", 
    "start_url": "/" 
}

name	Имя приложения, используемого оси для отображения рядом с значком приложения
short_name	Это может быть использовано для отображения имени приложения, когда не хватает места name для
lang	Основной язык приложения
start_url	Предпочтительный URL-адрес, на который следует ориентироваться при запуске приложения операционной системой
scope	Определяет область навигации для приложения. За пределами этой области на посещаемую страницу возвращается обычная веб-страница, а не PWA. Это по умолчанию start_url
display	Как должно выглядеть приложение. Это изменяет, сколько пользовательского интерфейса браузера отображается пользователю
theme_color	Цвет темы по умолчанию для приложения. Это влияет на то, как ОС отображает сайт
background_color	Фоновый цвет окна, в котором запущено приложение, перед тем, как применить таблицу стилей
orientation	На вспомогательных устройствах это определяет ориентацию по умолчанию для приложения (например, пейзаж или портрет)
icons	Массив объектов изображений значков, используемых ОС в разных контекстах
description	О чем приложение

Application Shell

App shell представляет собой основу графического интерфейса, своего рода шаблон. Например, представим типичный сайт с заголовком, двумя колонками и другими элементами. Если убрать из него контент текущей страницы и всю динамическую информацию, то останется только статическая часть — это и будет app shell.

Главная идея заключается в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем в него подгружается динамическая информация из сети. В процессе загрузки эта оболочка должна выглядеть привлекательно (например, с использованием индикаторов загрузки).

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

App shell можно сравнить с оболочкой нативного приложения. Рассматривайте ваше PWA как нативное приложение, и многие аспекты станут более понятными.

Push Notifications

Если вы проведете время в интернете, используя Chrome DevTools на вкладке Application, то заметите, что лишь немногие сайты применяют технологии PWA. Из тех, что используют, около 90% делают это исключительно ради Push-уведомлений.

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

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

Push-уведомления должны быть своевременными, точными и релевантными:

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

4. Преимущества и недостатки PWA

Преимущества для пользователей:

Быстрое время загрузки
Отличная производительность даже при слабом соединении
Небольшой размер приложения
Доступ к нативным функциям (добавление на главный экран, работа в оффлайн-режиме, push-уведомления)
Установка без необходимости использовать магазины приложений (Google Play, App Store и т.д.)
Мгновенные обновления

Преимущества для бизнеса:

Отсутствие посредников при загрузке и установке приложения
Независимый процесс обновления
Возможность работы приложений при нестабильном соединении
Быстрое время загрузки
Привлекательный пользовательский интерфейс
Видимость приложения в поисковых системах
Упрощенная регистрация через социальные сети (Instagram и др.) и более высокая рентабельность инвестиций в маркетинг (ROI)
Снижение затрат на привлечение пользователей (CAC)
Повышение кросс-платформенной конверсии
Контроль над процессами разработки, обновления и информацией о продукте

Преимущества для разработчиков:

Современные технологии
Позитивный пользовательский опыт
Возможность работы с headless архитектурой
Нет необходимости разрабатывать отдельные версии для iOS и Android
Отсутствие необходимости платить за размещение в App Store или Google Play
Быстрый выход на рынок
Независимость от бэкэнда благодаря платформонезависимым решениям PWA

Недостатки PWA:

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