stringtranslate.com

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

Логотип ПВА

Прогрессивное веб-приложение ( PWA ) или прогрессивное веб-приложение — это тип веб-приложения , которое можно установить на устройство как отдельное приложение . [1] PWA устанавливаются с использованием автономного кэша веб-браузера устройства . [2]

PWA были введены с 2016 года как альтернатива собственным (специфичным для устройства) приложениям, с тем преимуществом, что они не требуют отдельной сборки или распространения для разных платформ. Их можно использовать на различных системах, включая настольные и мобильные устройства . Публикация приложения в системах цифровой дистрибуции, таких как Apple App Store или Google Play , не является обязательной. [2]

Поскольку PWA поставляется в форме веб-страницы или веб-сайта , созданного с использованием распространенных веб-технологий, включая HTML , CSS , JavaScript и WebAssembly , [3] он может работать на любой платформе с браузером, совместимым с PWA. По состоянию на 2021 год функции PWA поддерживаются в разной степени Google Chrome , Apple Safari , Firefox для Android и Microsoft Edge [4] [5] , но не Firefox для настольных компьютеров. [6]

История

Предшественники

На Всемирной конференции разработчиков Apple в 2007 году Стив Джобс объявил, что iPhone будет «запускать приложения, созданные с использованием стандартов Интернета Web 2.0». [7] Никакого комплекта для разработки программного обеспечения (SDK) не требовалось, и приложения полностью интегрировались в устройство через движок браузера Safari . [8] Позднее эта модель была перенесена в App Store , как средство умиротворения разочарованных разработчиков. [9] В октябре 2007 года Джобс объявил, что SDK будет запущен в следующем году. [8] В результате, хотя Apple продолжала поддерживать веб-приложения, подавляющее большинство приложений iOS переместилось в App Store.

Начиная с начала 2010-х годов динамические веб-страницы позволили использовать веб-технологии для создания интерактивных веб-приложений . Адаптивный веб-дизайн и гибкость размеров экрана, которую он обеспечивает, сделали разработку PWA более доступной. Продолжающиеся улучшения HTML, CSS и JavaScript позволили веб-приложениям включать более высокие уровни интерактивности, делая возможными нативные взаимодействия на веб-сайте. [10]

В 2013 году Mozilla выпустила Firefox OS . Она была задумана как операционная система с открытым исходным кодом для запуска веб-приложений в качестве собственных приложений на мобильных устройствах. Firefox OS была основана на движке рендеринга Gecko с пользовательским интерфейсом Gaia, написанным на HTML5. Разработка Firefox OS завершилась в 2016 году, [11] и проект был полностью прекращен в 2017 году, [12] хотя форк Firefox OS использовался в качестве основы KaiOS , платформы для обычных телефонов. [13]

Первоначальное введение

В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел ввели термин «прогрессивные веб-приложения» [14] для описания приложений, использующих новые функции, поддерживаемые современными браузерами, включая service worker и манифесты веб-приложений , которые позволяют пользователям обновлять веб-приложения до прогрессивных веб-приложений в своей собственной операционной системе (ОС). Затем Google приложила значительные усилия для продвижения разработки PWA для Android. [15] [16] Firefox представил поддержку service worker в 2016 году, а Microsoft Edge и Apple Safari последовали за ними в 2018 году, [17] [15] сделав service worker доступными во всех основных системах.

К 2019 году PWA поддерживались настольными версиями большинства браузеров, включая Microsoft Edge [18] (на Windows ) и Google Chrome [19] (на Windows, macOS , ChromeOS и Linux ).

В декабре 2020 года Firefox для настольных компьютеров отказался от реализации PWA (в частности, удалил прототип конфигурации « браузер, специфичный для сайта », которая была доступна в качестве экспериментальной функции). Архитектор Firefox отметил: «Я надеюсь, что мы посылаем сигнал о том, что поддержка PWA не появится в настольном Firefox в ближайшее время». [6] Mozilla по-прежнему планирует поддерживать PWA на Android. [20]

Поддержка браузера

Характеристики

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

Некоторые прогрессивные веб-приложения используют архитектурный подход, называемый моделью оболочки приложения. [24] В этой модели работники служб хранят базовый пользовательский интерфейс или « оболочку » веб-приложения с адаптивным веб-дизайном в автономном кэше браузера . Эта модель позволяет PWA поддерживать использование, подобное нативному, с подключением к сети или без него. Это может улучшить время загрузки, предоставляя начальный статический фрейм , макет или архитектуру, в которую контент может загружаться как постепенно, так и динамически. [25]

