Electron app on android

Electron: разработка настольных приложений с использованием HTML, CSS и JavaScript

Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.

Electron

Electron — это фреймворк для разработки настольных приложений с использованием HTML, CSS и JavaScript. Такие приложения могут работать на различных платформах. Среди них — Windows, Mac и Linux.

В основе Electron лежат проекты Chromium и Node.js, объединённые в единую среду, обеспечивающую работу приложений. Это даёт возможность применять веб-технологии при разработке настольных программ.

Electron — серьёзный проект, который использован при создании множества популярных приложений. Среди них — мессенджеры Skype и Discord, редакторы для кода Visual Studio Code и Atom, а также — ещё более 700 приложений, сведения о которых опубликованы на сайте Electron.

Electron Forge

Для разработки приложения с использованием Electron этот фреймворк надо настроить. Это касается и тех случаев, когда в приложении планируется применять другие фреймворки или библиотеки, например — Angular, React, Vue, или что-то другое.

Инструмент командной строки Electron Forge позволяет серьёзно упростить процесс настройки Electron. Он даёт в распоряжение разработчика шаблоны приложений, основанных на Angular, React, Vue, и на других фреймворках. Это избавляет программиста от необходимости настраивать всё вручную.

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

Рассмотрим процесс разработки простого приложения на Electron с использованием Electron Forge.

Предварительная подготовка

Для того чтобы приступить к разработке Electron-приложений с использованием Electron Forge вам понадобится система с установленной платформой Node.js. Загрузить её можно здесь.

Для глобальной установки Electron Forge можно воспользоваться следующей командой:

Создание шаблонного приложения

Для того чтобы создать шаблонное приложение с использованием Electron Forge выполним следующую команду:

Эта команда инициализирует новый проект приложения, имя которого — simple-desktop-app-electronjs . На выполнение этой команды понадобится некоторое время. После того, как шаблонное приложение будет создано, запустить его можно так:

Здесь мы переходим в его папку и вызываем соответствующий npm-скрипт.

После этого должно открыться окно, содержимое которого похоже на то, что показано на следующем рисунке.

Окно приложения, созданного средствами Electron Forge

Поговорим о том, как устроено это приложение.

Структура шаблонного приложения

Материалы, из которых состоит шаблонное приложение, создаваемое средствами Electron Forge, представлены набором файлов и папок. Рассмотрим важнейшие составные части приложения.

▍Файл package.json

Этот файл содержит сведения о создаваемом приложении, о его зависимостях. В нём имеется описание нескольких скриптов, один из которых, start , использовался для запуска приложения. Новые скрипты в этот файл можно добавлять и самостоятельно.

В разделе файла config.forge можно найти специфические настройки для Electron. Например, раздел make_targets содержит подразделы, описывающие цели сборки проекта для платформ Windows ( win32 ), Mac ( darwin ) и Linux ( linux ).

В package.json можно найти и запись следующего содержания: «main»: «src/index.js» , которая указывает на то, что точкой входа в приложение является файл, расположенный по адресу src/index.js .

▍Файл src/index.js

В соответствии со сведениями, находящимися в package.json , основным скриптом приложения является index.js . Процесс, который выполняет этот скрипт, называется основным процессом (main process). Этот процесс управляет приложением. Он используется при формировании интерфейса приложения, в основе которого лежат возможности браузера. На нём же лежит ответственность за взаимодействие с операционной системой. Интерфейс приложения представлен веб-страницами. За вывод веб-страниц и за выполнение их кода отвечает процесс рендеринга (renderer process).

▍Основной процесс и процесс рендеринга

Цель основного процесса заключается в создании окон браузера с использованием экземпляра объекта BrowserWindow . Этот объект использует процесс рендеринга для организации работы веб-страниц.

У каждого Electron-приложения может быть лишь один основной процесс, но процессов рендеринга может быть несколько. Кроме того, можно наладить взаимодействие между основным процессом и процессами рендеринга, об этом мы, правда, здесь говорить не будем. Вот схема архитектуры приложения, основанного на Electron, на которой представлен основной процесс и два процесса рендеринга.

