Настольные прогрессивные веб-приложения: крупный прорыв

Опубликовано: 2019-09-10

Оглавление

Говоря о прогрессивных веб-приложениях (PWA), мобильные приложения — это первое, что приходит на ум, поскольку так было всегда.

 Рекомендуемая литература: Что такое прогрессивное веб-приложение

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

Начиная с Chrome 70, пользователи теперь могут устанавливать настольные прогрессивные веб-приложения в Windows и Linux. После установки они запускаются из меню «Пуск» и работают так же, как и все другие установленные приложения, без адресной строки или вкладок.

Посмотреть этот пост в Instagram

Будучи почти неотличимым от нативных приложений, Progressive Web App (PWA) — это будущее Интернета с его функциями, подобными приложениям, одной из которых является возможность установки (добавление PWA на главный экран), которые потенциально могут революционизировать работу в Интернете. «Создайте PWA сегодня с SimiCart. . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsummit #chromedevsummit2019

Пост, опубликованный SimiCart (@simicart.official) на

И это не останавливается на этом . Основа гибридного PWA Microsoft Store закладывается шаг за шагом: в Microsoft Store прогрессивные веб-приложения теперь находятся на одном уровне с родными приложениями для Windows, что расширяет охват всей базы установки Windows 10, насчитывающей почти 700 миллионов человек. активных ежемесячных пользователей.

Понимание настольных PWA и почему это так важно

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

 Рекомендуемое чтение: 12 примеров прогрессивных веб-приложений для вашего вдохновения

Для краткого понимания настольного PWA вы можете представить, что настольное PWA похоже на онлайн-документ или документ Google , который работает с использованием веб-компонентов. Нативные настольные приложения, с другой стороны, похожи на Microsoft Word : они хороши, имеют небольшой размер и рассчитаны на бесперебойную работу. Причина, по которой настольные PWA сейчас популярны , заключается в том, что настольные PWA могут в значительной степени выполнять работу родного настольного приложения с гораздо более привлекательным интерфейсом и практически не занимают места на жестком диске.

Таким образом, настольные PWA:

  • Быстро — PWA предлагает немедленный, отзывчивый и в целом приятный опыт.
  • Возможность установки — PWA можно установить, как и любое другое родное приложение, и оно будет отображаться на рабочем столе или домашнем экране, а не в браузере. Установка PWA всегда выполняется мгновенно и имеет небольшой размер пакета.
  • Привлекательность — PWA использует лучшее руководство для высококачественного UX и пользовательского интерфейса, а также может работать независимо от состояния сети или возможностей устройства.

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

65% увеличение количества страниц за сеанс

На 75 % увеличилось количество отправленных твитов.

20% снижение показателя отказов

Первый выстрел, отметивший начальную стадию движения PWA, безусловно, был сделан Twitter. За этим следуют влиятельные бренды, такие как Spotify и Pinterest, с поспешностью и не менее исключительным качеством продукции:

Настольный Spotify и Pinterest PWA

Если вы пропустили это, у нас есть подробный обзор Spotify PWA. Выделяясь среди остальных, Spotify PWA поставляется с обновлением, которое радикально изменило пользовательский интерфейс, сделав его более персонализированным и адаптивным к потребностям пользователя — как и должен быть музыкальный проигрыватель.

Адаптивные цвета фона Spotify PWA

Pinterest также испытал несколько положительных улучшений в основных бизнес-показателях.

Затраты времени увеличились на 40 % по сравнению со старым мобильным веб-интерфейсом, доход от рекламы, создаваемой пользователями, вырос на 44 % , а основные взаимодействия — на 60 % .

Их новый мобильный веб-интерфейс — это шаг вперед по сравнению с монолитным веб-сайтом.

Они не только сократили свой JavaScript на сотни КБ, уменьшив размер основного пакета с 650 КБ до 150 КБ, но и улучшили ключевые показатели производительности. Первая осмысленная отрисовка сократилась с 4,2 до 1,8 с, а время до интерактивного взаимодействия сократилось с 23 до 5,6 с.

Читателям, которые заинтересованы в конкретном примере Pinterest PWA, мы настоятельно рекомендуем эту статью: Пример использования прогрессивного веб-приложения Pinterest.

Pinterest статистика PWA
Источник: PWAstats

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

Процесс установки настольного прогрессивного веб-приложения довольно прост и оптимизирован. Ваш самый важный шаг — найти правильный адрес PWA вашего приложения.

В нашем сегодняшнем уроке мы будем использовать Twitter в качестве примера настольного PWA:

Шаг 1. Используя Google Chrome версии 70 и выше, перейдите на страницу https://mobile.twitter.com/home.

Шаг 2. Проверьте, есть ли кнопка (+) в правом конце адресной строки.

Всплывающее окно установки Twitter PWA

или если в раскрывающемся меню есть опция « Установить Twitter ».

Вариант установки Twitter PWA

Шаг 3 : Нажмите « Установить », и процесс будет завершен мгновенно.

Шаг 4 : Запустите свежеустановленную PWA с рабочего стола.

рабочий стол-твиттер-значок
Значок Twitter на рабочем столе

Как удалить Progressive Web Apps на рабочем столе

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

Шаг 1. Откройте настольное PWA (в данном случае это Twitter ).

Шаг 2 : Выберите « Удалить Twitter …» в раскрывающемся меню.

Вариант удаления Twitter PWA

Шаг 3 : Установите или снимите флажок с предложенного варианта, а затем, наконец, нажмите « Удалить ».

Всплывающее окно удаления Twitter PWA

Вот и все! Ваше Twitter PWA теперь удалено с вашего компьютера всего за несколько простых шагов.

Заключительные замечания

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

Для онлайн-продавцов, которые ищут универсальное идеальное решение Magento Progressive Web App , здесь, в SimiCart, мы предлагаем полный пакет для вас и вашего магазина.

СОЗДАЙТЕ PWA С SIMICART