Прогрессивный веб - приложение ( PWA ) является одним из видов прикладного программного обеспечения , поставляемого через сеть , построенные с использованием общих веб - технологий , включая HTML , CSS и JavaScript . Он предназначен для работы на любой платформе, которая использует браузер , соответствующий стандартам , включая настольные и мобильные устройства .
Поскольку прогрессивное веб-приложение - это тип веб-страницы или веб-сайта, известный как веб-приложение , они не требуют отдельного объединения или распространения. Разработчики могут просто опубликовать веб-приложение в Интернете, убедиться, что оно соответствует базовым «требованиям к возможности установки», а пользователи смогут добавить приложение на свой домашний экран. Публикация приложения в системах цифрового распространения, таких как Apple App Store или Google Play , необязательна. [1]
С 2021 года функции PWA в разной степени поддерживаются Google Chrome , Apple Safari , Firefox для Android и Microsoft Edge [2] [3], но не Firefox для настольных ПК. [4]
Поддержка браузера
Браузер | Служба поддержки | Комментарий | ||||
---|---|---|---|---|---|---|
Окна | Linux | macOS | Android | iOS | ||
На основе хрома | да | да | да | да | Нет | Включает Google Chrome , Microsoft Edge , [5] Brave , Opera и другие . |
Fire Fox | Нет [4] | Нет [4] | Нет | Частичное | Нет | |
Сафари | N / A | N / A | да | N / A | Да (iOS 11.3+) [6] |
История
Предшественники
При запуске iPhone в 2007 году Стив Джобс объявил, что веб-приложения (разработанные в HTML5 с использованием архитектуры AJAX ) будут стандартным форматом для приложений iPhone. Нет комплект разработки программного обеспечения не требуется (SDK), и приложения будут полностью интегрированы в устройство через Safari браузер двигателя. [7] Эта модель была позже заменена на App Store, как средство предотвращения взломов и успокоения разочарованных разработчиков. [8] В октябре 2007 года Джобс объявил, что SDK будет запущен в следующем году. [7] В результате, хотя Apple продолжала поддерживать веб-приложения, подавляющее большинство приложений iOS переместилось в App Store.
Начиная с начала 2010-х годов динамические веб-страницы позволили использовать веб-технологии для создания интерактивных веб-приложений . Адаптивный веб-дизайн и гибкость размера экрана, которую он обеспечивает, сделали разработку PWA более доступной. Постоянные улучшения HTML, CSS и JavaScript позволили веб-приложениям включать более высокий уровень интерактивности, что сделало возможным взаимодействие с веб-сайтом, аналогичное нативному. [9]
В 2013 году Mozilla выпустила Firefox OS . Она задумывалась как операционная система с открытым исходным кодом для запуска веб-приложений в качестве собственных приложений на мобильных устройствах. Firefox OS была основана на движке рендеринга Gecko с пользовательским интерфейсом Gaia, написанным на HTML5. Разработка Firefox OS завершилась в 2016 году [ необходима цитата ], и проект был полностью прекращен в 2017 году [10], хотя в качестве основы KaiOS , платформы функциональных телефонов, использовался форк Firefox OS . [11]
Первоначальное введение
В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел ввели термин «прогрессивные веб-приложения» [12] для описания приложений, использующих преимущества новых функций, поддерживаемых современными браузерами, включая сервис-воркеры и манифесты веб-приложений , которые позволяют пользователям обновлять веб-приложения. к прогрессивным веб-приложениям в их родной операционной системе (ОС). Затем Google приложил значительные усилия для продвижения разработки PWA для Android. [13] [14] Firefox представил поддержку для сервис-воркеров в 2016 году, а Microsoft Edge и Apple Safari последовали за ним в 2018, [15] [13] сделав сервис-воркеров доступными во всех основных системах.
К 2019 году PWA были доступны в настольных браузерах Microsoft Edge [5] (в Windows ) и Google Chrome [16] (в Windows, macOS , Chrome OS и Linux ).
В декабре 2020 года Firefox для настольных ПК отказался от реализации PWA (в частности, удалил прототип конфигурации « браузера для конкретного сайта », который был доступен в качестве экспериментальной функции). Архитектор Firefox отметил: «Я надеюсь, что мы посылаем сигнал о том, что поддержка PWA не появится в настольном Firefox в ближайшее время». [4] Mozilla по-прежнему планирует поддерживать PWA на Android. [17]
Магазины приложений
Поскольку прогрессивное веб-приложение - это тип веб-страницы или веб-сайта, известный как веб-приложение , они не требуют отдельного объединения или распространения. В частности, разработчики или пользователи не обязаны устанавливать веб-приложения через системы цифрового распространения, такие как Apple App Store , Google Play , Microsoft Store или Samsung Galaxy Store . В разной степени основные магазины приложений поддерживают PWA, что позволяет их найти в магазинах приложений. [1] Google Play, Microsoft Store, [18] и Samsung Galaxy Store поддерживают PWA, а Apple App Store - нет. Microsoft Store публикует некоторые подходящие PWA автоматически (без запроса авторов приложения) после их обнаружения с помощью индексации Bing . [19]
Характеристики
Все прогрессивные веб-приложения разработаны для работы в любом браузере, который соответствует соответствующим веб-стандартам . Как и в случае с другими кроссплатформенными решениями, цель состоит в том, чтобы помочь разработчикам создавать кроссплатформенные приложения более легко, чем с собственными приложениями. [13]
Некоторые прогрессивные веб-приложения используют архитектурный подход, называемый моделью оболочки приложения. [20] В этой модели сервис-воркеры хранят базовый пользовательский интерфейс или « оболочку » адаптивного веб-приложения для веб-дизайна в автономном кэше браузера . Эта модель позволяет PWA поддерживать нативное использование с подключением к Интернету или без него. Это может сократить время загрузки, предоставляя начальный статический фрейм , макет или архитектуру, в которые контент можно загружать как прогрессивно, так и динамически. [21]
Критерии возможности установки
Технические базовые критерии для того, чтобы сайт считался прогрессивным веб-приложением и, следовательно, «устанавливаемым» браузерами, были описаны Расселом в последующем посте [22] и обновлены после: [23] [24]
- Происходят из безопасного источника. Обслуживается по протоколу TLS и зеленым замкам (нет активного смешанного содержимого). Прогрессивные веб-приложения должны обслуживаться через HTTPS, чтобы гарантировать конфиденциальность, безопасность и подлинность контента пользователей.
- Зарегистрируйте сервис-воркер в обработчике выборки. Прогрессивные веб-приложения должны использовать сервис-воркеры для создания программируемых кешей контента. В отличие от обычного веб-кеша HTTP , который кэширует контент после первого использования, а затем полагается на различные эвристические методы, чтобы угадать, когда контент больше не нужен, программируемые кеши могут явно предварительно выбирать контент заранее, прежде чем он будет использоваться в первый раз, и явно отбрасывать его, когда он больше не нужен. [25] Это требование помогает страницам быть доступными в автономном режиме или в сетях низкого качества.
- Ссылка на манифест веб-приложения. Манифест должен содержать , по крайней мере , пять основных свойств:
name
илиshort_name
,start_url
иdisplay
(со значениемstandalone
,fullscreen
илиminimal-ui
), иicons
(с 192px и через 512 пикселей версий). Благодаря наличию манифеста, PWA могут быть легко доступны через URL-адрес, обнаруженный поисковой системой, и не требуют сложной установки (но могут быть перечислены в стороннем магазине приложений ). [26] Кроме того, PWA поддерживают взаимодействие и навигацию в собственном стиле приложений, включая добавление на главный экран, отображение заставок и т. Д.
Сравнение с родными приложениями
В 2017 году Twitter выпустил Twitter Lite, альтернативу PWA официальным приложениям для Android и iOS . Согласно Twitter, Twitter Lite потреблял только 1-3% от размера собственных приложений. [27] В июле 2019 года Twitter по умолчанию начал обслуживать всех пользователей сайта в Twitter Lite. [28] 1 июня 2020 года Twitter отключил устаревшую верстку веб-сайта, оставив прогрессивную версию веб-приложения в качестве единственного варианта. [29]
Starbucks предоставляет PWA, который на 99,84% меньше, чем его эквивалентное приложение для iOS. После развертывания PWA Starbucks удвоила количество онлайн-заказов, при этом пользователи настольных компьютеров делают заказы примерно с той же скоростью, что и пользователи мобильных приложений. [30]
Некоторые компании отмечают значительные улучшения в широком спектре ключевых показателей эффективности после внедрения PWA, таких как увеличение времени, затрачиваемого на страницу, конверсии или доход. [ необходима цитата ]
Технологии
Существует множество широко используемых технологий для создания прогрессивных веб-приложений. Веб-приложение считается PWA, если оно удовлетворяет «критериям возможности установки» и, следовательно, может работать в автономном режиме и может быть добавлено на главный экран устройства. Чтобы соответствовать этому определению, всем PWA требуется как минимум сервисный работник и манифест. [31] [32] [33]
Манифест
Веб - приложение манифеста [34] является W3C спецификации определения JSON -На манифест (обычно маркируется manifest.json) [26] , чтобы обеспечить разработчикам централизованное место для размещения метаданных , связанных с веб - приложением , в том числе:
- Название веб-приложения
- Ссылки на значки веб-приложений или объекты изображений
- Предпочтительный URL-адрес для запуска или открытия веб-приложения
- Данные конфигурации веб-приложения
- Ориентация веб-приложения по умолчанию
- Возможность установить режим отображения, например, полноэкранный
Эти метаданные имеют решающее значение для добавления приложения на главный экран или его включения в список вместе с собственными приложениями.
поддержка iOS
iOS Safari частично реализует манифесты, в то время как большая часть метаданных PWA может быть определена с помощью специфичных для Apple расширений метатегов. Эти теги позволяют разработчикам включать полноэкранный режим, определять значки и заставки, а также указывать имя для приложения. [35] [36]
WebAssembly
WebAssembly позволяет запускать предварительно скомпилированный код в веб-браузере со скоростью, близкой к собственной. [37] Таким образом, библиотеки, написанные на таких языках, как C, могут быть добавлены в веб-приложения. Из-за дороговизны передачи данных из JavaScript в WebAssembly в ближайшем будущем будут использоваться в основном вычисления (например, распознавание голоса и компьютерное зрение), а не целые приложения.
Хранилище данных
Контексты выполнения прогрессивных веб-приложений выгружаются всякий раз, когда это возможно, поэтому прогрессивные веб-приложения должны хранить большую часть долгосрочного внутреннего состояния (пользовательские данные, динамически загружаемые ресурсы приложения) одним из следующих способов
Веб-хранилище
Веб-хранилище - это стандартный API W3C, который позволяет хранить ключ-значение в современных браузерах. API состоит из двух объектов: sessionStorage (который включает хранилище только для сеанса, которое стирается после завершения сеанса браузера) и localStorage (которое обеспечивает хранение, которое сохраняется между сеансами). [38]
Сервисные работники
Service worker - это веб-воркер, который реализует программируемый сетевой прокси, который может отвечать на веб-запросы / HTTP-запросы основного документа. Он может проверять доступность удаленного сервера и кэшировать контент, когда этот сервер доступен, а затем передавать это содержимое в документ. Сервис-воркеры, как и любые другие веб-воркеры, работают отдельно от основного контекста документа. Сервис-воркеры могут обрабатывать push-уведомления и синхронизировать данные в фоновом режиме, кэшировать или извлекать запросы ресурсов, перехватывать сетевые запросы и получать централизованные обновления независимо от зарегистрированного документа, даже если этот документ не загружен. [39]
Сервисные работники проходят трехэтапный жизненный цикл регистрации, установки и активации. Регистрация включает в себя сообщение браузеру местонахождения сервисного работника при подготовке к установке. Установка происходит, когда в браузере для веб-приложения не установлен сервисный работник или если для сервис-воркера есть обновление. Активация происходит, когда все страницы PWA закрываются, чтобы не было конфликта между предыдущей версией и обновленной. Жизненный цикл также помогает поддерживать согласованность при переключении между версиями сервис-воркера, поскольку только один сервис-воркер может быть активным для домена. [39]
Индексированная база данных API
Indexed Database API - это стандартный API базы данных W3C, доступный во всех основных браузерах. API поддерживается современными браузерами и позволяет хранить объекты JSON и любые структуры, представленные в виде строки. [40] Индексированный API базы данных можно использовать с библиотекой-оболочкой, предоставляющей дополнительные конструкции вокруг него.
AppCache (устарело)
Кэш приложений (или AppCache, или манифест кеша HTML5) - это более ранняя технология, которая позволяла веб-приложениям заранее кэшировать контент для последующего использования, когда устройство находится в автономном режиме. [41] Этого было достаточно для одностраничных приложений, для которых он был разработан, но проблематично не работает для многостраничных приложений, таких как вики. [42] С мая 2021 года AppCache больше не является широко доступным. Он был удален из Firefox 85, [43] и отключен по умолчанию в Chrome 85 (с полным удалением, запланированным для Chrome 93). [44]
Смотрите также
- Приложение HTML , устаревшая альтернатива от Microsoft
- Богатое веб-приложение - еще одна устаревшая альтернатива
Внешние ссылки
- Lighthouse , инструмент для аудита PWA с открытым исходным кодом, разработанный Google.
- Указатель стандартов Рабочей группы по веб-приложениям
Рекомендации
- ^ a b «Прогрессивные веб-приложения | Software AG» . techradar.softwareag.com . Проверено 25 сентября 2020 .
- ^ "Могу я использовать pwa?" . Можно ли использовать . Проверено 27 января 2021 года .
- ^ "Сервисный работник готов?" . Джейк Арчибальд.
- ^ а б в г Ньюман, Джаред (26 января 2021 г.). «Firefox просто ушел из ключевой части открытой сети» . Быстрая компания . Проверено 27 января 2021 .
- ^ а б «Обзор прогрессивных веб-приложений в Windows» . Документация Microsoft Edge . 13 марта 2021 . Проверено 13 марта 2021 года .
- ^ Фиртман, Максимилиано (18.08.2020). «Прогрессивные веб-приложения для iOS уже здесь 🚀» . Средний . Проверено 29 января 2021 .
- ^ а б Ричи, Рене (5 марта 2018 г.). «App Store Year Zero: несладкие веб-приложения привели iPhone к SDK» . iMore . Дата обращения 23 мая 2019 .
- ^ «Изначальное видение Джобса для iPhone: никаких сторонних нативных приложений» . 9to5Mac . 21 октября 2011 . Проверено 22 мая 2019 .
- ^ Маркотт, Итан. «Адаптивный веб-дизайн» . Список отдельно . Проверено 25 мая 2010 года .
- ^ Хоффман, Крис; PCWorld | (2016-09-28). «Mozilla прекращает всякую коммерческую разработку Firefox OS» . PCWorld . Проверено 17 марта 2021 .
- ^ «KaiOS, платформа для мобильных телефонов, построенная на пепелище Firefox OS, добавляет приложения Facebook, Twitter и Google» . TechCrunch . Проверено 17 марта 2021 .
- ^ Рассел, Алекс. «Прогрессивные веб-приложения: избегая вкладок, не теряя души» . Проверено 15 июня 2015 года .
- ^ а б в Эванс, Джонни (26 января 2018 г.). «Apple возвращается в будущее с веб-приложениями» . Компьютерный мир . Дата обращения 23 мая 2019 .
- ^ Ladage, Аарон (17 апреля 2018 г.). «Прогрессивные веб-приложения уже здесь, и они меняют все» . ГРАД . Дата обращения 23 мая 2019 .
- ^ «Могу ли я использовать ... Таблицы поддержки HTML5, CSS3 и т . Д.» . caniuse.com . Проверено 16 мая 20 .
- ^ Лепаж, Пит (4 июня 2019 г.). «Прогрессивные веб-приложения для настольных компьютеров» . Разработчики Google . Проверено 13 сентября 2019 .
- ^ agi90 (19 декабря 2020 г.). «Комментарий» . Reddit .
Насколько мне известно, у нас нет планов прекращать использование PWA на мобильных устройствах.
- ^ MSEdgeTeam. «Опубликуйте свое прогрессивное веб-приложение в Microsoft Store - Microsoft Edge Development» . docs.microsoft.com . Проверено 16 мая 20 .
- ^ «Первая партия прогрессивных веб-приложений для Windows 10 уже здесь» . Windows Central . 2018-04-07 . Проверено 16 мая 20 .
- ^ «Модель оболочки приложения» .
- ^ Османи, Адди. «Модель оболочки приложения | Основы Интернета» . Разработчики Google . Дата обращения 23 мая 2019 .
- ^ Рассел, Алекс. «Что именно делает прогрессивное веб-приложение» . Проверено 18 октября, 2016 .
- ^ "Что нужно для установки?" . web.dev . Проверено 19 мая 2021 .
- ^ Разработчики Google. «Прогрессивное веб-приложение» . Проверено 15 июня 2015 года .
- ^ «Кэширование сервис-воркеров и HTTP-кеширование» . web.dev . Проверено 19 мая 2021 .
- ^ a b W3C «Манифест веб-приложения», рабочий проект , получено 12 сентября 2016 г.
- ^ «Как мы создали Twitter Lite» . blog.twitter.com . Проверено 27 января 2021 .
- ^ «Twitter начинает выпуск обновленного веб-сайта с новым дизайном» . MacRumors .
- ^ «Твиттер предупреждает о закрытии устаревшей темы сайта 1 июня» . BleepingComputer .
- ^ «12 лучших примеров прогрессивных веб-приложений (PWA) в 2021 году» . SimiCart . 2021-02-22 . Проверено 16 мая 20 .
- ^ «Обнаруживаемый» . Сеть разработчиков Mozilla . Проверено 24 апреля 2017 .
- ^ «Независимая от сети» . Сеть разработчиков Mozilla . Проверено 24 апреля 2017 .
- ^ «Мгновенная загрузка веб-приложений с архитектурой оболочки приложения» . Разработчики Google . Проверено 24 апреля 2017 .
- ^ «Документы веб-манифеста на MDN» . Веб-документы MDN .
- ^ «Что нового в iOS 12.2 для прогрессивных веб-приложений» . Средний . 27 марта 2019.
- ^ «Настройка веб-приложений» . Руководство по веб-контенту Safari .
- ^ «Концепции WebAssembly» . MDN . Проверено 14 августа 2018 .
- ^ «API веб-хранилища» . MDN . Проверено 14 августа 2018 .
- ^ а б «Введение в Service Worker | Web» . Разработчики Google . 1 мая 2019 . Дата обращения 23 мая 2019 .
- ^ «Концепции, лежащие в основе IndexedDB» . MDN . Проверено 14 августа 2018 .
- ^ «Использование кеша приложения» . MDN . Mozilla . Проверено 14 августа 2018 .
- ^ «Кэш приложений - это тупица» . Список отдельно . Проверено 14 августа 2018 .
- ^ «Использование кеша приложения - HTML: язык разметки гипертекста | MDN» . developer.mozilla.org . Проверено 11 апреля 2021 .
- ^ «Подготовка к удалению AppCache» . web.dev . Проверено 11 апреля 2021 .