Архитектура Electron-приложения

На этой схеме показаны две веб-страницы — index.html и abcd.html . В нашем примере будет использоваться лишь одна страница, представленная файлом index.html .

▍Файл src/index.html

Скрипт из index.js загружает файл index.html в новый экземпляр BrowserWindow . Если описать этот процесс простыми словами, то оказывается, что index.js создаёт новое окно браузера и загружает в него страницу, описанную в файле index.html . Эта страница выполняется в собственном процессе рендеринга.

▍Разбор кода файла index.js

Код файла index.js хорошо прокомментирован. Рассмотрим его важнейшие части. Так, следующий фрагмент кода функции createWindow() создаёт экземпляр объекта BrowserWindow , загружает в окно, представленное этим объектом, файл index.html и открывает инструменты разработчика.

В готовом приложении строку кода, открывающую инструменты разработчика, имеет смысл закомментировать.

В коде этого файла часто встречается объект app . Например — в следующем фрагменте:

Объект app используется для управления жизненным циклом приложения. В данном случае после завершения инициализации Electron вызывается функция, ответственная за создание окна приложения.

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

Теперь, когда мы ознакомились со структурой Electron-приложения, рассмотрим пример разработки такого приложения.

Разработка настольного приложения — конвертера температур

В качестве основы для этого учебного приложения воспользуемся ранее созданным шаблонным проектом simple-desktop-app-electronjs .

Для начала установим пакет Bootstrap, воспользовавшись, в папке проекта, следующей командой:

Теперь заменим код файла index.html на следующий:

Вот как работает этот код:

1. Здесь создаётся текстовое поле с идентификатором celcius . Когда пользователь вводит в это поле некое значение, которое должно представлять собой температуру в градусах Цельсия, вызывается функция celciusToFahrenheit() .
2. Текстовое поле с идентификатором fahrenheit , также создаваемое в этом коде, принимает данные от пользователя, которые должны представлять собой температуру в градусах Фаренгейта, после чего вызывается функция fahrenheitToCelcius() .
3. Функция celciusToFahrenheit() конвертирует температуру, выраженную в градусах Цельсия и введённую в поле celcius , в температуру в градусах Фаренгейта, после чего выводит то, что у неё получилось, в поле fahrenheit .
4. Функция fahrenheitToCelcius() выполняет обратное преобразование — берёт значение температуры, выраженное в градусах Фаренгейта и введённое в поле fahrenheit , преобразует его в значение, выраженное в градусах Цельсия, после чего записывает то, что у неё получилось, в поле сelcius .

Две функции, о которых мы только что говорили, объявлены в файле renderer.js . Этот файл нужно создать в папке src и поместить в него следующий код:

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

Будем считать, что приложение готово. Испытаем его.

Запуск приложения

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

После её успешного выполнения будет открыто окно приложения со следующим содержимым.

Окно приложения-конвертера

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

Упаковка приложения

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

На выполнение этой команды системе понадобится некоторое время. После того, как её работа завершится, загляните в папку out , которая появится в папке проекта.

Эксперимент по разработке Electron-приложения, описанный здесь, проводился на компьютере, работающем под управлением ОС Windows. Поэтому в папке out была создана папка simple-desktop-app-electronjs-win32-x64 . В этой папке, кроме прочего, можно найти .exe -файл приложения. В нашем случае он называется simple-desktop-app-electronjs.exe . Для запуска приложения достаточно обычного двойного щелчка мышью по этому файлу.

Разберём имя папки, в которую попал исполняемый файл приложения. А именно, он построен по шаблону имя приложения — платформа — архитектура . В нашем случае его структура раскрывается так:

• Имя приложения — simple-desktop-app-electronjs .
• Платформа — win32 .
• Архитектура — x64 .

Обратите внимание на то, что при вызове команды npm run package без параметров, по умолчанию, создаётся исполняемый файл приложения для той платформы, которая используется в ходе разработки.