Технические критерии

Технические базовые критерии для сайта, который можно считать прогрессивным веб-приложением и, следовательно, который можно устанавливать с помощью браузеров, были описаны Расселом в 2016 году [26] и обновлены с тех пор: [27] [28]

Технологии

Существует множество технологий, обычно используемых для создания прогрессивных веб-приложений. Веб-приложение считается PWA, если оно удовлетворяет критериям установки, поэтому может работать в автономном режиме и может быть добавлено на домашний экран устройства. Чтобы соответствовать этому определению, все PWA требуют как минимум манифеста и сервисного работника. [31] [32] [33] Другие технологии могут использоваться для хранения данных, связи с серверами или выполнения кода.

Манифест

Манифест веб-приложения [34] — это спецификация Консорциума Всемирной паутины (W3C), определяющая манифест на основе JSON (обычно называемый manifest.json) [30], который предоставляет разработчикам централизованное место для размещения метаданных , связанных с веб-приложением, включая:

Эти метаданные имеют решающее значение для добавления приложения на главный экран или иного отображения его в списке нативных приложений.

поддержка iOS

iOS Safari частично реализует манифесты, в то время как большая часть метаданных PWA может быть определена через специфичные для Apple расширения метатегов. Эти теги позволяют разработчикам включать полноэкранный режим, определять значки и заставки, а также указывать имя для приложения. [35] [36]

Работники сферы услуг

Service Worker — это веб-работник , реализующий программируемый сетевой прокси-сервер, который может отвечать на веб-/HTTP-запросы из основного документа. Он может проверять доступность удаленного сервера, кэшировать содержимое, когда этот сервер доступен, и позже предоставлять это содержимое документу. Service Worker, как и любые другие веб-работники, работают отдельно от контекста основного документа. Service Worker могут обрабатывать push-уведомления и синхронизировать данные в фоновом режиме, кэшировать или извлекать запросы ресурсов, перехватывать сетевые запросы и получать централизованные обновления независимо от документа, который их зарегистрировал, даже если этот документ не загружен. [37]

Service Workers проходят трехэтапный жизненный цикл: Регистрация, Установка и Активация. Регистрация включает в себя сообщение браузеру местоположения service worker при подготовке к установке. Установка происходит, когда в браузере не установлен service worker для веб-приложения или если есть обновление service worker. Активация происходит, когда все страницы PWA закрыты, так что нет конфликта между предыдущей версией и обновленной. Жизненный цикл также помогает поддерживать согласованность при переключении между версиями service worker, поскольку только один service worker может быть активен для домена. [37]

Веб-сборка

WebAssembly позволяет запускать предварительно скомпилированный код в веб-браузере со скоростью, близкой к родной. [38] Таким образом, библиотеки, написанные на таких языках, как C, можно добавлять в веб-приложения. Анонсированный в 2015 году и впервые выпущенный в марте 2017 года, WebAssembly стал рекомендацией W3C 5 декабря 2019 года [39] [40] [41] и получил премию Programming Languages ​​Software Award от ACM SIGPLAN в 2021 году. [42]

Хранение данных

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

Веб-хранилище
Web Storage — это API стандарта W3C, который позволяет хранить данные по принципу «ключ-значение» в современных браузерах. API состоит из двух объектов: sessionStorage (который позволяет хранить данные только в течение сеанса, который очищается после завершения сеанса браузера) и localStorage (который позволяет хранить данные, сохраняющиеся между сеансами). [43]
API индексированной базы данных
Indexed Database API — это API базы данных стандарта W3C, доступный во всех основных браузерах. API поддерживается современными браузерами и позволяет хранить объекты JSON и любые структуры, представляемые в виде строки. [44] Indexed Database API можно использовать с библиотекой-оболочкой, предоставляющей дополнительные конструкции вокруг него.

Сравнение с нативными приложениями

В 2017 году Twitter выпустил Twitter Lite, альтернативу официальным нативным приложениям Android и iOS в виде PWA . По данным Twitter, Twitter Lite потреблял всего 1–3% от размера нативных приложений. [45] Starbucks предоставляет PWA, которое на 99,84% меньше, чем его эквивалентное приложение iOS. После развертывания своего PWA Starbucks удвоил количество онлайн-заказов, причем пользователи настольных компьютеров делали заказы примерно с той же скоростью, что и пользователи мобильных приложений. [46]

