Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Логотип PWA

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

Функции PWA сокращают разрыв между пользовательским интерфейсом в веб-приложениях и нативных приложениях.

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

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

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

Поддержка браузера [ править ]

БраузерПоддерживатьКомментарий
ОкнаLinuxmacOSAndroidiOS
Гугл ХромдадададаНет
Microsoft Edge [7]дадададаНет
Fire FoxНет [2]Нет [2]НетЧастичноеНет
СафариN / AN / AдаN / AiOS 11.3+ [8]

Фон [ править ]

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

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

Firefox выпустил Firefox OS в 2013 году. Он был задуман как операционная система с открытым исходным кодом для запуска веб-приложений в качестве собственных приложений на мобильных устройствах с Gaia, построенным в качестве интерфейса HTML5. Разработка Firefox OS завершилась в 2016 году.

В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел ввели термин «прогрессивные веб-приложения» [12] для описания приложений, использующих преимущества новых функций, поддерживаемых современными браузерами, включая сервис-воркеры и манифесты веб-приложений , которые позволяют пользователям обновлять веб-приложения. к прогрессивным веб-приложениям в их собственной операционной системе (ОС). Затем Google приложил значительные усилия для продвижения разработки PWA для Android. [13] [14] С введением Apple поддержки сервис-воркеров для Safari в 2017 году [13] PWA теперь поддерживаются в двух наиболее часто используемых мобильных операционных системах: Android и iOS..

К 2019 году PWA были доступны в настольных браузерах Microsoft Edge [7] (в Windows ) и Google Chrome [15] (в Windows, macOS , Chrome OS и Linux ).

Характеристики [ править ]

Прогрессивные веб-приложения предназначены для работы в любом браузере, который соответствует соответствующим веб-стандартам . Как и в случае с другими кроссплатформенными решениями, цель состоит в том, чтобы помочь разработчикам создавать кроссплатформенные приложения более легко, чем с нативными приложениями. [13] По данным разработчиков Google, [12] [16] [17] PWA имеет следующие характеристики:

  • Прогрессивный - работает для каждого пользователя, независимо от выбора браузера, с использованием принципов прогрессивного улучшения .
  • Адаптивный - подходит для любого форм-фактора: настольный компьютер, мобильный телефон, планшет или формы, которые еще не появились.
  • Быстрее после начальной загрузки - после завершения начальной загрузки один и тот же контент и элементы страницы не нужно повторно загружать каждый раз.
  • Независимость от подключения - сервис-воркеры разрешают использование в автономном режиме или в сетях низкого качества.
  • Как приложение - воспринимается пользователем как приложение с взаимодействием и навигацией в стиле приложения.
  • Свежий - всегда в актуальном состоянии благодаря процессу обновления сервис-воркера.
  • Безопасно - обслуживается через HTTPS, чтобы предотвратить отслеживание и гарантировать, что контент не был подделан.
  • Обнаруживаемый - идентифицируется как «приложение» с помощью manifest.json [18] и регистрации сервис-воркера, а также обнаруживается поисковыми системами.
  • Возможность повторного вовлечения - возможность использовать push-уведомления для поддержания взаимодействия с пользователем.
  • Устанавливается - предоставляет значки на главном экране без использования App Store.
  • Возможность связывания - легко может быть передано через URL-адрес и не требует сложной установки.

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

  • Происходят из безопасного источника. Обслуживается по протоколу TLS и зеленым замкам (нет активного смешанного содержимого).
  • Загружать в автономном режиме (даже если это настраиваемая автономная страница). Подразумевается, что прогрессивным веб-приложениям требуются работники службы.
  • Ссылка на манифест веб-приложения по крайней мере с четырьмя ключевыми свойствами: name, short_name, start_url и display (со значением standalone или fullscreen).
  • Иконка размером не менее 144 × 144 в формате PNG.
  • Использование векторной графики, которая неограниченно масштабируется и требует меньшего размера файлов.

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

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

В 2017 году Twitter выпустил Twitter Lite, альтернативу PWA официальным приложениям для Android и iOS . Согласно Twitter, Twitter Lite потреблял только 1-3% от размера собственных приложений. [22]

Технологии [ править ]

Существует множество широко используемых технологий для создания прогрессивных веб-приложений. Для всех PWA требуется как минимум сервисный работник и манифест. [23] [24] [25]

Манифест [ править ]

Веб - приложение манифеста [26] является W3C спецификации определения JSON -На манифест (обычно маркируется manifest.json) [18] , чтобы обеспечить разработчикам централизованное место для размещения метаданных , связанных с веб - приложением , в том числе:

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

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

Поддержка iOS [ править ]

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

WebAssembly [ править ]

Основная статья: WebAssembly

WebAssembly позволяет запускать предварительно скомпилированный код в веб-браузере со скоростью, близкой к собственной. [29] Таким образом, библиотеки, написанные на таких языках, как C, могут быть добавлены в веб-приложения. Из-за дороговизны передачи данных из JavaScript в WebAssembly в ближайшем будущем будут использоваться в основном вычисления (например, распознавание голоса и компьютерное зрение), а не целые приложения.

Хранение данных [ править ]

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

Интернет-хранилище [ править ]

Основная статья: Интернет-хранилище

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

Сервисные работники [ править ]

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

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

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

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

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

AppCache (устаревший) [ править ]

Основная статья: Манифест кеширования в HTML5