Предположим, вам нужно упаковать приложение для какой-то другой платформы и архитектуры. Для этого можно воспользоваться расширенным вариантом вышеописанной команды. Структура этой команды выглядит так:

Например, для того чтобы сформировать пакет приложения для Linux, можно воспользоваться следующей командой:

После завершения её работы в папке проекта out появится директория simple-desktop-app-electronjs-linux-x64 с соответствующим содержимым.

Создание установочных файлов приложений

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

Результаты её работы окажутся в уже знакомой вам папке out . А именно, запуск этой команды в вышеприведённом виде на Windows-машине приведёт к созданию установочного файла приложения для Windows в папке out\make\squirrel.windows\x64 . Как и команда package , команда make , вызванная без параметров, создаёт установщик для платформы, используемой при разработке.

Итоги

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

Уважаемые читатели! Пользуетесь ли вы фреймворком Electron для разработки настольных приложений?

Источник

Превращаем SoundCloud в мобильное приложение с помощью крутейшего JS-фреймворка Electron

Содержание статьи

Xakep #215. Второй фактор

Electron позволяет создавать кросс-платформенные приложения для настольных компьютеров с использованием чистого JavaScript . Поддерживаются основные операционные системы: macOS, Linux, Windows. Он сочетает в себе лучшие стороны Node.js и Chromium , но при этом ориентирован на разработку десктопных приложений.

Само собой напрашивается сравнение Electron с проектом Cordova , который аналогичным образом позволяет превратить веб-приложение в мобильное приложение для основных мобильных платформ. Так когда же нам может пригодиться именно Electron ? Варианты следующие:

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

Что будем делать

Мы возьмем готовый виджет, «обернем» его в приложение Electron и добавим стандартные элементы интерфейса операционной системы, такие как иконка в области уведомлений, стандартные системные диалоги, вызов внешнего приложения, главное меню, горячие клавиши.

Для наших экспериментов возьмем готовый виджет платформы SoundCloud , популярной площадки для публикации музыкальных композиций и другого аудиоконтента. Этот виджет обладает несложным API, да и можно будет немного поразвлечься прослушиванием музыки. Мы превратим его в простой проигрыватель для настольного компьютера с привычными элементами управления.

Подготовка

Иконки

Для приложения нам понадобится несколько иконок. Я брал их из набора ie_Bright с сайта iconfinder.com; можно взять другие на свой вкус. Для изображений, используемых для иконки в области уведомлений под Windows , рекомендуются файлы .ico , но мы для простоты возьмем только PNG-файлы.

Имя файла	Назначение	Изображение
player.png	Иконка приложения	player.png
play.png	Начать проигрывание	play.png
pause.png	Приостановить	pause.png
prev.png	Предыдущая композиция	prev.png
next.png	Следующая композиция	next.png

Поместим иконки в подкаталог assets/img/ проекта.

Node.js

Предполагается, что на компьютере установлен Node.js версии не ниже 6.6; загрузить ее можно здесь.

Операционная система

Примеры подготовлены для выполнения на компьютере, работающем под управлением ОС Linux и macOS.

Минимальное приложение Electron

Начнем с создания минимального приложения Electron. Для этого создадим каталог проекта, например electron-demo , и перейдем в него:

Добавим в наш проект два файла — минимальный index.html , который будет основным интерфейсом нашего приложения:

и index.js со следующим содержимым:

Инициализируем файл package.json проекта менеджера пакетов npm , ответив на необходимые вопросы.

Нужно проверить, что в package.json , получившемся в результате, значение свойства main равно main.js (соответствует значению, введенному при запросе entry point во время выполнения команды npm init ), в противном случае его необходимо скорректировать вручную, чтобы оно соответствовало имени главного .js -файла проекта.

Electron можно установить только для нашего проекта:

Пора запускать! Если Electron был установлен локально, это делается следующей строкой (если он был установлен глобально, путь указывать необязательно):

Через несколько мгновений откроется окно нашего первого приложения.

Первое приложение

Обрати внимание, что сразу же открыто привычное окно DevTools . Заголовок и текст окна соответствуют заданным; кроме того, у приложения есть типовое главное меню.

