Image for post
Image for post

До свидания, Electron. Здравствуйте, настольные PWA

Nikita
Nikita
Nov 29, 2018 · 5 min read

Новшества Chrome v70

Свежая версия Chrome (v70) поддерживает настольные прогрессивные веб-приложения (Desktop Progressive Web Apps, PWA) на платформах Linux и Windows.

Image for post
Image for post
Поддержка настольных PWA в Chrome
Image for post
Image for post
Поддержка настольных PWA в MacOS

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

В особые подробности, касающиеся PWA, мы тут вдаваться не будем. Вот раздел документации Google, в котором можно почитать о них. Для того чтобы своими глазами увидеть PWA и попробовать их в деле, откройте Chrome для Android или Safari в iOS (тут, правда, поддерживаются не все возможности PWA) и посмотрите эти примеры. А вот — выступление на эту тему с Google I/O ‘18.

Что такое Electron?

Electron — это платформа, которая позволяет разработчикам создавать кросс-платформенные настольные приложения с использованием JavaScript, HTML и CSS. Здесь же используются некоторые замечательные JavaScript-библиотеки и фреймворки. Это облегчает веб-программистам вхождение в разработку настольных приложений. Приложения, основанные на Electron, в последние годы приобрели огромную популярность. В рамках таких проектов, как Slack, VS Code, Atom, Discord, вложены немалые силы в разработку приложений с использованием Electron. Если вам эти проекты не знакомы, то вам, определённо, стоит взглянуть на соответствующие приложения и сервисы. Традиционные настольные приложения нередко казались какими-то неуклюжими, элементы их интерфейсов выглядели как нечто устаревшее. Electron, определённо, принёс красоту и изящество в мир настольных приложений.

При чём тут PWA?

Хотя Electron-приложения — это растущее и развивающееся явление, и их реализация близка к реализации веб-приложений, у них, всё же, есть некоторые минусы. Во-первых, такие приложения используют собственные экземпляры браузера Chromium. Многие знают о том, сколько оперативной памяти нужно для работы Chrome. Теперь, для того, чтобы оценить ситуацию, возникающую в системе при одновременном запуске нескольких Electron-приложений, надо взять их количество и умножить на этот объём памяти. Если интересно — откройте несколько Electron-приложений и посмотрите на то, сколько памяти они потребляют.

Image for post
Image for post
Приглашение на установку PWA
Image for post
Image for post
Значок для запуска PWA
Image for post
Image for post
Запущенное PWA

Пример PWA

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

  • У него должен быть установленный сервис-воркер с как минимум одним обработчиком fetch.
  • Оно должно содержать правильно оформленный файл manifest.json.
  • Его страницы должны быть спроектированы с использованием методики отзывчивого дизайна.

Дополнительные примеры

Если вы работаете на MacOS, то PWA могут счесть, что установить их вы не сможете, и не покажут вам приглашение для их установки. Если включить соответствующие флаги и повозиться с консолью разработчика, можно добиться от PWA того, что они приглашение на установку выведут. Вот некоторые из существующих PWA, которые удалось установить на Mac.

Starbucks

Компания Starbucks вложила немало сил в разработку отличного PWA. Их настольное приложение получилось прямо-таки впечатляющим.

Image for post
Image for post
PWA Starbucks

Google Maps

Это — просто замечательное приложение. Оно делает своё дело и не особенно сильно нагружает систему, отличаясь быстрой работой и отзывчивым дизайном. Для установки этого приложения нужно исхитриться и загрузить мобильный сайт Google Maps.

Image for post
Image for post
PWA Google Maps

Twitter

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

Image for post
Image for post
PWA Twitter

Итоги

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

  • Уведомления на значках приложений: показ уведомлений на значках запуска настольных приложений, так же, как это делается на значках мобильных приложений.
  • Поддержка горячих клавиш: возможность прослушивания событий клавиатуры для использования внутри приложений горячих клавиш.

WebbDEV

Web-разработка.

Nikita

Written by

Nikita

Web-Developer

WebbDEV

WebbDEV

Web-разработка. Статьи для Backend и Frontend разработчиков, программирование, новости и многое другое. https://t.me/webb_dev

Nikita

Written by

Nikita

Web-Developer

WebbDEV

WebbDEV

Web-разработка. Статьи для Backend и Frontend разработчиков, программирование, новости и многое другое. https://t.me/webb_dev

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store