Документация Electron

Docs / Guides / Установка v12.0.4

Установка

To install prebuilt Electron binaries, use npm . Предпочтительным методом является установка Electron в качестве зависимости для разработки в вашем приложении :

Смотри документацию к версиям Electron, чтобы узнать, как управлять версиями Electron в приложении.

Глобальная установка

Ты можешь установить команду electron в переменной окружения $PATH :

Настройка

Если хочешь изменить архитектуру загружаемого контента (например, i32 на компьютере с x64 ), можно использовать аргумент —arch при установке или использовать переменную окружения npm_config_arch :

Так же можно менять платформу приложения (например, win32 или linux ) при помощи аргумента —platform :

Полномочия

Если вам нужно использовать HTTP-прокси, необходимо установить переменную ELECTRON_GET_USE_PROXY в любое значение , плюс дополнительные переменные окружения в зависимости от версии узла вашей системы:

Пользовательские зеркала и кэши

During installation, the electron module will call out to @electron/get to download prebuilt binaries of Electron for your platform. если она указана в списке релиза ( https://github.com/electron/electron/releases/tag/v$VERSION , где $VERSION — версия Electron).

Если доступа к GitHub нет или нужна другая сборка, можно задать зеркало или папку кеша.

Зеркало

Можно использовать переменную окружения, чтобы переопределить базовый URL, по которому ищутся бинарники или имена файлов. URL-адрес, используемый @electron/get составлен следующим образом:

Например, использовать зеркало CDN в Китае:

По умолчанию, ELECTRON_CUSTOM_DIR установлен в v$VERSION Чтобы изменить формат, используйте плейсхолдер << version >> . Например, версия —<< version >> преобразуется в версию-5.0. , << version >> решит 5.0. и v<< version >> эквивалентны по умолчанию. В качестве более конкретного примера использовать не-CDN в Китае зеркало:

Вышеприведенная конфигурация будет загружена с URL-адресов, таких как https://npm.taobao.org/mirrors/electron/8.0.0/electron-v8.0.0-linux-x64.zip .

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

Linux: $XDG_CACHE_HOME или

/Library/Caches/electron/
Windows: $LOCALAPPDATA/electron/Cache или

В старом Electron возможно использование папки

Вы также можете переопределить местоположение локального кэша, указав переменную окружения electron_config_cache .

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

Пропустить загрузку бинарных файлов

При установке Электрона пакета NPM автоматически загружается двоичный файл электрона.

Иногда это может быть ненужным, например, в среде CI при тестировании другого компонента.

Чтобы предотвратить загрузку бинарного файла при установке всех зависимостей npm, вы можете установить переменную окружения ELECTRON_SKIP_BINARY_DOWNLOAD . Например:

Устранение проблем

При выполнении команды npm install electron , некоторые пользователи сталкиваются с проблемами установки.

В большинстве случаев, эти ошибки являются результатом проблем сети и не связаны с npm пакетом electron . Такие ошибки, как ELIFECYCLE , EAI_AGAIN , ECONNRESET и ETIMEDOUT возникают в результате проблем с сетью. Лучшее решение — попытаться переключить сеть, или немного подождать, и попытаться установить снова.

You can also attempt to download Electron directly from electron/electron/releases if installing via npm is failing.

If installation fails with an EACCESS error you may need to fix your npm permissions.

If the above error persists, the unsafe-perm flag may need to be set to true:

На слабой сети следует использовать аргумент —verbose , чтобы задействовать замедленную загрузку:

Если нужно перезагрузить файлы без кеша, нужно использовать переменную окружения force_no_cache = true .

Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Первое десктопное приложение на HTML, JS и Electron

Данный материал является вольным переводом статьи:
Danny Markov Creating Your First Desktop App With HTML, JS and Electron

Материал вычитывал: Михаил Синяков

Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.

Существуют два самых популярных проекта с открытым исходным кодом, позволяющих сделать это. Это NW.js и Electron, последний мы и будем рассматривать сегодня. Мы собираемся переписать версию, которую делали на NW.js, так что вы сможете еще и сравнить их между собой.

Начинаем работу с Electron

Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.

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

Глядя на структуру файлов вы никогда бы не догадались что это десктопное приложение, а не просто веб сайт.

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

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

Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.

Откройте терминал и выполните в директории проекта следующую команду:

Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:

Приложение должно открыться в новом окне, обратите внимание, что оно имеет только верхнее меню и больше ничего.

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

Как это сделано

Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.

package.json

Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду npm start которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.

main.js

Давайте взглянем на то, что мы делаем в методе ready . Сначала мы определяем окно браузера и устанавливаем его первоначальный размер. Затем мы загружаем в него файл index.html, который работает точно так же, как если бы мы открыли его в браузере.

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

index.html

Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.

Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.

Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:

• JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
• Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
• Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.

С их помощью наше приложение готово к работе!

Упаковка и дистрибуция.

Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.

Документация Electron

Docs / Guides / Краткое руководство по запуску v12.0.4

Краткое руководство по запуску

Быстрый старт

Electron — это фреймворк, который позволяет создавать настольные приложения с помощью JavaScript, HTML и CSS. Затем эти приложения можно упаковать для запуска непосредственно в macOS, Windows или Linux или распространять через Mac App Store или Microsoft Store.

Обычно вы создаете десктопное приложение для операционной системы (ОС) с использованием специфических для каждой операционной системы системных приложений. Electron позволяет один раз написать ваше приложение с использованием уже знакомых вам технологий.

Требования

Before proceeding with Electron you need to install Node.js. Мы рекомендуем вам установить последнюю версию LTS или Current версию.

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

Чтобы убедиться, что Node.js был установлен правильно, введите следующие команды в вашем клиенте терминала:

Команды должны вывести версии Node.js и npm соответственно. Если обе команды выполнены успешно, вы готовы установить Electron.

Создать базовое приложение

С точки зрения разработки, приложение Electron по сути является приложением Node.js. Это означает, что начальной точкой вашего приложения Electron будет файл package.json , как в любом другом приложении Node.js. Базовое приложение на Electron имеет следующую структуру:

Давайте создадим базовое приложение на основе структуры выше.

Установка Electron

Создайте папку для вашего проекта и установите Electron:

Создать файл основного скрипта

Основной скрипт определяет точку входа вашего приложения Electron (в нашем случае файл main.js ), который будет запускать Главный процесс. Как правило, скрипт, который запускается в главном процессе, контролирует жизненный цикл приложения, отображает графический интерфейс пользователя и его элементы, выполняет взаимодействие с родными операционными системами и создает процессы Renderer внутри веб-страниц. Приложение Electron может иметь только один главный процесс.

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

Что происходит в коде выше?

1. Строка 1: Для начала, вы импортируете app и BrowserWindow модули из Electron для управления событиями жизненного цикла вашего приложения, а также создания и управления окнами браузера.
2. Line 2: Second, you import the path package which provides utility functions for file paths.
3. Line 4: After that, you define a function that creates a new browser window with a preload script, loads index.html file into this window (line 13, we will discuss the file later).
4. Line 16: Вы создаете новое окно браузера, вызвав функцию createWindow после инициализации приложения Electron .
5. Line 18: You add a new listener that creates a new browser window only if when the application has no visible windows after being activated. Например, после запуска заявки в первый раз или повторного запуска уже запущенного приложения.
6. Line 25: You add a new listener that tries to quit the application when it no longer has any open windows. Этот слушатель не входит в macOS из-за поведения системы управления окном.

Создать веб-страницу

Это веб-страница, которую вы хотите отобразить после инициализации приложения. Эта веб-страница представляет процесс рендерера. Вы можете создать несколько окон браузера, где каждое окно использует свой собственный рендер. You can optionally grant access to additional Node.js APIs by exposing them from your preload script.

Страница index.html выглядит следующим образом:

Define a preload script

Your preload script acts as a bridge between Node.js and your web page. It allows you to expose specific APIs and behaviors to your web page rather than insecurely exposing the entire Node.js API. In this example we will use the preload script to read version information from the process object and update the web page with that info.

What’s going on above?

1. On line 1: First you define an event listener that tells you when the web page has loaded
2. On line 2: Second you define a utility function used to set the text of the placeholders in the index.html
3. On line 7: Next you loop through the list of components whose version you want to display
4. On line 8: Finally, you call replaceText to look up the version placeholders in index.html and set their text value to the values from process.versions

Изменить файл package.json

Ваше приложение Electron использует файл package.json в качестве основной точки входа (как и любое другое приложение Node.js). Основной скрипт вашего приложения — main.js , поэтому измените файл package.json соответственно:

ПРИМЕЧАНИЕ: Если поле main опущено, Electron попытается загрузить index.js файл из каталога, содержащего package.json .

NOTE: The author and description fields are required for packaging, otherwise error will occur when running npm run make .

По умолчанию, старт npm запустит основной скрипт с помощью Node.js. Чтобы запустить скрипт с Electron, необходимо изменить его следующим образом:

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

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

Пакет и распространение приложения

Самый простой и быстрый способ распространения вашего только что созданного приложения — это использовать Electron Forge.

Импорт Electron Forge в папку приложений:

Создать распределенную таблицу:

Electron-forge создает папку out , в которой будет находиться ваш пакет:

Изучение основ

Этот раздел рассказывает о том, как Electron работает под капотом. Он направлен на укрепление знаний о Electron и приложении, созданного ранее в разделе Quickstart.

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

Электрон состоит из трех основных столбов:

• Chromium для отображения веб-контента.
• Node.js для работы с локальной файловой системой и операционной системой.
• Пользовательские API для работы с часто требуемыми ОС функциями.

Разработка приложения с Electron похоже на создание приложения Node.js с веб-интерфейсом или создание веб-страниц с интегрированием Node.js.

Main и Renderer процессы

Как уже упоминалось ранее, Electron имеет два типа процессов: Main и Renderer.

• Главный процесс создает веб-страницы, создавая BrowserWindow экземпляров. Каждый экземпляр BrowserWindow запускает веб-страницу в процессе визуализации. После уничтожения экземпляра BrowserWindow , соответствующий процесс Renderer также завершается.
• Главный процесс управляет всеми веб-страницами и соответствующими процессами визуализации.

• Процесс рендерера управляет только соответствующей веб-страницей. Ошибка в одном процессе рендерера не влияет на другие процессы рендерера.
• Процесс Renderer связывает с главным процессом через IPC для выполнения GUI операций на веб-странице. Использование собственных API, связанных с GUI, из процесса Renderer напрямую ограничено из-за проблем с безопасностью и потенциальной утечкой ресурсов.

Связь между процессами возможна через межпроцессные модули связи: ipcMain и ipcRenderer .

Electron API

Electron API назначаются на основе типа процесса, означает что некоторые модули могут быть использованы из процесса Main или Renderer и некоторые из них. В документации по API Electron указывается, из какого модуля можно использовать каждый модуль.

Например, для доступа к Electron API в обоих процессах, требуется включаемый модуль:

Чтобы создать окно, вызовите класс BrowserWindow , который доступен только в главном процессе:

Для вызова главного процесса от Renderer, используйте модуль IPC:

ПРИМЕЧАНИЕ: Поскольку процессы рендерера могут запускать ненадежный код (особенно от третьих сторон), Важно тщательно подтвердить поступающие к Главному процессу просьбы.

Node.js API

NOTE: To access the Node.js API from the Renderer process, you need to set the nodeIntegration preference to true and the contextIsolation preference to false . Please note that access to the Node.js API in any renderer that loads remote content is not recommended for security reasons.

Electron предоставляет полный доступ к Node.js API и его модулям как в основных процессах, так и в процессах Renderer. Например, вы можете прочитать все файлы из корневого каталога:

Чтобы использовать модуль Node.js, сначала необходимо установить его в качестве зависимости:

Затем, в приложении Electron требуется модуль:

Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.