Виджет SoundCloud

Виджет SoundCloud встраивается в веб-страницу как IFrame и позволяет проигрывать отдельные композиции с сайта SoundCloud или их списки. Он предоставляет базовый интерфейс для управления проигрыванием и разнообразную информацию о композиции.

API виджета

Методы виджета

Из методов API виджета для управления проигрыванием мы будем использовать следующие:

• play — начать проигрывание композиции;
• pause — приостановить проигрывание композиции (пауза);
• toggle — переключить проигрывание / приостановка;
• prev — перейти к предыдущей композиции (для списка);
• next — перейти к следующей композиции (для списка);
• bind — добавить обработчик события виджета.

В числе прочих методов: skip , load , seekTo , setVolume , unbind .

События виджета

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

Аудиособытия связаны с проигрываемой композицией и уведомляют об изменениях ее состояния в проигрывателе, передавая объект с информацией о текущей позиции в проигрываемом файле или прогрессе загрузки ( relativePosition , loadProgress , currentPosition ).
События пользовательского интерфейса виджета уведомляют о действиях пользователя, не связанных напрямую с проигрыванием композиции.

Мы используем следующие события:

• READY — виджет загрузил данные и готов принимать внешние вызовы;
• PLAY — начато проигрывание композиции;
• PAUSE — проигрывание композиции приостановлено.

Остальные события: LOAD_PROGRESS , PLAY_PROGRESS , FINISH , SEEK , CLICK_DOWNLOAD , OPEN_SHARE_PANEL , ERROR .

Дополнительно можно получить информацию о текущем состоянии виджета с помощью методов getVolume , getDuration , getPosition , getSounds , getCurrentSound , getCurrentSoundIndex , isPaused . Информация возвращается в callback-функции. Из них нам понадобится метод getCurrentSound , возвращающий информацию о текущей композиции.

Добавление виджета на страницу

Для того чтобы отобразить на нашей странице виджет SoundCloud , внутри элемента добавим элемент , в котором загрузится сам виджет:

Полный список параметров виджета приведен здесь: SoundCloud Player Widget — Customize Parameters (для предыдущей версии, использующей Flash ).

Для выбора композиции или их списка и настройки визуального представления виджета можно нажать кнопку Share на понравившемся списке композиций (если выбрана отдельная композиция, то будет невозможно перемещаться к следующей/предыдущей композиции), выбрать закладку Embed и скопировать предлагаемый код; установив галочку More Options , можно настроить несколько дополнительных параметров.

Можем перезапустить приложение, чтобы убедиться, что виджет действительно загрузился внутри нашего приложения.

Инициализация API виджета SoundCloud

Для доступа к API виджета необходимо добавить в тег загрузку следующего сценария:

Туда же добавим загрузку файла, в котором будут размещаться основные функции браузерной части приложения:

А тег дополним кнопками управления проигрыванием:

Создадим файл soundcloud.js , добавив в него функцию, которая будет выполняться при загрузке окна браузера:

И собственно вызов этой функции по событию window onload :

Теперь при запуске приложения в консоль должен быть выведен объект widget .

Методы и события API виджета SoundCloud

Привяжем методы виджета, предназначенные для управления проигрыванием композиции, напрямую к кнопкам управления на странице (в функции initSC ):

Теперь кнопки на форме начнут управлять виджетом и информация о событиях будет выводиться в консоль.

Также добавим вывод в консоль уведомлений о событиях виджета:

Добавим обработчик события виджета READY , в котором должна располагаться основная логика взаимодействия с ним. Внутри него добавим обработчик события начала проигрывания композиции PLAY , в котором запросим и выведем информацию о текущей композиции и доступную информацию о состоянии виджета:

Иконка в области уведомлений

Добавление иконки в область уведомлений

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

Под Linux отображение иконки в области уведомлений имеет свои особенности и зависит от конкретного дистрибутива. Подробнее о работе с областью уведомлений — здесь.

Модификация главного меню

