✖


Jump to content

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

Логотип PWA

Прогрессивное веб-приложение ( PWA ) или прогрессивное веб-приложение , [1] это тип прикладного программного обеспечения, распространяемого через Интернет и созданного с использованием распространенных веб-технологий, включая HTML , CSS , JavaScript и WebAssembly . [2] Он предназначен для работы на любой платформе с браузером , соответствующим стандартам , включая настольные и мобильные устройства .

Поскольку прогрессивное веб-приложение представляет собой тип веб-страницы или веб-сайта , известный как веб-приложение , оно не требует отдельного объединения или распространения. Разработчики могут просто опубликовать веб-приложение в Интернете, убедиться, что оно соответствует базовым требованиям к установке, и гарантировать, что пользователи смогут добавить приложение на свой главный экран . Публикация приложения в системах цифрового распространения, таких как Apple App Store или Google Play, не является обязательной. [3]

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

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

[ редактировать ]
Браузер Поддерживать Комментарий
Окна macOS Линукс Андроид iOS и iPadOS
хрома на основе Да Да Да Да — Включает Google Chrome , Microsoft Edge , [7] Храбрый , Опера , Вивальди , [8] и другие .
Firefox Нет [6] Нет [6] Нет [6] Частичный Нет
Сафари — Частичный [9] — — Частичный [10]

История

[ редактировать ]

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

[ редактировать ]

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

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

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

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

[ редактировать ]

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

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

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

Магазины

[ редактировать ]

Поскольку прогрессивное веб-приложение представляет собой тип веб-страницы или веб-сайта , известный как веб-приложение , оно не требует отдельного объединения или распространения. В частности, разработчикам или пользователям не требуется устанавливать веб-приложения через системы цифрового распространения, такие как Apple App Store , Google Play , Microsoft Store или Samsung Galaxy Store . В той или иной степени крупные магазины приложений поддерживают публикацию PWA. [3] Google Play, Магазин Microsoft, [24] и Samsung Galaxy Store поддерживают PWA, а Apple App Store — нет. Microsoft Store автоматически публикует некоторые соответствующие PWA (даже без запросов авторов приложений) после их обнаружения с помощью индексации Bing . [25]

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

[ редактировать ]

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

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

Критерии установки

[ редактировать ]

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

  • Происходят из безопасного источника. Передаются через TLS и не содержат активного смешанного контента. Прогрессивные веб-приложения должны обслуживаться через HTTPS, чтобы обеспечить конфиденциальность, безопасность и подлинность контента пользователей.
  • Зарегистрируйте сервисного работника с обработчиком выборки. Прогрессивные веб-приложения должны использовать сервис-воркеров для создания программируемых кэшей контента. В отличие от обычного веб-кеша HTTP , который кэширует контент после первого использования, а затем опирается на различные эвристики, чтобы угадать, когда контент больше не нужен, программируемые кэши могут явно предварительно выбирать контент перед его первым использованием и явно отбрасывать его, когда он будет использован. больше не нужен. [31] Это требование помогает страницам быть доступными в автономном режиме или в сетях низкого качества.
  • веб-приложения Ссылка на манифест . Манифест должен содержать как минимум пять ключевых свойств: name или short_name, start_url, и display (со стоимостью standalone, fullscreen или minimal-ui), и icons (с версиями 192 пикселей и 512 пикселей). Информация, содержащаяся в манифесте, позволяет легко распространять PWA через URL-адрес, обнаруживать их поисковыми системами и упрощает сложные процедуры установки (однако PWA по-прежнему будут отображаться в стороннем магазине приложений ). [32] Кроме того, PWA поддерживают взаимодействие и навигацию в стиле приложения, включая добавление на главный экран , отображение заставок и т. д.

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

[ редактировать ]

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

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

Технологии

[ редактировать ]

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

Манифест

[ редактировать ]