Кэш приложения (или AppCache, или манифест кеша HTML5) - это более ранняя технология, которая позволяла приложению заранее кэшировать контент для последующего использования, когда устройство находится в автономном режиме. [33] Он работает адекватно для одностраничных приложений, для которых он был разработан, но проблематично не работает для многостраничных приложений, таких как вики. [34] По состоянию на май 2019 года технология поддерживается основными браузерами и годами используется некоторыми сайтами, но она уже устарела в пользу сервис-воркеров и в конечном итоге будет удалена.

См. Также [ править ]

  • HTML-приложение
  • Богатое веб-приложение
  • Мини-программа WeChat

Ссылки [ править ]

  1. ^ «Прогрессивные веб-приложения | Software AG» . techradar.softwareag.com . Проверено 25 сентября 2020 .
  2. ^ a b c Ньюман, Джаред (26 января 2021 г.). «Firefox просто ушел из ключевой части открытой сети» . Быстрая компания . Проверено 27 января 2021 .
  3. ^ agi90 (19 декабря 2020 г.). «Комментарий» . Reddit . Насколько мне известно, у нас нет планов прекращать использование PWA на мобильных устройствах.
  4. ^ "Могу я использовать pwa?" . Можно ли использовать . Проверено 27 января 2021 года .
  5. ^ "Сервисный работник готов?" . Джейк Арчибальд.
  6. ^ Rzutkiewicz, Джейсон. «Почему прогрессивные веб-приложения - это будущее мобильного Интернета (исследование 2019 г.)» . YML . Проверено 4 октября 2019 года .
  7. ^ a b «Обзор прогрессивных веб-приложений в Windows» . Документация Microsoft Edge . 13 марта 2021 . Проверено 13 марта 2021 года .
  8. ^ Firtman, Максимилиано (2020-08-18). «Прогрессивные веб-приложения для iOS уже здесь 🚀» . Средний . Источник 2021-01-29 .
  9. ^ a b Ричи, Рене (5 марта 2018 г.). «App Store Year Zero: несладкие веб-приложения привели iPhone к SDK» . iMore . Дата обращения 23 мая 2019 .
  10. ^ «Оригинальное видение Джобса для iPhone: никаких сторонних приложений» . 9to5Mac . 21 октября 2011 . Проверено 22 мая 2019 .
  11. ^ Маркотт, Итан. «Адаптивный веб-дизайн» . Список отдельно . Проверено 25 мая 2010 года .
  12. ^ a b Рассел, Алекс. «Прогрессивные веб-приложения: избегая вкладок, не теряя души» . Проверено 15 июня 2015 года .
  13. ^ a b c Эванс, Джонни (26 января 2018 г.). «Apple возвращается в будущее с веб-приложениями» . Компьютерный мир . Дата обращения 23 мая 2019 .
  14. ^ Ladage, Aaron (17 апреля 2018). «Прогрессивные веб-приложения уже здесь, и они меняют все» . ГРАД . Дата обращения 23 мая 2019 .
  15. ^ Лепаж, Пит (4 июня 2019). «Прогрессивные веб-приложения для настольных компьютеров» . Разработчики Google . Проверено 13 сентября 2019 .
  16. ^ «Ваше первое прогрессивное веб-приложение | Основы Интернета - разработчики Google» . Ваше первое прогрессивное веб-приложение | Основы Интернета - разработчики Google . Проверено 17 июля 2016 .
  17. ^ Разработчики Google. «Прогрессивное веб-приложение» . Проверено 15 июня 2015 года .
  18. ^ a b W3C «Манифест веб-приложения», рабочий проект , получено 12 сентября 2016 г.
  19. ^ Рассел, Алекс. «Что именно делает прогрессивное веб-приложение» . Проверено 18 октября, 2016 .
  20. ^ «Модель оболочки приложения» .
  21. ^ Османи, Адди. «Модель оболочки приложения | Основы Интернета» . Разработчики Google . Дата обращения 23 мая 2019 .
  22. ^ «Как мы создали Twitter Lite» . blog.twitter.com . Проверено 27 января 2021 .
  23. ^ "Обнаруживаемый" . Сеть разработчиков Mozilla . Проверено 24 апреля 2017 .
  24. ^ "Сеть независимая" . Сеть разработчиков Mozilla . Проверено 24 апреля 2017 .
  25. ^ «Мгновенная загрузка веб-приложений с архитектурой оболочки приложения» . Разработчики Google . Проверено 24 апреля 2017 .
  26. ^ "Документы веб-манифеста на MDN" . Веб-документы MDN .
  27. ^ «Что нового в iOS 12.2 для прогрессивных веб-приложений» . Средний . 27 марта 2019.
  28. ^ «Настройка веб-приложений» . Руководство по веб-контенту Safari .
  29. ^ «Концепции WebAssembly» . MDN . Проверено 14 августа 2018 .
  30. ^ "API веб-хранилища" . MDN . Проверено 14 августа 2018 .
  31. ^ a b «Введение в Service Worker | Web» . Разработчики Google . 1 мая 2019 . Дата обращения 23 мая 2019 .
  32. ^ «Концепции, лежащие в основе IndexedDB» . MDN . Проверено 14 августа 2018 .
  33. ^ «Использование кеша приложения» . MDN . Mozilla . Проверено 14 августа 2018 .
  34. ^ «Кэш приложений - это тупица» . Список отдельно . Проверено 14 августа 2018 .