Хотя мы не задавали главное меню, Electron автоматически создал его для приложения с набором пунктов по умолчанию. Это меню можно как полностью переопределить, так и модифицировать. Для примера дополним главное меню приложения новым пунктом, добавив в main.js :

Контекстные всплывающие меню

Кроме главного меню приложения и меню иконки в области уведомлений, можно создавать и контекстные всплывающие меню, открывающиеся при нажатии на правую кнопку мыши на веб-странице по событию contextmenu объекта window .

Дополнительная информация по объектам Menu и MenuItem с примерами доступна по ссылкам: Menu и MenuItem.

Процессы и обмен данными между ними

Пора познакомиться с архитектурой приложения Electron . В нем выполняется два типа процессов: Main Process и Renderer Process . Main Process — главный процесс, который выполняет сценарий, указанный в поле main файла package.json (по умолчанию равный main.js ). Главный процесс создает объекты типа BrowserWindow , отображающие веб-страницы, из которых строится интерфейс приложения. Каждая веб-страница выполняется в отдельном процессе, называемом Renderer Process .

Поскольку окно браузера выполняется в Renderer Process , а основной процесс, взаимодействующий с областью уведомлений, — в Main Process , напрямую обращаться к одному из другого невозможно.

Один из методов организации взаимодействия между процессами в Electron — объекты ipcMain и ipcRenderer , используемые в основном процессе Main Process и процессе (или процессах) Renderer Process , отрисовывающем веб-страницу. С помощью их методов send и sendSync процессы могут обмениваться синхронными и асинхронными сообщениями. Обработчику сообщения в процессе-получателе первым параметром передается объект event с двумя свойствами, returnValue и event.sender . С помощью первого из них обработчик синхронного сообщения может вернуть результат отправителю; второй хранит отправителя сообщения, и асинхронный обработчик может вернуть результат, отправив сообщение с помощью event.sender.send() .

Другой вариант организовать взаимодействие между процессами — модуль remote , который позволяет обмениваться данными в стиле вызовов RPC, вызывая методы другого процесса. В main.js , в описании выпадающего меню иконки области уведомлений (вызов метода Menu.buildFromTemplate() ), изменим обработчики нажатия на пункты меню с вывода в консоль на отправку сообщений следующим образом:

В файле soundcloud.js подключим объекты ipcRenderer из модуля electron первой строкой внутри основной функции initSC :

И добавим в этом же файле, в конце обработчика события SC.Widget.Events.READY , обработчики этих событий:

Теперь при получении сообщений do-play и do-pause будут вызываться соответствующие методы виджета и мы можем управлять виджетом из области уведомлений.

Добавим передачу уведомлений в обратную сторону, о событиях виджета. Добавим в конце callback-функции widget.getCurrentSound строку, которая отправит сообщение sc-play главному процессу в момент начала новой композиции с информацией о ее авторе и названии:

В конце обработчика события SC.Widget.Events.READY добавим обработку события SC.Widget.Events.PAUSE , при его получении уведомив об этом главный процесс сообщением sc-pause .

В main.js добавим функцию, изменяющую иконку для области уведомлений:

и обработчики наших событий sc-play и sc-pause :

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

Создание всплывающих уведомлений в Electron реализуется через обычный Notifications API браузера. Единственное отличие — у пользователя не будет запрашиваться разрешение о выводе уведомлений.

Для отображения уведомления необходимо создать объект типа Notification , вызвав его конструктор с текстом заголовка и параметрами, в числе которых иконка, текст уведомления и флаг разрешения звукового оповещения при отображении уведомления. Так как мы проигрываем музыкальную композицию, звук нужно будет отключить. Создадим файл notification.js , который будет выводить само уведомление и вызывать callback при клике на уведомлении:

Подключим этот модуль, добавив в первые строки функции initSC файла soundcloud.js :

И вызов этой функции внутри обработчика события SC.Widget.Events.PLAY виджета; ее callback передаст сообщение sc-open главному процессу, уведомив его о том, что пользователь кликнул на уведомлении:

Системные диалоги и запуск внешнего приложения

