Что такое прогрессивные веб-приложения и как их установить?

Что такое прогрессивные веб-приложения и как их установить?

В вашем телефоне преобладают приложения. Долгое время приложения не влияли на ваш рабочий стол или браузер таким же образом. Ситуация изменилась за последние годы. Прогрессивные веб-приложения (PWA) становятся все популярнее и меняют наше взаимодействие со всеми видами веб-сайтов.





Но что такое прогрессивное веб-приложение? Что делает PWA, чего не делает веб-сайт? Вот что вам нужно знать о Progressive Web Apps.



Что такое прогрессивное веб-приложение?

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





Что же тогда определяет PWA?

  • Универсальный : PWA должен работать без проблем (ну, почти) для каждого пользователя, независимо от его браузера.
  • Отзывчивый : PWA должны работать с любым устройством, например с ноутбуком, планшетом, смартфоном и т. Д.
  • Дизайн : дизайн должен имитировать нативные мобильные приложения, то есть упрощенные, легкие для поиска меню с простой интерактивностью для расширенных функций.
  • Безопасно : PWA должны использовать HTTPS для обеспечения безопасности пользовательских данных.
  • Обнаруживаемый: пользователи могут найти PWA, и их легко идентифицировать как приложение (а не как «сайт»).
  • Обручение: PWA должен иметь доступ к встроенным функциям взаимодействия, таким как push-уведомления.
  • Обновления: PWA остаются в актуальном состоянии, обслуживая последние версии службы или сайта.
  • Установка: позволяют пользователям легко «установить» PWA на свой домашний экран без необходимости в магазине приложений.
  • Обмен: Для PWA требуется только один URL-адрес без какой-либо установки.

Как видите, PWA стремятся предоставить пользователям полный опыт работы с веб-сайтом с оптимизированными функциями и дизайном интерфейса нативного приложения.



Как работает прогрессивное веб-приложение?

Ключ к прогрессивным веб-приложениям - это работники служб браузера.

Service worker - это сценарий, который запускается в фоновом режиме вашего браузера, «отдельно от веб-страницы, открывая двери для функций, которые не нуждаются в веб-странице или взаимодействии с пользователем». Вы можете использовать сервис-воркеров, например push-уведомления и фоновая синхронизация на данный момент, но ближайшее будущее PWA даст этим скриптам больше возможностей.



Таким образом, сервис-воркеры составляют основу стандарта PWA, используя веб-кеш для почти мгновенных результатов.

До появления сервис-воркеров скриптом кеширования браузера был Application Cache (или App Cache). Кэш приложений поддерживает широкий спектр офлайн-сервисов, но в некоторой степени подвержен ошибкам. Кроме того, у App Cache есть несколько хорошо известных ограничений, например Список отдельно объясняет.



Но основная проблема для разработчиков - это отсутствие прямого взаимодействия с тем, как именно работает AppCache, что мешает разработчикам точно исправлять проблемы по мере их возникновения. В свою очередь, сайты и сервисы с полной автономной функциональностью были рискованным выбором.

Однако работники сферы обслуживания существуют только до тех пор, пока от них требуется их действие. В PWA, когда вы щелкаете что-то или используете функцию, работник службы начинает действовать. Service worker (помните, что это сценарий) обрабатывает событие, решая, сможет ли автономный кеш выполнить запрос. Идея состоит в том, что PWA может выбирать из нескольких автономных кешей, что дает гораздо более широкий спектр автономных функций.

Кроме того, кеш предназначен не только для повышения скорости работы в автономном режиме. Например, вы направляетесь в PWA, но ваше соединение очень неоднородно. Сервисный работник обслуживает предыдущий кеш, полностью функционирующий, не отвлекая вас от работы.

Поддержка прогрессивного браузера веб-приложений

Есть два требования для использования прогрессивного веб-приложения: совместимый браузер и служба с поддержкой PWA.

Сначала посмотрим на браузеры. У вас есть два варианта проверить поддержку браузера PWA. Первый - Джейк Арчибальд Готов ли обслуживающий работник? ? который легко отображает состояние готовности основных браузеров к PWA, а также Интернет от Samsung.

Для более подробного обзора поддержки браузера PWA вы должны проверить Могу ли я использовать , веб-сайт, который специализируется на перечислении реализации различных веб-технологий и браузерных технологий по версиям браузеров. Например, если вы введете «сервисных воркеров» в строку поиска, вы найдете таблицу, отображающую номер версии, с которой каждый браузер реализовал сервисных воркеров PWA.

Таблица Can I Use Service Workers подтверждает, что все основные браузеры поддерживают PWA. Он также иллюстрирует поддержку PWA для нескольких альтернативных настольных браузеров и мобильных браузеров.