Манифест веб-приложения [40] — это спецификация W3C , определяющая манифест на основе JSON (обычно обозначается манифестом.json). [32] предоставить разработчикам централизованное место для размещения метаданных , связанных с веб-приложением, включая:

  • Название веб-приложения
  • Ссылки на значки веб-приложений или объекты изображений.
  • Предпочтительный URL-адрес для запуска или открытия веб-приложения.
  • Данные конфигурации веб-приложения
  • Ориентация веб-приложения по умолчанию
  • Возможность установки режима отображения, например, полноэкранного режима.

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

поддержка iOS

[ редактировать ]

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

Веб-сборка

[ редактировать ]
Основная статья: Вебсборка

WebAssembly позволяет предварительно скомпилированный код в веб-браузере со скоростью, близкой к исходной. запускать [43] библиотеки, написанные на таких языках, как C. Таким образом, в веб-приложения можно добавлять Анонсированный в 2015 году и впервые выпущенный в марте 2017 года, WebAssembly стал рекомендованным Консорциумом World Wide Web 5 декабря 2019 года. [44] [45] [46] и он получил награду за программное обеспечение для языков программирования от ACM SIGPLAN в 2021 году. [47]

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

[ редактировать ]

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

Веб-хранилище

[ редактировать ]
Основная статья: Веб-хранилище

Веб-хранилище — это стандартный API W3C, который обеспечивает хранение ключей и значений в современных браузерах. API состоит из двух объектов: sessionStorage (который обеспечивает хранилище только для сеансов, которое очищается по окончании сеанса браузера) и localStorage (который обеспечивает хранилище, сохраняющееся между сеансами). [48]

API индексированной базы данных

[ редактировать ]
Основная статья: API индексированной базы данных

API индексированной базы данных — это стандартный API базы данных W3C, доступный во всех основных браузерах. API поддерживается современными браузерами и позволяет хранить объекты JSON и любые структуры, представленные в виде строки. [49] API индексированной базы данных можно использовать с библиотекой-оболочкой, предоставляющей дополнительные конструкции вокруг него.

Работники сферы обслуживания

[ редактировать ]

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

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

См. также

[ редактировать ]
  • Google Lighthouse — инструмент аудита PWA с открытым исходным кодом, разработанный Google.

Ссылки