В основном процессе при нажатии на уведомление мы будем открывать в браузере по умолчанию страницу с текущей композицией.
Для этого используем функцию shell.openExternal() . Она выполняет действие по умолчанию для типа данных, переданных в качестве параметра. Если этой функции будет передан URL, откроется окно браузера по умолчанию, который загрузит страницу, соответствующую этому URL.

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

Для демонстрационного примера мы ограничимся запросом пользователя на разрешение выполнения данного действия. Отображение системных диалогов реализуется с помощью метода showMessageBox() объекта dialog . Всего доступно четыре диалоговых окна; кроме showMessageBox() , есть еще showOpenDialog и showSaveDialog для стандартных диалоговых окон открытия и сохранения файла и showErrorBox . Документация по объекту dialog приведена здесь.

Добавим в main.js обработчик сообщения sc-open , отправляемого окном браузера при клике пользователя на уведомлении:

Внешний вид приложения

Обработка глобальных горячих клавиш

Зарегистрируем горячую клавишу Control + Shift + P ( Command + Shift + P под macOS ) для начала или приостановки проигрывания композиции.

Добавим в main.js :

Модификатор CommandOrControl соответствует клавише Command под macOS и Control под Linux и Windows .

Добавим в файл soundcloud.js рядом с обработчиками сообщений do-play и do-pause вызов метода виджета widget.toggle() при получении события do-toggle (обработчик события SC.Widget.Events.READY ):

Полный список обозначений клавиш и модификаторов приведен в документации здесь.

Блокировка открытия новых окон и навигации

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

Ограничим действия пользователя — заблокируем открытие нового окна и навигацию, вызвав для этого метод событий preventDefault() внутри обработчиков событий new-window и will-navigate объекта win.webContent следующим образом (в конце функции createWindow файла main.js , под объявлением переменной webContents ):

Предотвращение закрытия главного окна приложения

Кроме события closed , вызываемого при закрытии окна, у окна есть событие close , которое вызывается перед закрытием окна, и, если вызвать его метод preventDefault() , окно закрыто не будет.

Добавим в начале файла main.js переменную preventClose — флаг, определяющий, можно ли закрывать главное окно приложения:

Добавим внутри функции createWindow файла main.js блокировку закрытия окна, если установлен флаг preventClose :

И в конце файла main.js определим обработчик события app.on(‘before-quit’) , вызываемого при попытке завершить приложение в целом (в нашем случае будет вызвано при выборе пункта меню Quit ):

Безопасность

Мы уже затрагивали вопросы безопасности, когда открывали в браузере URL, полученный с сервера, выполняя для него действие по умолчанию. Каждый раз, когда код, полученный с удаленного ресурса, выполняется локально, существует риск злонамеренного доступа к локальным ресурсам. В связи с этим настоятельно советуем почитать замечания о безопасности в Electron.

Возможности фреймворка

В числе других возможностей интеграции с интерфейсом операционной системы: список последних документов (Windows и macOS), меню приложения для док-панели macOS, объявление списка пользовательских задач приложения в Windows, миниатюры списка задач Windows, добавление ссылок в панель запуска Unity (Linux), индикатор хода выполнения, накладной значок и подсветка кнопки приложения на панели задач Windows, перетаскивание файлов из окна Electron .

Среди системных возможностей — доступ к информации об изменении состоянии монитора питания, блокировка перехода в спящий режим, получение информации об экране и изображения на экране, получение уведомлений об изменении статуса сетевого подключения (онлайн/офлайн) и многое другое.

Альтернативы

Конкурирует с Electron проект NW.js, ранее носивший название node-webkit .

Electron обладает встроенным механизмом автоматических обновлений autoUpdater. Реализован и механизм автоматической отправки отчетов о падениях приложения на удаленный сервер с помощью объекта crashReporter.

Александр Лыкошин

Директор продуктового направления компании «Телигент». Член ACM, IEEE, IEEE Communications Society, IEEE Computer Society. Преподает в МЭСИ на кафедре АСОИУ Института компьютерных технологий.

Источник