Прогрессивный веб - приложение ( PWA ) является одним из видов прикладного программного обеспечения , поставляемого через сеть , построенные с использованием общих веб - технологий , включая HTML , CSS и JavaScript . Он предназначен для работы на любой платформе, использующей браузер , соответствующий стандартам , включая настольные и мобильные устройства .
Функции PWA сокращают разрыв между пользовательским интерфейсом в веб-приложениях и нативных приложениях.
Поскольку прогрессивное веб-приложение - это тип веб-страницы или веб-сайта, известный как веб-приложение , они не требуют отдельного объединения или распространения. Разработчики могут просто опубликовать веб-приложение в Интернете, убедиться, что оно соответствует базовым «требованиям к возможности установки», а пользователи смогут добавить приложение на свой домашний экран. Публикация приложения в системах цифрового распространения, таких как Apple App Store или Google Play , необязательна. [1]
С 2021 года функции PWA в разной степени поддерживаются Google Chrome , Apple Safari , Firefox для Android и Microsoft Edge [2] [3], но не Firefox для настольных ПК. [4] Некоторые компании отмечают значительные улучшения [5] в широком спектре ключевых показателей эффективности после внедрения PWA, таких как увеличение времени, затрачиваемого на страницу, конверсии или доход.
Поддержка браузера [ править ]
Браузер | Служба поддержки | Комментарий | ||||
---|---|---|---|---|---|---|
Окна | Linux | macOS | Android | iOS | ||
Гугл Хром | да | да | да | да | Нет | |
Microsoft Edge [6] | да | да | да | да | Нет | |
Fire Fox | Нет [4] | Нет [4] | Нет | Частичное | Нет | |
Сафари | N / A | N / A | да | N / A | Да (iOS 11.3+) [7] |
Фон [ править ]
При запуске iPhone в 2007 году Стив Джобс объявил, что веб-приложения, разработанные в HTML5 с использованием архитектуры AJAX , будут стандартным форматом для приложений iPhone. Нет комплект разработки программного обеспечения не требуется (SDK), и приложения будут полностью интегрированы в устройство через Safari браузер двигателя. [8] Позже эта модель была заменена на App Store, как средство предотвращения взломов и успокоения разочарованных разработчиков. [9] В октябре 2007 года Джобс объявил, что SDK будет запущен в следующем году. [8] В результате, хотя Apple продолжала поддерживать веб-приложения, подавляющее большинство приложений iOS переместилось в App Store.
Начиная с начала 2010-х годов динамические веб-страницы позволили использовать веб-технологии для создания интерактивных веб-приложений . Адаптивный веб-дизайн и гибкость размера экрана, которую он обеспечивает, сделали разработку PWA более доступной. Постоянные улучшения HTML, CSS и JavaScript позволили веб-приложениям включать более высокий уровень интерактивности, что сделало возможным использование нативных приложений на веб-сайтах и, следовательно, на PWA. [10]
Firefox выпустил Firefox OS в 2013 году. Он был задуман как операционная система с открытым исходным кодом для запуска веб-приложений в качестве собственных приложений на мобильных устройствах с Gaia, построенным в качестве интерфейса HTML5. Разработка Firefox OS завершилась в 2016 году [ необходима ссылка ], и проект был полностью прекращен в 2017 году. [11] Ядро системы было преобразовано в коммерческий продукт под названием KaiOS. [12]
В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел придумали термин «прогрессивные веб-приложения» [13] для описания приложений, использующих преимущества новых функций, поддерживаемых современными браузерами, включая сервис-воркеры и манифесты веб-приложений , которые позволяют пользователям обновлять веб-приложения. к прогрессивным веб-приложениям в их родной операционной системе (ОС). Затем Google приложил значительные усилия для продвижения разработки PWA для Android. [14] [15] С введением Apple поддержки сервис-воркеров для Safari в 2018 году [14] PWA теперь поддерживаются в двух наиболее часто используемых мобильных операционных системах: Android и iOS..
К 2019 году PWA были доступны в настольных браузерах Microsoft Edge [6] (в 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 . Однако для многих поставщиков PWA отсутствие видимости PWA в этих системах распространения является недостатком по сравнению с собственными приложениями. В той или иной степени основные магазины приложений начали использовать PWA, что позволило их найти в магазинах приложений. [1]
Характеристики [ править ]
Прогрессивные веб-приложения предназначены для работы в любом браузере, который соответствует соответствующим веб-стандартам . Как и в случае с другими кроссплатформенными решениями, цель состоит в том, чтобы помочь разработчикам создавать кроссплатформенные приложения более легко, чем с нативными приложениями. [14] Согласно Google Developers, [13] [18] [19] PWA имеет следующие характеристики:
- Прогрессивный - работает для каждого пользователя, независимо от выбора браузера, с использованием принципов прогрессивного улучшения .
- Адаптивный - подходит для любого форм-фактора: настольный компьютер, мобильный телефон, планшет или формы, которые еще не появились.
- Быстрее после начальной загрузки - после завершения начальной загрузки один и тот же контент и элементы страницы не нужно повторно загружать каждый раз.
- Независимость от подключения - сервис-воркеры разрешают использование в автономном режиме или в сетях низкого качества.
- Как приложение - воспринимается пользователем как приложение с взаимодействием и навигацией в стиле приложения.
- Свежий - всегда в актуальном состоянии благодаря процессу обновления сервис-воркера.
- Безопасно - обслуживается через HTTPS, чтобы предотвратить отслеживание и гарантировать, что контент не был подделан.
- Обнаруживаемый - идентифицируется как «приложение» с помощью manifest.json [20] и регистрации сервис-воркера, а также обнаруживается поисковыми системами.
- Возможность повторного вовлечения - возможность использовать push-уведомления для поддержания взаимодействия с пользователем.
- Устанавливается - предоставляет значки на главном экране без использования App Store.
- Возможность связывания - легко может быть передано через URL-адрес и не требует сложной установки.
Технические базовые критерии для того, чтобы сайт считался прогрессивным веб-приложением браузерами, были описаны Расселом в следующем посте: [21]
- Происходят из безопасного источника. Обслуживается по протоколу TLS и зеленым замкам (нет активного смешанного содержимого).
- Загружать в автономном режиме (даже если это настраиваемая автономная страница). Подразумевается, что прогрессивным веб-приложениям требуются работники службы.
- Ссылка на манифест веб-приложения по крайней мере с четырьмя ключевыми свойствами: name, short_name, start_url и display (со значением standalone или fullscreen).
- Иконка размером не менее 144 × 144 в формате PNG.
- Использование векторной графики, которая неограниченно масштабируется и требует меньшего размера файлов.
Некоторые прогрессивные веб-приложения используют архитектурный подход, называемый моделью оболочки приложения. [22] В этой модели сервис-воркеры хранят базовый пользовательский интерфейс или « оболочку » адаптивного веб-приложения для веб-дизайна в автономном кэше браузера . Эта модель позволяет PWA поддерживать нативное использование с подключением к Интернету или без него. Это может сократить время загрузки, предоставляя начальный статический фрейм , макет или архитектуру, в которые контент можно загружать как прогрессивно, так и динамически. [23]
Сравнение с родными приложениями [ править ]
В 2017 году Twitter выпустил Twitter Lite, альтернативу PWA официальным приложениям для Android и iOS . Согласно Twitter, Twitter Lite потреблял только 1-3% от размера собственных приложений. [24]
Технологии [ править ]
Существует множество широко используемых технологий для создания прогрессивных веб-приложений. Для всех PWA требуется как минимум сервисный работник и манифест. [25] [26] [27]
Манифест [ править ]
Веб - приложение манифеста [28] является W3C спецификации определения JSON -На манифест (обычно маркируется manifest.json) [20] , чтобы обеспечить разработчикам централизованное место для размещения метаданных , связанных с веб - приложением , в том числе:
- Название веб-приложения
- Ссылки на значки веб-приложений или объекты изображений
- Предпочтительный URL-адрес для запуска или открытия веб-приложения
- Данные конфигурации веб-приложения
- Ориентация веб-приложения по умолчанию
- Возможность установить режим отображения, например, полноэкранный
Эти метаданные имеют решающее значение для добавления приложения на главный экран или его включения в список вместе с собственными приложениями.
Поддержка iOS [ править ]
iOS Safari частично реализует манифесты, в то время как большая часть метаданных PWA может быть определена с помощью специфичных для Apple расширений метатегов. Эти теги позволяют разработчикам включать полноэкранный режим, определять значки и заставки, а также указывать имя для приложения. [29] [30]
WebAssembly [ править ]
WebAssembly позволяет запускать предварительно скомпилированный код в веб-браузере со скоростью, близкой к собственной. [31] Таким образом, библиотеки, написанные на таких языках, как C, могут быть добавлены в веб-приложения. Из-за стоимости передачи данных из JavaScript в WebAssembly в ближайшем будущем будет использоваться в основном обработка чисел (например, распознавание голоса и компьютерное зрение), а не целые приложения.
Хранение данных [ править ]
Контексты выполнения прогрессивных веб-приложений выгружаются всякий раз, когда это возможно, поэтому прогрессивные веб-приложения должны хранить большую часть долгосрочного внутреннего состояния (пользовательские данные, динамически загружаемые ресурсы приложения) одним из следующих способов.
Интернет-хранилище [ править ]
Веб-хранилище - это стандартный API W3C, который позволяет хранить ключ-значение в современных браузерах. API состоит из двух объектов: sessionStorage (который включает хранилище только для сеанса, которое стирается после завершения сеанса браузера) и localStorage (которое обеспечивает хранение, которое сохраняется между сеансами). [32]
Сервисные работники [ править ]
Service worker - это веб-воркер, который реализует программируемый сетевой прокси, который может отвечать на веб-запросы / HTTP-запросы основного документа. Он может проверять доступность удаленного сервера и кэшировать контент, когда этот сервер доступен, а затем передавать это содержимое в документ. Сервис-воркеры, как и любые другие веб-воркеры, работают отдельно от основного контекста документа. Сервис-воркеры могут обрабатывать push-уведомления и синхронизировать данные в фоновом режиме, кэшировать или извлекать запросы ресурсов, перехватывать сетевые запросы и получать централизованные обновления независимо от зарегистрированного документа, даже если этот документ не загружен. [33]
Сервисные работники проходят трехэтапный жизненный цикл регистрации, установки и активации. Регистрация включает в себя сообщение браузеру местонахождения сервисного работника при подготовке к установке. Установка происходит, когда в браузере для веб-приложения не установлен сервисный работник или если для сервис-воркера есть обновление. Активация происходит, когда все страницы PWA закрываются, чтобы не было конфликта между предыдущей версией и обновленной. Жизненный цикл также помогает поддерживать согласованность при переключении между версиями сервис-воркера, поскольку только один сервис-воркер может быть активным для домена. [33]
Индексированная база данных API [ править ]
Indexed Database API - это стандартный API базы данных W3C, доступный во всех основных браузерах. API поддерживается современными браузерами и позволяет хранить объекты JSON и любые структуры, представленные в виде строки. [34] API индексированной базы данных можно использовать с библиотекой-оболочкой, предоставляющей дополнительные конструкции вокруг него.
AppCache (устаревший) [ править ]
Кэш приложения (или AppCache, или манифест кеша HTML5) - это более ранняя технология, которая позволяла приложению заранее кэшировать контент для последующего использования, когда устройство находится в автономном режиме. [35] Он работает адекватно для одностраничных приложений, для которых он был разработан, но проблематично не работает для многостраничных приложений, таких как вики. [36] По состоянию на май 2019 года технология поддерживается основными браузерами и годами используется некоторыми сайтами, но она уже устарела в пользу сервис-воркеров и в конечном итоге будет удалена.
См. Также [ править ]
- HTML-приложение
- Богатое веб-приложение
- Мини-программа WeChat
Ссылки [ править ]
- ^ a b «Прогрессивные веб-приложения | Software AG» . techradar.softwareag.com . Проверено 25 сентября 2020 .
- ^ "Могу я использовать pwa?" . Можно ли использовать . Проверено 27 января 2021 года .
- ^ "Сервисный работник готов?" . Джейк Арчибальд.
- ^ a b c d Ньюман, Джаред (26 января 2021 г.). «Firefox просто ушел из ключевой части открытой сети» . Быстрая компания . Проверено 27 января 2021 .
- ^ Rzutkiewicz, Джейсон. «Почему прогрессивные веб-приложения - это будущее мобильного Интернета (исследование 2019 г.)» . YML . Проверено 4 октября 2019 года .
- ^ a b «Обзор прогрессивных веб-приложений в Windows» . Документация Microsoft Edge . 13 марта 2021 . Проверено 13 марта 2021 года .
- ^ Firtman, Максимилиано (2020-08-18). «Прогрессивные веб-приложения для iOS уже здесь 🚀» . Средний . Источник 2021-01-29 .
- ^ a b Ричи, Рене (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 .
- ^ a b Рассел, Алекс. «Прогрессивные веб-приложения: избегая вкладок, не теряя души» . Проверено 15 июня 2015 года .
- ^ a b c Эванс, Джонни (26 января 2018 г.). «Apple возвращается в будущее с веб-приложениями» . Компьютерный мир . Дата обращения 23 мая 2019 .
- ^ Ladage, Aaron (17 апреля 2018). «Прогрессивные веб-приложения уже здесь, и они меняют все» . ГРАД . Дата обращения 23 мая 2019 .
- ^ Лепаж, Пит (4 июня 2019). «Прогрессивные веб-приложения для настольных компьютеров» . Разработчики Google . Проверено 13 сентября 2019 .
- ^ agi90 (19 декабря 2020 г.). «Комментарий» . Reddit .
Насколько мне известно, у нас нет планов прекращать использование PWA на мобильных устройствах.
- ^ «Ваше первое прогрессивное веб-приложение | Основы Интернета - разработчики Google» . Ваше первое прогрессивное веб-приложение | Основы Интернета - разработчики Google . Проверено 17 июля 2016 .
- ^ Разработчики Google. «Прогрессивное веб-приложение» . Проверено 15 июня 2015 года .
- ^ a b W3C «Манифест веб-приложения», рабочий проект , получено 12 сентября 2016 г.
- ^ Рассел, Алекс. «Что именно делает прогрессивное веб-приложение» . Проверено 18 октября, 2016 .
- ^ «Модель оболочки приложения» .
- ^ Османи, Адди. «Модель оболочки приложения | Основы Интернета» . Разработчики Google . Дата обращения 23 мая 2019 .
- ^ «Как мы создали Twitter Lite» . blog.twitter.com . Проверено 27 января 2021 .
- ^ "Обнаруживаемый" . Сеть разработчиков 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 .
- ^ a b «Введение в Service Worker | Web» . Разработчики Google . 1 мая 2019 . Дата обращения 23 мая 2019 .
- ^ «Концепции, лежащие в основе IndexedDB» . MDN . Проверено 14 августа 2018 .
- ^ «Использование кеша приложения» . MDN . Mozilla . Проверено 14 августа 2018 .
- ^ «Кэш приложений - это тупица» . Список отдельно . Проверено 14 августа 2018 .