Обзор 2018 года, опубликованный Forbes , показал, что пользователи Pinterest PWA проводили на сайте на 40% больше времени по сравнению с предыдущим мобильным сайтом. Ставки дохода от рекламы также выросли на 44%, а основные взаимодействия — на 60%. [47] Flipkart увидел, что 60% клиентов, которые удалили свое родное приложение, вернулись, чтобы использовать Flipkart PWA. Lancôme увидел 84%-ное сокращение времени до того, как страница станет интерактивной, что привело к 17%-ному увеличению конверсий и 53%-ному увеличению мобильных сеансов на iOS с их PWA. [48]

Распространение через магазины приложений

Поскольку PWA не требует отдельной сборки или распространения для разных платформ и доступен пользователям через Интернет, разработчикам не обязательно выпускать его через системы цифровой дистрибуции, такие как Apple App Store , Google Play , Microsoft Store или Samsung Galaxy Store . Основные магазины приложений поддерживают публикацию PWA в разной степени. [2] Google Play, Microsoft Store, [49] и Samsung Galaxy Store поддерживают PWA, но Apple App Store — нет. Microsoft Store автоматически публикует некоторые подходящие PWA (даже без запросов авторов приложений) после их обнаружения с помощью индексации Bing . [50]

Смотрите также

Ссылки

  1. ^ «Что такое прогрессивные веб-приложения? Руководство по PWA для начинающих». freeCodeCamp.org . 2024-01-18 . Получено 2024-05-06 .
  2. ^ abc "Progressive Web Apps | Software AG". techradar.softwareag.com . Получено 25.09.2020 .
  3. ^ Ltd, Cybellium. Освоение разработки Front-end. Cybellium Ltd. стр. 273. ISBN 979-8-8668-4882-9.
  4. ^ "Могу ли я использовать pwa?". CanIUse . Получено 27 января 2021 г. .
  5. ^ «Готов ли Service Worker?». Джейк Арчибальд.
  6. ^ abcde Ньюман, Джаред (2021-01-26). «Firefox только что отошел от ключевой части открытого веба». Fast Company . Получено 2021-01-27 .
  7. ↑ Джобс, Стив; Apple (11 июня 2007 г.). «iPhone будет поддерживать сторонние приложения Web 2.0». Apple .
  8. ^ ab Ritchie, Rene (5 марта 2018 г.). «App Store Year Zero: Несладкие веб-приложения подтолкнули iPhone к SDK». iMore . Получено 23 мая 2019 г. .
  9. ^ «Оригинальное видение Джобсом iPhone: никаких сторонних собственных приложений». 9to5Mac . 21 октября 2011 г. Получено 22 мая 2019 г.
  10. ^ Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн». A List Apart . Получено 25 мая 2010 г.
  11. ^ "Mozilla прекращает разработку коммерческой Firefox OS - gHacks Tech News". Новости технологий gHacks . 2016-09-27 . Получено 2022-05-05 .
  12. ^ Хоффман, Крис; PCWorld | (28.09.2016). «Mozilla прекращает всю коммерческую разработку на Firefox OS». PCWorld . Получено 17.03.2021 .
  13. ^ "KaiOS, платформа для телефонов, созданная на основе Firefox OS, добавляет приложения Facebook, Twitter и Google". TechCrunch . 26 февраля 2018 г. Получено 17.03.2021 г.
  14. ^ Рассел, Алекс. «Прогрессивные веб-приложения: выход из вкладок без потери души» . Получено 15 июня 2015 г.
  15. ^ abc Эванс, Джонни (26 января 2018 г.). «Apple возвращается в будущее с веб-приложениями». Computerworld . Получено 23 мая 2019 г. .
  16. ^ Ладейдж, Аарон (17 апреля 2018 г.). «Прогрессивные веб-приложения уже здесь, и они меняют все». DEG . Получено 23 мая 2019 г. .
  17. ^ "Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.". caniuse.com . Получено 16.05.2021 .
  18. ^ ab "Обзор прогрессивных веб-приложений в Windows". Документация Microsoft Edge . 13 марта 2021 г. Получено 13 марта 2021 г.
  19. ^ LePage, Pete (4 июня 2019 г.). «Progressive Web Apps on Desktop». Google Developers . Получено 13 сентября 2019 г.
  20. ^ agi90 (19 декабря 2020 г.). "Комментарий". Reddit . Насколько мне известно, у нас нет планов по закрытию PWA на мобильных устройствах.{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
  21. ^ "Get your PWA on". Браузер Vivaldi . 2021-10-07 . Получено 2021-10-11 .
  22. ^ Энгл, Патрик; Авенард, Жан-Ив; Касерес, Маркос; Кэннон, Ада Роуз; Карлсон, Эрик; Дэвидсон, Гарретт; Дэвис, Джон; Дубост, Карл; Эйдсон, Брэди (2023-06-06). "Новости с WWDC23: Функции WebKit в Safari 17 beta". WebKit . Получено 2023-06-14 .
  23. ^ Энгл, Патрик; Касерес, Маркос; Калиман, Разван; Дэвис, Джон; Эйдсон, Брэди; Хэтчер, Тимоти; Нива, Рёсукэ; Симмонс, Джен (27.03.2023). "Возможности WebKit в Safari 16.4". WebKit . Получено 14.06.2023 .
  24. ^ «Модель оболочки приложения».
  25. ^ Османи, Адди. «Модель оболочки приложения | Основы веб-приложений». Google Developers . Получено 23 мая 2019 г.
  26. ^ Рассел, Алекс. «Что именно делает веб-приложение прогрессивным» . Получено 18 октября 2016 г.
  27. ^ "Что нужно, чтобы его можно было установить?". web.dev . Получено 2021-05-19 .
  28. ^ "Progressive Web App". web.dev . Получено 15 июня 2015 г. .
  29. ^ "Кэширование Service Worker и HTTP-кэширование". web.dev . Получено 2021-05-19 .
  30. ^ ab W3C «Web App Manifest», рабочий проект, получено 12 сентября 2016 г.
  31. ^ "Discoverable". Mozilla Developer Network . Получено 24.04.2017 .
  32. ^ "Независимый от сети". Mozilla Developer Network . Получено 24.04.2017 .
  33. ^ "Мгновенная загрузка веб-приложений с архитектурой оболочки приложения". Google Developers . Получено 24.04.2017 .
  34. ^ "Документы веб-манифеста на MDN". Веб-документы MDN .
  35. ^ "Что нового в iOS 12.2 для Progressive Web Apps". Medium . 27 марта 2019 г.
  36. ^ "Настройка веб-приложений". Руководство по веб-контенту Safari .
  37. ^ ab "Введение в Service Worker | Web". Google Developers . 1 мая 2019 г. Получено 23 мая 2019 г.
  38. ^ "Концепции WebAssembly". MDN . Получено 14 августа 2018 г. .
  39. ^ Консорциум Всемирной паутины. "Спецификация ядра WebAssembly". Консорциум Всемирной паутины (W3) . Получено 2024-05-06 .
  40. ^ "WebAssembly 1.0 становится рекомендацией W3C и четвертым языком, изначально работающим в браузерах". InfoQ . Получено 2024-05-06 .
  41. ^ Канта Нгуен (2022-05-01). "Home Nest" . Получено 2024-05-06 .
  42. ^ "Премия за программное обеспечение для языков программирования". www.sigplan.org . Получено 2024-05-06 .
  43. ^ "API веб-хранилища". MDN . Получено 14 августа 2018 г. .
  44. ^ "Концепции IndexedDB". MDN . Получено 14 августа 2018 г. .
  45. ^ Шенкленд, Стивен (30 июля 2020 г.). «Приложение Twitter помогает остановить удушение Интернета телефонами». CNET . Получено 11 февраля 2023 г. .
  46. ^ "12 лучших примеров прогрессивных веб-приложений (PWA) в 2021 году". SimiCart . 2021-02-22 . Получено 2021-05-16 .
  47. ^ Османи, Эдди (30 ноября 2017 г.). «Исследование производительности прогрессивного веб-приложения Pinterest». Команда ChromiumDev . Получено 10 февраля 2023 г.
  48. ^ Газдеки, Эндрю (9 марта 2018 г.). «Почему прогрессивные веб-приложения заменят нативные мобильные приложения». Forbes . Получено 10 февраля 2023 г. .
  49. ^ MSEdgeTeam. «Опубликуйте свое прогрессивное веб-приложение в Microsoft Store — разработка Microsoft Edge». docs.microsoft.com . Получено 16.05.2021 .
  50. ^ "Первая партия Windows 10 Progressive Web Apps уже здесь". Windows Central . 2018-04-07 . Получено 2021-05-16 .

Внешние ссылки