[ редактировать ]
  1. ^ «Что такое прогрессивные веб-приложения? Руководство по PWA для начинающих» . freeCodeCamp.org . 18 января 2024 г. Проверено 6 мая 2024 г.
  2. ^ ООО, Кибеллиум. Освоение Front-end разработки . ООО "Цибеллиум" с. 273. ИСБН  979-8-8668-4882-9 .
  3. ^ Jump up to: а б «Прогрессивные веб-приложения | Software AG» . techradar.softwareag.com . Проверено 25 сентября 2020 г.
  4. ^ «Могу ли я использовать pwa?» . Могу ли я использовать . Проверено 27 января 2021 г.
  5. ^ «Готов ли сервисный работник?» . Джейк Арчибальд.
  6. ^ Jump up to: а б с д и Ньюман, Джаред (26 января 2021 г.). «Firefox только что отказался от ключевой части открытой сети » Компания Фаст . Проверено 27 января 2021 г.
  7. ^ Jump up to: а б «Обзор прогрессивных веб-приложений в Windows» . Документация Microsoft Edge . 13 марта 2021 г. Проверено 13 марта 2021 г.
  8. ^ «Включите PWA» . Браузер Вивальди . 07.10.2021 . Проверено 11 октября 2021 г.
  9. ^ Угол, Патрик; Авенар, Жан-Ив; Касерес, Маркос; Кэннон, Ада Роуз; Карлсон, Эрик; Дэвидсон, Гарретт; Дэвис, Джон; Дюбост, Карл; Эйдсон, Брэди (6 июня 2023 г.). «Новости с WWDC23: функции WebKit в бета-версии Safari 17» . Вебкит . Проверено 14 июня 2023 г.
  10. ^ Угол, Патрик; Касерес, Маркос; Калиман, Разван; Дэвис, Джон; Эйдсон, Брэди; Хэтчер, Тимоти; Нива, Рёске; Симмонс, Джен (27 марта 2023 г.). «Функции WebKit в Safari 16.4» . Вебкит . Проверено 14 июня 2023 г.
  11. ^ Джобс, Стив; Apple (11 июня 2007 г.). «iPhone будет поддерживать сторонние приложения Web 2.0» . Яблоко .
  12. ^ Jump up to: а б Ричи, Рене (5 марта 2018 г.). «App Store Year Zero: неприятные веб-приложения вынудили iPhone перейти на SDK» . яЕще . Проверено 23 мая 2019 г.
  13. ^ «Первоначальное видение Джобса для iPhone: никаких сторонних приложений» . 9to5Mac . 21 октября 2011 года . Проверено 22 мая 2019 г.
  14. ^ Маркотт, Итан (25 мая 2010 г.). «Адаптивный веб-дизайн» . Список врозь . Проверено 25 мая 2010 г.
  15. ^ «Mozilla прекращает коммерческую разработку ОС Firefox — gHacks Tech News» . Новости технологий gHacks . 27 сентября 2016 г. Проверено 5 мая 2022 г.
  16. ^ Хоффман, Крис; ПКМир | (28 сентября 2016 г.). «Mozilla прекращает всю коммерческую разработку Firefox OS» . ПКМир . Проверено 17 марта 2021 г.
  17. ^ «KaiOS, платформа для обычных телефонов, построенная на руинах ОС Firefox, добавляет приложения Facebook, Twitter и Google» . ТехКранч . 26 февраля 2018 года . Проверено 17 марта 2021 г.
  18. ^ Рассел, Алекс. «Прогрессивные веб-приложения: выход из вкладок без потери души» . Проверено 15 июня 2015 г.
  19. ^ Jump up to: а б с Эванс, Джонни (26 января 2018 г.). «Apple возвращается в будущее с веб-приложениями» . Компьютерный мир . Проверено 23 мая 2019 г.
  20. ^ Лададж, Аарон (17 апреля 2018 г.). «Прогрессивные веб-приложения уже здесь, и они меняют все» . ДЭГ . Проверено 23 мая 2019 г.
  21. ^ «Могу ли я использовать... Таблицы поддержки HTML5, CSS3 и т. д.» . caniuse.com . Проверено 16 мая 2021 г.
  22. ^ ЛеПейдж, Пит (4 июня 2019 г.). «Прогрессивные веб-приложения для настольных компьютеров» . Разработчики Google . Проверено 13 сентября 2019 г.
  23. ^ agi90 (19 декабря 2020 г.). «Комментарий» . Реддит . Насколько мне известно, у нас нет планов по прекращению поддержки PWA на мобильных устройствах. {{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
  24. ^ MSEdgeTeam. «Опубликуйте свое прогрессивное веб-приложение в Microsoft Store — Microsoft Edge Development» . docs.microsoft.com . Проверено 16 мая 2021 г.
  25. ^ «Первая партия прогрессивных веб-приложений для Windows 10 уже здесь» . Центр Windows . 07.04.2018 . Проверено 16 мая 2021 г.
  26. ^ «Модель оболочки приложения» .
  27. ^ Османи, Адди. «Модель оболочки приложения | Основы веб-технологий» . Разработчики Google . Проверено 23 мая 2019 г.
  28. ^ Рассел, Алекс. «Что именно делает прогрессивное веб-приложение» . Проверено 18 октября 2016 г.
  29. ^ «Что нужно для установки?» . веб.разработчик . Проверено 19 мая 2021 г.
  30. ^ «Прогрессивное веб-приложение» . веб.разработчик . Проверено 15 июня 2015 г.
  31. ^ «Кэширование Service Worker и HTTP-кэширование» . веб.разработчик . Проверено 19 мая 2021 г.
  32. ^ Jump up to: а б W3C «Манифест веб-приложения», рабочий проект , получено 12 сентября 2016 г.
  33. ^ Шенкленд, Стивен (30 июля 2020 г.). «Приложение Twitter помогает не дать телефонам задушить Интернет» . CNET . Проверено 11 февраля 2023 г.
  34. ^ «12 лучших примеров прогрессивных веб-приложений (PWA) в 2021 году» . СимиКарт . 2021-02-22 . Проверено 16 мая 2021 г.
  35. ^ Османи, Адди (30 ноября 2017 г.). «Пример повышения производительности веб-приложений Pinterest» . Команда ChromiumDev . Проверено 10 февраля 2023 г.
  36. ^ Газдецкий, Эндрю (9 марта 2018 г.). «Почему прогрессивные веб-приложения заменят нативные мобильные приложения» . Форбс . Проверено 10 февраля 2023 г.
  37. ^ «Обнаруживаемый» . Сеть разработчиков Mozilla . Проверено 24 апреля 2017 г.
  38. ^ «Сетевая независимость» . Сеть разработчиков Mozilla . Проверено 24 апреля 2017 г.
  39. ^ «Мгновенная загрузка веб-приложений с архитектурой оболочки приложения» . Разработчики Google . Проверено 24 апреля 2017 г.
  40. ^ «Документация веб-манифеста на MDN» . Веб-документы MDN .
  41. ^ «Что нового в iOS 12.2 для прогрессивных веб-приложений» . Середина . 27 марта 2019 г.
  42. ^ «Настройка веб-приложений» . Руководство по веб-контенту Safari .
  43. ^ «Концепции WebAssembly» . МДН . Проверено 14 августа 2018 г.
  44. ^ Консорциум Всемирной паутины. «Основная спецификация WebAssembly» . Консорциум Всемирной паутины (W3) . Проверено 6 мая 2024 г.
  45. ^ «WebAssembly 1.0 становится рекомендацией W3C и четвертым языком, который будет работать в браузерах» . ИнфоQ . Проверено 6 мая 2024 г.
  46. ^ Кантха Нгуен (01 мая 2022 г.). «Домашнее гнездо» . Проверено 6 мая 2024 г.
  47. ^ «Награда за программное обеспечение в области языков программирования» . www.sigplan.org . Проверено 6 мая 2024 г.
  48. ^ «API веб-хранилища» . МДН . Проверено 14 августа 2018 г.
  49. ^ «Концепции, лежащие в основе IndexedDB» . МДН . Проверено 14 августа 2018 г.
  50. ^ Jump up to: а б «Введение в Service Worker | Web» . Разработчики Google . 1 мая 2019 года . Проверено 23 мая 2019 г.
[ редактировать ]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Progressive_web_app&oldid=1236712032"
Arc.Ask3.Ru: конец переведенного документа.
Arc.Ask3.Ru
Номер скриншота №: 8159fe18da229661d32def0d478946c7__1721959380
URL1:https://arc.ask3.ru/arc/aa/81/c7/8159fe18da229661d32def0d478946c7.html
Заголовок, (Title) документа по адресу, URL1:
Progressive web app - Wikipedia
Данный printscreen веб страницы (снимок веб страницы, скриншот веб страницы), визуально-программная копия документа расположенного по адресу URL1 и сохраненная в файл, имеет: квалифицированную, усовершенствованную (подтверждены: метки времени, валидность сертификата), открепленную ЭЦП (приложена к данному файлу), что может быть использовано для подтверждения содержания и факта существования документа в этот момент времени. Права на данный скриншот принадлежат администрации Ask3.ru, использование в качестве доказательства только с письменного разрешения правообладателя скриншота. Администрация Ask3.ru не несет ответственности за информацию размещенную на данном скриншоте. Права на прочие зарегистрированные элементы любого права, изображенные на снимках принадлежат их владельцам. Качество перевода предоставляется как есть. Любые претензии, иски не могут быть предъявлены. Если вы не согласны с любым пунктом перечисленным выше, вы не можете использовать данный сайт и информация размещенную на нем (сайте/странице), немедленно покиньте данный сайт. В случае нарушения любого пункта перечисленного выше, штраф 55! (Пятьдесят пять факториал, Денежную единицу (имеющую самостоятельную стоимость) можете выбрать самостоятельно, выплаичвается товарами в течение 7 дней с момента нарушения.)