Прогрессивные веб-приложения

PWA — это сокращение от словосочетания Progressive Web Applications, которое переводится на русский язык как «прогрессивные веб-приложения».

Есть 3 подхода к определению прогрессивных веб-приложений.

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

PWA — это такие сайты, которые можно добавить в виде иконки на главный экран или рабочий стол, и при запуске их с этой иконки они будут выглядеть и работать неотличимо от нативных приложений, то есть запускаться в автономном режиме (standalone mode), в котором нет адресной строки и других элементов интерфейса браузера, работать без доступа к интернету, получать push-уведомления и т. д.

PWA — это веб-приложения, которые применяют стратегию прогрессивного улучшения (progressive enhancement), то есть проверяют, поддерживает ли браузер те или иные Web API, и если да, то могут их использовать, чтобы обеспечить опыт взаимодействия (user experience) наравне с нативными приложениями. Отсюда и название — прогрессивные веб-приложения.

🤓 Комментарий автора

В отличие от обывательского определения, это определение является более правильным, так как в нём не перечисляются конкретные необходимые и достаточные требования к веб-приложениям, а говорится об общем восприятии пользователя (user experience).

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

Если прогрессивное веб-приложение не устанавливать, а просто использовать во вкладке браузера, оно не перестанет быть прогрессивным. Пользователь продолжит получать другие преимущества, которые предоставляют PWA: push-уведомления, доступ к аппаратным сенсорам устройства (камере, микрофону, Bluetooth, USB, NFC, GPU и др.) и т. д. Одно из преимуществ PWA как раз и заключается в том, что они не требуют установки.

Если же прогрессивное веб-приложение не способно работать без доступа к интернету, но при этом в других аспектах обеспечивает пользовательский опыт наравне с нативными приложениями, оно не перестаёт быть прогрессивным. Во-первых, далеко не каждое нативное приложение способно корректно работать без доступа к интернету. А во-вторых, далеко не каждому приложению это нужно. Например, приложение для видеозвонков, запущенное без доступа к интернету, в целом бесполезно.

То есть каждый критерий не является обязательным.

Таким образом почти любое веб-приложение можно формально считать PWA.

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

Веб — это платформа, а PWA — это приложения для этой платформы.

PWA — это сайты, формально удовлетворяющие определённым техническим критериям.

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

У браузеров на основе Chromium это:

• использование защищённого соединения HTTPS или локального хоста;
• наличие манифеста веб-приложения (JSON-файла, в котором указаны название приложения, описание приложения, ссылка хотя бы на одну растровую иконку с разрешением не ниже 512 x 512 px или векторную иконку в формате SVG).

Ранее браузеры на основе Chromium требовали также наличия Service Worker (JavaScript-кода, который работает в фоновом режиме независимо от веб-страницы, даже если вкладка или браузер закрыты). Service Worker позволяет получать push-уведомлений, синхронизировать данные в фоне, перехватывать и обрабатывать сетевые запросы, что позволяет реализовать кеширование и работу без доступа к интернету, и выполнять другие задачи.

Если сайт удовлетворяет этим критериям, то при его открытии в браузерах на основе Chromium появится предложение установить этот сайт как приложение:

В других браузерах, например, Safari и Firefox, предложение установить PWA не появляется.

Термин PWA был придуман в 2015 году инженером Google Алексом Расселом и его супругой Фрэнсис Берримэн и впервые публично упомянут в статье Progressive Web Apps: Escaping Tabs Without Losing Our Soul.

Идея PWA не нова — главные концепции были заложены и реализованы еще в Palm webOS, Firefox OS и ChromeOS, где все приложения по сути являются веб-приложениями.

Еще в 2007, за 18 дней до выхода первого iPhone, Стив Джобс сформулировал идею приложений, которые создаются с использованием веб-технологий и доставляются через сеть. App Store изначально не планировался, а в течение первого года существования устройства не был доступен SDK для создания нативных приложений.

Apple принципиально не использует термин Progressive Web Apps, а использует свой собственный термин Home Screen Web Apps.

У PWA есть одобренный сообществом логотип:

Впервые на то, что у технологии нет своего логотипа в мае 2017 года обратил внимание Максим Сальников и через Twitter организовал на GitHub конкурс на лучшее лого. Народным голосованием победил логотип от Диего Гонзалеза. В то время он был DevRel'ом команды Samsung Internet — одного из самых популярных браузеров для мобильных устройств в Азии, сейчас Диего — DevRel команды браузера Microsoft Edge.

А ещё Диего — автор логотипа WebXR API, который неразрывно связан с PWA.

PWA работают на устройствах любого форм-фактора, на любой архитектуре и ОС, где есть браузер и доступ в интернет. Они запускаются на любых устройствах от носимой электроники до телевизоров, от VR/AR-очков до самых немыслимых устройств вроде умных зеркал.

Eдиная кодовая база снижает стоимость разработки и поддержки.

PWA выглядят и работают как нативные приложения:

• запускаются через иконку на главном экране;
• глубоко интегрируются в операционную систему (могут запускаться при старте ОС, могут быть зарегистрированы как обработчики определённых URI, расширений файлов и MIME-типов);
• могут работать без доступа к интернету;
• могут получать push-уведомления;
• могут получать доступ к аппаратным сенсорам устройства, таким как камера, микрофон, Bluetooth, USB, NFC, GPU и др.

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

Кэш позволяет не только реализовать запуск и работу приложения без доступа к интернету, но и ускорить повторные запуски и работу PWA при наличии доступа.

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

Чтобы воспользоваться PWA, достаточно посетить сайт.

При правильной реализации кэш автоматически обновляется в фоновом режиме.

Если кэширование не реализовано, при каждом запуске PWA всё равно загружается актуальная версия.

PWA сами не реализовывают API — они лишь вызывают API, уже реализованные в браузере.

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

Веб — самая открытая и крупная платформа. Она больше, чем все остальные платформы вместе взятые, так как на них есть браузеры.

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

PWA — это сайт, а значит весь контент индексируется поисковыми системами.

У каждой страницы есть URL, который можно скопировать и поделиться. Причём можно поделиться ссылкой на конкретный абзац и даже на конкретный фрагмент текста на странице. Вот такой вот deep linking «из коробки».

Также пользователь может:

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

Код PWA выполняется в песочнице браузера, а для его загрузки и передачи данных используется безопасное соединение HTTPS.

Также веб-приложения используют более защищенную модель разрешений. Например, в отличие от нативных Windows- и Android-приложений, PWA запрашивают у пользователя разрешение на получение push-уведомлений, доступ к NFC и так далее.

Для написания PWA не нужно изучать проприетарные SDK, достаточно знать HTML, JS, CSS. Для разработки, например, в отличие от разработки для iOS, не требуется определённое оборудование. Можно даже обойтись без IDE и компилятора. Код HTML, JS, CSS интерпретируется и может быть отлажен прямо в браузере.

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

Самый первый в мире сайт до сих пор открывается и работает. А все новые Web API разрабатываются с учётом обратной совместимости.

Некоторые преимущества также могут являться и недостатками.

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

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

Разные браузеры имеют разную поддержку Web API.

Разные версии одного и того же браузера могут иметь разную поддержку Web API.

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

Например, в iOS все браузеры (Chrome, Firefox и др.) вынуждены вместо своего собственного движка (Blink, Gecko и др.) использовать движок WebKit, используемый браузером Safari, который либо не поддерживает некоторые Web API, либо поддерживает их частично, а WebKit обновляется только вместе с операционной системой.

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