Разбив его еще немного:

  • Настольный браузер (полная поддержка): Chrome, Firefox, Opera, Edge, Safari
  • Настольный браузер (частичная поддержка / устаревшая версия): Браузер QQ, Браузер Baidu
  • Мобильный браузер (полная поддержка): Chrome, Firefox, Safari, Браузер UC, Интернет Samsung, Браузер Mint, Wechat
  • Мобильный браузер (частичная поддержка / устаревшая версия): Браузер QQ, Браузер Android, Opera Mobile

Итак, все основные браузеры поддерживают PWA. Microsoft Edge и Safari - самые последние дополнения к полному списку поддержки. И наоборот, и QQ Browser, и Baidu Browser теперь используют устаревшие версии и, таким образом, перешли на второй уровень.

Как найти и установить прогрессивное веб-приложение

Теперь, когда вы знаете, какой браузер использовать, вы можете подумать о поиске и установке PWA. В этом примере я буду использовать Samsung Galaxy S8 с Google Chrome.

Прогрессивные веб-приложения повсюду. Многие компании адаптировали свои сайты и сервисы, чтобы предлагать версию Progressive Web App. Во многих случаях вы впервые столкнетесь с PWA, когда перейдете на домашнюю страницу или мобильный сайт службы, который запускает Добавить на домашний экран чат.

Посмотрите видео ниже, чтобы узнать, что происходит, когда вы посещаете Мобильный сайт Twitter .

Конечно, посещение бесчисленных сайтов в надежде увидеть триггер на главном экране бесполезно. На самом деле, на это уходит много времени. К счастью, вам не нужно этого делать, так как есть несколько сайтов, посвященных каталогизации PWA.

Первая попытка перехлестывать . В нем перечислены довольно приличные PWA, с часто появляющимися новыми вариантами. Затем попробуйте pwa.rocks. У него меньший выбор, но есть несколько удобных PWA, которые вы захотите добавить на свое устройство.

Кроме того, в январе 2019 года Chrome 72 для Android поставлялся с функцией Trusted Web Activity (TWA). TWA позволяет вкладкам Chrome открываться в автономном режиме. В свою очередь, это позволяет PWA размещать в магазине приложений Google Play. Первые несколько PWA, появившихся в Google Play, были Twitter Lite , Instagram Lite и Google Maps Go , со временем появятся и другие.

Галерея изображений (2 изображения) Расширять Расширять Закрывать

Заменят ли прогрессивные веб-приложения нативные приложения?

Прогрессивные веб-приложения - это отличный гибрид между вашим браузером и собственным мобильным приложением. Будут ли PWA полностью заменены нативными приложениями? С моей стороны это твердое «нет». PWA - отличное легкое предложение, но, учитывая, что в настоящее время они в основном сосредоточены на репликации существующих сайтов и сервисов, они не заменят нативные приложения.

По крайней мере, пока.

запустить Mac OS на Windows 10

Однако PWA действительно работают. Данные, доступные в PWA Stats, тоже подтверждают это. Вот несколько интересных цифр, которые иллюстрируют, как PWA меняют наше взаимодействие с часто используемыми веб-сайтами:

  • Trivago увеличила вовлеченность пользователей, добавляющих PWA на домашний экран, на 150%.
  • Домашняя страница Forbes «PWA» полностью загружается всего за 0,8 секунды, в то время как количество показов за одно посещение увеличивается на 10 процентов. PWA Forbes также увеличил длину пользовательских сессий вдвое.
  • В Twitter Lite количество страниц за сеанс выросло на 65%, а количество твитов - на 75%. Он также интерактивен «менее чем за 5 секунд по сети 3G».
  • В Alibaba количество мобильных конверсий увеличилось на 76%.

PWA еще не стали популярными. Но благодаря огромному спектру преимуществ, которые они предоставляют, например, экономии места на вашем устройстве, вы услышите о них больше в будущем.

Делиться Делиться Твитнуть Эл. адрес Руководство по анимации речи для новичков

Оживить речь может быть непросто. Если вы готовы начать добавлять диалог в свой проект, мы разберем этот процесс за вас.

Читать далее Похожие темы Об авторе Гэвин Филлипс(Опубликовано 945 статей)

Гэвин - младший редактор отдела Windows and Technology Explained, постоянный участник Really Useful Podcast и регулярный обозреватель продуктов. У него есть степень бакалавра (с отличием) в области современного письма с использованием методов цифрового искусства, разграбленных на холмах Девона, а также более десяти лет профессионального писательского опыта. Он любит много пить чая, настольные игры и футбол.

Ещё от Gavin Phillips

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться