браузер electron что такое
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 выполним следующую команду:
Здесь мы переходим в его папку и вызываем соответствующий npm-скрипт.
После этого должно открыться окно, содержимое которого похоже на то, что показано на следующем рисунке.
Окно приложения, созданного средствами Electron Forge
Поговорим о том, как устроено это приложение.
Структура шаблонного приложения
Материалы, из которых состоит шаблонное приложение, создаваемое средствами Electron Forge, представлены набором файлов и папок. Рассмотрим важнейшие составные части приложения.
▍Файл package.json
В разделе файла config.forge можно найти специфические настройки для Electron. Например, раздел make_targets содержит подразделы, описывающие цели сборки проекта для платформ Windows ( win32 ), Mac ( darwin ) и Linux ( linux ).
▍Файл src/index.js
▍Основной процесс и процесс рендеринга
У каждого Electron-приложения может быть лишь один основной процесс, но процессов рендеринга может быть несколько. Кроме того, можно наладить взаимодействие между основным процессом и процессами рендеринга, об этом мы, правда, здесь говорить не будем. Вот схема архитектуры приложения, основанного на Electron, на которой представлен основной процесс и два процесса рендеринга.
Архитектура Electron-приложения
▍Файл src/index.html
▍Разбор кода файла index.js
В готовом приложении строку кода, открывающую инструменты разработчика, имеет смысл закомментировать.
Объект app используется для управления жизненным циклом приложения. В данном случае после завершения инициализации Electron вызывается функция, ответственная за создание окна приложения.
Объект app используется и для выполнения других действий при возникновении различных событий. Например, с его помощью можно организовать выполнение неких операций перед закрытием приложения.
Теперь, когда мы ознакомились со структурой Electron-приложения, рассмотрим пример разработки такого приложения.
Разработка настольного приложения — конвертера температур
Для начала установим пакет Bootstrap, воспользовавшись, в папке проекта, следующей командой:
Теперь заменим код файла index.html на следующий:
Вот как работает этот код:
Как видите, каждая из этих функций получат значение соответствующего поля страницы, выполняет преобразование полученного значения и записывает то, что получилось, в другое поле. Функции это очень простые, в частности, значения, с которыми они работают, никак не проверяются, но в нашем случае это неважно.
Будем считать, что приложение готово. Испытаем его.
Запуск приложения
Для того чтобы запустить приложение, воспользуемся следующей командой:
После её успешного выполнения будет открыто окно приложения со следующим содержимым.
Окно приложения-конвертера
Поэкспериментируйте с приложением, вводя в поля различные значения.
Теперь, когда мы убедились в том, что приложение работает так, как ожидается, пришло время его упаковать.
Упаковка приложения
Для того чтобы упаковать приложение, воспользуйтесь следующей командой:
Предположим, вам нужно упаковать приложение для какой-то другой платформы и архитектуры. Для этого можно воспользоваться расширенным вариантом вышеописанной команды. Структура этой команды выглядит так:
Например, для того чтобы сформировать пакет приложения для Linux, можно воспользоваться следующей командой:
После завершения её работы в папке проекта out появится директория simple-desktop-app-electronjs-linux-x64 с соответствующим содержимым.
Создание установочных файлов приложений
Для того чтобы создать установочный файл приложения воспользуйтесь следующей командой:
Итоги
В этом материале мы рассмотрели основы архитектуры Electron-приложений и написали простую программу. Если вы подумывали о том, чтобы разработать собственное приложение, основанное на Electron, теперь у вас есть базовые знания, самостоятельно расширив и дополнив которые, вы сможете создать то, что вам хочется.
Уважаемые читатели! Пользуетесь ли вы фреймворком Electron для разработки настольных приложений?
Electron: от мотивации до публикации
— Хотел бы я иметь приложение, которое умеет что-то такое, что мне надо. Жаль такого нет.
— А почему бы тебе его самому не написать?
— Это сложно, мне потребуется куча времени, чтобы понять теорию, приступить к практике и, скорее всего, ничего хорошего не выйдет. А вообще я frontend-разработчик и привык к HTML, CSS и JS. Этот стек не позволяет писать десктопные приложения.
— Electron!
Уверен, большинство из нас обмениваются скриншотами. Существует большое количество приложений, способных делать скриншоты и как-то их редактировать (обрезать, рисовать что-то итд). Первые 3, которые мне приходят на ум: Joxy, Monosnap, Gyazo.
Казалось бы, чего ещё желать, когда есть задача и инструменты для неё? Но нет, всё не так просто.
Критерии, по которым я искал приложение
Сохранение скриншота на сервере
Намного удобнее скинуть ссылку на скриншот, чем искать, куда приложение сохранило картинку, а потом прикреплять её. Конечно, некоторым не понравится идея хранить скриншоты неизвестно где. Но, с другой стороны, это позволяет быстро решить задачу — поделиться скриншотом. Такая модель поведения приложения мне вполне подходит.
Рисование на скриншоте
По своему опыту могу сказать, что стрелка у меня присутствует чуть ли не на каждом скриншоте. Намного проще указать на какую-то деталь, чем писать что-то вроде: «Вот эта вот штука между. ». Также в стандартный набор инструментов для рисования на скриншоте, по моему мнению, должны входить карандаш, прямоугольник и текст. При этом должна присутствовать возможность переместить, перевернуть и удалить нарисованный элемент.
Версия для Linux
Как оказалось, не так и много приложений существует для этой задачи под Linux. Долгое время я использовал Gyazo и использовал бы дальше, если бы за «рисовашки» на скриншоте не приходилось платить.
Из коробки
Приложение должно сразу работать так как мне надо. Я не хочу что-либо настраивать, регистрироваться на всяких Imgur и т. д. Просто хочу захватить скриншот, кропнуть, сохранить и поделиться ссылкой на него.
На протяжении года я периодически занимался поиском, но в итоге так и не нашёл приложение, удовлетворяющее моим требованиям.
Electron
Время шло и я решил поближе познакомиться с Electron, чтобы понять что он умеет в принципе. Для тех кто не в курсе, Electron — технология, позволяющая создавать десктопные приложения, используя HTML, CSS и JavaScript.
И вот одной из демок демонстрировалось получение скриншота экрана пользователя. Это означало следующее:
Куда идти, с чего начать, как оно работает
Эти вопросы я задаю себе каждый раз, когда хочу изучить что-то новое. Зачастую решение одно и то же — документация и какой-нибудь официальный «Get started». У Electron и с тем, и с другим всё в полном порядке. По крайней мере они так пишут на сайте проекта — «It’s easier than you think». Это действительно так! Единственное, что надо сразу понять — приложение составляют 2 процесса: Main и Renderer. В Main мы работаем с окнами приложения, меню и т.д., а в Renderer у нас по-сути просто наша страничка.
С чего начать приложение
Сперва давайте создадим проект со следующей структурой:
— package,json
— main.js
— scripts
— renderer.js
Что в итоге мы сделали? Мы подключили Electron, создали само приложение и описали два обработчика. Когда наше приложение будет готово, мы вызовем функцию создания нового окна. А в тот момент, когда все окна будут закрыты — убьём процесс приложения.
Окей, теперь у нас есть сам процесс приложения. Теперь хотелось бы создать для него окно. Помните мы вызывали функцию createWindow();? Так вот пришла пора описать её.
Также необходимо подключить:
Таким образом мы создали окно с заданными размерами. Очень просто, не правда ли?
У окна есть очень много свойств, методов и событий, связанных с ним. К примеру: title, icon, x, y, show(), hide(), close(), minimize, closed, restore, resize. Перечислять весь список бесполезно, поэтому вот ссылка на Browser WIndow.
Но смотреть на пустое окошко не очень весело, да? Давайте подгрузим туда какую-нибудь простую страничку, которая содержит заголовок «Hello, world!». На уровне с main.js создаём файл index.html, который выглядит как самая обычная страница с
Hello, World!
Запускаем наше приложение и видим:
Прям какая-то магия 🙂 Но на секундочку о грустном.
Дебаг
Пока что всё что мы получили — это страничка в окне. Хочется как-то взаимодействовать с ней, к примеру, с помощью меню. Для этого в Electron есть специальный класс Menu. Поставим себе задачу — создать меню из одного элемента, при нажатии на который мы увидим системное всплывающее окно с тайтлом «Hello», сообщением: «Do you like this?» и вариантами ответа [‘Yes’, ‘No’].
И создаём файл appMenu.js в директории scripts. Внутри себя он содержит следующий код:
Идём далее. В app.on(‘ready’. дописываем:
После запуска приложения мы увидим, что наше меню стало меньше и теперь содержит один элемент. Нажав на него, мы увидим следующее:
Согласитесь, не очень удобно каждый раз заходить в меню за инструментами которые вы часто используете (кроп, стрелка и т.д.). Решить данную проблему можно созданием панельки в области страницы, на которую их и вынести. Уже удобнее (не надо пробираться через громоздкое меню), но всё ещё не идеально (тянуться-то надо).
Можно лучше?
Конечно, можно! Давайте использовать контекстное меню. Его будет вызывать клик правой кнопкой мыши в области окна. Такое меню будет состоять из пунктов, каждый из которых при нажатии вызовет свою функцию. К примеру, я разместил в этом меню следующие элементы:
Этот набор инструментов даст воспользоваться практически всеми возможностями приложения.
А может ещё лучше?
Общение процессов
Как видите, всё очень просто!
Полезно чтобы приложение не висело свёрнутым или, что хуже, было просто открыто. Для решения этой проблемы существует трей. И Electron даёт возможность поработать и с ним через класс Tray.
Что по сути такое приложение в трее? Это иконка и меню, вызываемое кликом правой клавиши мыши. Интересно подметить, что конструктор класса Tray принимает ровно один параметр — иконку. Если этот параметр отсутствует, то будет выброшена ошибка. Сначала это ничуть меня не удивило. Есть в конструкторе обязательный параметр, будь добр — передай. Чуть позже расскажу почему в дальнейшем обязательность этого параметра мне показалась странной.
Иконка приложения
Моя страничка может достучаться до системы?
Очень важно понимать, что ваше приложение на Electron — это не просто страничка в стандартном окошке, а вполне себе полноценное приложение.
«There is no built-in support for auto-updater on Linux, so it is recommended to use the distribution’s package manager to update your app».
Проще говоря, на LInux это не работает, так что выкручивайтесь. Например, я делаю запрос на сервер, который возвращает мне номер текущей актуальной версии и, если он не совпадает с версией приложения, вывожу сообщение с просьбой его обновить.
Подводные камни
Вроде, звучит всё круто, должен же быть подвох. Безусловно, есть некоторые неприятные моменты:
Не всё кроссплатформенно
Minimize
Очень много времени я потратил на разрешение проблемы с этим. Суть её такова: когда мы сворачиваем окно приложения — срабатывает событие minimize, и окно сворачивается. Вроде всё окей. Но приложение, висящее и в трее, и в доке — это уже странно. Поэтому хотелось бы отлавливать minimize и как-то убирать приложение из дока, оставляя лишь в трее. Для этого есть метод hide(). Пишем обработчик для minimize, вызываем hide — всё отлично. Затем я захотел добавить возможность из меню трея развернуть приложение обратно, и сразу же нашёл метод show(). Всё логично show/hide, но нет. Когда я пытаюсь развернуть приложение из трея, оно намертво зависает. Очень долго я думал, что упускаю что-то важное, но никаких ошибок в консоли не видел. В том числе, выводил само окно перед тем как вызывать show() — окно существует. В общем, отказался от подобного механизма работы приложения и решил попробовать вызвать hide(), когда окно приложения открыто. И да, чудо свершилось. Всё заработало ровно так, как надо. Несколько часов было потрачено на поиск ответа на вопрос: «Да почему ты не работаешь?», а в итоге решение мне подсказал Telegram. Я просто добавил в меню пункт «minimize to tray», а заодно и хоткей повесил на него.
В общем-то для меня подводные камни Electron’а закончились. Скорее всего, мне просто повезло…
Сборка
Настало время поговорить об ещё одной достаточно занимательной вещи — сборке. Electron даёт вам возможность собрать своё приложение и потом проинсталлировать его в различных ОС. Пользователь даже может не догадываться что вы написали своё приложение на web-технологиях. Давайте приступим!
Стандартный подход
На официальном сайте в разделе документации есть 3 ссылки на инструкции по сборке (Linux, MacOS, WIndows). Так как приложение изначально затачивалось под Linux, то сначала я открыл ссылку для него. Первое системное требование сразу же напугало меня: «At least 25GB disk space and 8GB RAM» (не менее 25GB свободного места и 8GB оперативки). «Ладно, что поделать?» — подумал я и начал пытаться собрать приложение из примера. В итоге, сам процесс сборки занял у меня минут 20-30, более того, пользоваться компьютером было невозможно! Я очень рад, что не продолжил работать с этим сборщиком, т.к. узнал об одной пренеприятнейшей вещи: чтобы собрать приложение под какую-то ось, его надо собирать именно из под этой оси!
«Должен быть другой способ,» — говорил я себе. И да, действительно он существует.
Electron builder
Достаточно было просто загуглить «electron builder» и перейти по первой ссылке. С тех самых пор я и использую это сборщик, и вот почему:
Всё что вам остаётся — правильно дополнить свой проект.
Подготовка проекта
Этот процесс можно разбить на 2 этапа:
Иконки
Приложения, будучи установленными, хотят иметь свои иконки. Для этого в корневой директории проекта необходимо создать директорию «build», которую заполнить по следующей схеме:
— build
—— icons
——— 32×32.png
——— 32×32.png.ico
—— icon.icns
—— icon.ico
Package.json
Если вы просто попробуете собрать свой проект, то консоль начнёт плеваться в вас ошибками. Это происходит по той причине, что в файле должны содержаться стандартные строки:
Затем надо описать «build» и «scripts». Я намеренно быстро пробежался по этим двум пунктам, т.к. запоминать, что внутри, не требуется, да и вряд ли возможно, особенно если учесть, что есть огромное количество настроек (для «build»), которые могут зависеть от ОС, к которой он и собирается. Например, для Windows можно собрать portable-версию своего приложения и указать gif-файл, который будет отображаться в момент запуска.
В общем, рекомендую использовать именно Electron builder для сборки. Это сэкономит вам кучу нервов, поверьте.
Добавляем своё приложение на сайт Electron
Я считаю неплохой идеей рассказать о своём проекте на Electron на сайте самого Electron. Для этого достаточно послать им pull request, содержащий:
Опять же, в этом нет ничего сложного. После отправки pr необходимо лишь запастись терпением и ждать когда его примут (в моём случае это заняло около недели).
Подробную инструкцию по добавлению можно найти здесь.
Подводя итог
Первый коммит был сделан 24 сентября 2016 года, а первый релиз вышел 17 октября того же года. Это значит, что спустя всего 24 дня я получил версию приложения, которую уже можно было использовать. Это достаточно быстро, если учесть, что я работаю и люблю отдыхать. Так что вперёд, всё в ваших руках!
До свидания, Electron. Здравствуйте, настольные PWA
Автор материала, перевод которого мы сегодня публикуем, говорит, что он, возможно, слишком торопится, но то, о чём он хочет рассказать, представляет собой, по меньшей мере, весьма интересную новость. Речь идёт о настольных прогрессивных веб-приложениях, которые вполне могут значительно потеснить позиции приложений, основанных на Electron.
Новшества Chrome v70
Свежая версия Chrome (v70) поддерживает настольные прогрессивные веб-приложения (Desktop Progressive Web Apps, PWA) на платформах Linux и Windows.
Поддержка настольных PWA в Chrome
Если взглянуть на список поддерживаемых систем, тут же становится заметным отсутствие в нём MacOS. Однако это так лишь до тех пор, пока не выйдет Chrome v72.
Поддержка настольных PWA в MacOS
Важно отметить, что хотя эта возможность в MacOS по умолчанию не включена, её можно активировать с помощью соответствующего флага. Для этого надо открыть Chrome, перейти по адресу chrome://flags и найти там этот флаг. Можно и перейти к флагу напрямую, воспользовавшись ссылкой chrome://flags/#enable-desktop-pwas.
Что такое прогрессивные веб-приложения?
В особые подробности, касающиеся 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-приложений и посмотрите на то, сколько памяти они потребляют.
Чрезмерное использование памяти — это само по себе не очень хорошо, а сюда ещё надо добавить то, что многие Electron-приложения специфическим образом взаимодействуют с Node.js, не обязательно делая это так же, как соответствующие веб-приложения.
Использование Electron добавляет сложностей, связанных с поддержкой старых версий программ и с наладкой процесса обновления приложений.
Теперь поговорим о настольных PWA. Представьте себе приложения, которые выглядят как те, что написаны на Electron, с которыми так же удобно работать, но при этом устанавливать их проще простого, обновляются они тоже без проблем, в ходе передачи клиенту материалов единственного веб-приложения. Возникает такое ощущение, что Chrome задаёт стандарт для подобного сценария поведения в настольных PWA. Когда пользователь, работающий в Chrome, посещает некую веб-страницу, и представленное ей приложение соответствует этому набору критериев, у разработчика приложения появляется возможность предложить пользователю установить приложение на его компьютер. Приглашение выглядит примерно так, как показано ниже.
Приглашение на установку PWA
Значок для запуска PWA
После запуска подобного приложения оно открывается в браузерном окне, не оснащённом обычными элементами управления. Такое приложение воспринимается как настоящее настольное приложение.
Пример PWA
Вот пример настольного PWA, скриншоты которого были использованы выше в виде иллюстраций. Вот его репозиторий на GitHub. Для того чтобы установить это приложение, нужно включить соответствующий флаг в Chrome и провести на сайте хотя бы 30 секунд.
Как уже было сказано, веб-приложение, для того, чтобы считаться настольным PWA, должно соответствовать определённому набору требований. Если вы хотите создать и испытать собственное настольное PWA, можете взять за основу этот репозиторий и учесть требования. Если сделать краткую сводку по ним, то получится следующее:
Дополнительные примеры
Если вы работаете на MacOS, то PWA могут счесть, что установить их вы не сможете, и не покажут вам приглашение для их установки. Если включить соответствующие флаги и повозиться с консолью разработчика, можно добиться от PWA того, что они приглашение на установку выведут. Вот некоторые из существующих PWA, которые удалось установить на Mac.
▍Starbucks
Компания Starbucks вложила немало сил в разработку отличного PWA. Их настольное приложение получилось прямо-таки впечатляющим.
▍Google Maps
Это — просто замечательное приложение. Оно делает своё дело и не особенно сильно нагружает систему, отличаясь быстрой работой и отзывчивым дизайном. Для установки этого приложения нужно исхитриться и загрузить мобильный сайт Google Maps.
Компания Twitter постаралась при разработке мобильного PWA, а настольную версию можно считать достойным дополнением к мобильному приложению.
Итоги
Не смотря на то, что вокруг настольных PWA поднято много шума, нужно отдавать себе отчёт в том, что эта технология пока находится на стадии становления. В частности, можно отметить следующие направления развития настольных PWA:
Уважаемые читатели! Планируете ли вы разрабатывать настольные PWA?