Что такое электронный браузер

Обновлено: 05.07.2024

Получите полный доступ к Представляем Electron и более чем 60 000 других игр с бесплатной 10-дневной пробной версией O'Reilly.

Есть также прямые онлайн-мероприятия, интерактивный контент, материалы для подготовки к сертификации и многое другое.

Вероятность того, что вы уже используете настольное приложение на основе веб-технологий, высока. Популярные приложения, такие как Spotify, Visual Studio Code, Atom, GitHub Desktop и Slack, используют стек JavaScript, и даже мощные программные продукты, такие как Adobe Creative Suite и драйверы Nvidia для Windows, поставляются вместе с Node.js.

Электрон – это платформа с открытым исходным кодом, которая позволяет разработчикам использовать веб-технологии для создания настольных приложений. Первоначальная разработка началась в 2013 году на GitHub для поддержки взломанного редактора текста и кода Atom. Оба были опубликованы весной 2014 года, но с тех пор Electron превзошел Atom по популярности и стал крупнейшим проектом GitHub с открытым исходным кодом на сегодняшний день. В 2017 году Electron поддерживается командой GitHub при поддержке сообщества. Microsoft, Slack, Figma, Brave и другие компании, а также отдельные лица продолжают инвестировать в разработку и поддержку проекта.

Это краткое руководство знакомит с Electron, самой популярной средой и средой выполнения для кроссплатформенных настольных приложений, созданных с использованием веб-технологий (и, при необходимости, с собственными компонентами). Хотя это далеко не полный справочник, в нем кратко представлены все аспекты разработки и распространения приложения на основе Electron, что позволяет вам получить 30 000-футовый обзор.

По своей сути Electron состоит из трех компонентов. В него встроена библиотека рендеринга Chromium (известная как libchromiumcontent), которая является основой с открытым исходным кодом для браузера Google Chrome. В него входит поддержка новейших веб-стандартов, высокопроизводительный движок JavaScript и постоянно совершенствуемые инструменты разработчика. Это распространенное заблуждение, что Electron полностью включает Chrome; чтобы сделать Electron максимально компактным, он действительно содержит только библиотеку рендеринга Chromium.

Второй компонент — это Node.js, популярная среда выполнения JavaScript, созданная на основе V8 (тот же механизм JavaScript, на котором работают libchromiumcontent и Chrome). Он предлагает яркую экосистему с открытым исходным кодом: бесчисленные модули в npm предлагают проверенные решения для общих задач разработки и простую интеграцию практически с любым сервисом. Node.js по праву претендует на звание «крупнейшей в мире экосистемы библиотек с открытым исходным кодом». Это преимущество позволяет значительно сократить время, необходимое для разработки решений.

Третий компонент представляет собой толстый слой C++, расширяющий обычный набор доступных API за счет встроенных реализаций для стандартных операций операционной системы, таких как отправка собственных уведомлений, доступ к системным настройкам и создание собственных диалогов. Кроме того, Node.js позволяет использовать нативные модули — нативные компоненты, написанные на C, C++, Rust или Objective-C, — гарантируя, что разработчик никогда не будет ограничен JavaScript, если сложная проблема потребует использования низкоуровневого программирования. язык.

Электрон знает два разных типа процессов: основной процесс и процесс рендеринга. Когда приложение Electron запускается, оно запускает основной процесс. Внутри одного экземпляра приложения всегда есть ровно один главный процесс. Этот процесс не имеет доступа к API DOM (объектной модели документа), не имеет окон и во многом ведет себя как процесс Node.js (см. рис. 1-1).

Рисунок 1-1. Два типа процессов Electron

После инициализации основного процесса он может открывать окна. Эти окна запускаются в собственном процессе и называются процессами рендеринга. В Electron каждая веб-страница работает в своем собственном процессе. Различие важно: процессы рендерера имеют знакомый DOM с объектами окна и документа, могут создавать и отображать элементы HTML и иметь доступные инструменты разработчика Chromium, тогда как основной процесс на самом деле является просто процессом Node.js. В то же время доступ ко многим API-интерфейсам Electron возможен только из основного процесса: вызов методов, выполняющих собственные операции с графическим интерфейсом, из процесса рендеринга рискован, может привести к утечке ресурсов и поэтому просто не разрешен.

В старой технической документации вы иногда встретите основной процесс, называемый процессом браузера, что, естественно, может сбивать с толку, но оно происходит из терминологии Chrome. В мире Chrome основной процесс отвечает за управление окнами и вкладками, поэтому его называют «процессом браузера».

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

Разница между основным процессом и присоединенными к нему процессами рендеринга важна: каждый из них имеет разные возможности и отвечает за разные аспекты жизненного цикла вашего приложения. В этом руководстве вы найдете ссылки, объясняющие, какой процесс отвечает за данную задачу. Это различие иногда сбивает с толку новичков, но быстро становится естественным.

После создания окна веб-разработчики быстро почувствуют, что с них сняли кандалы. Electron сочетает в себе Node.js и Chromium, что означает, что вы можете в полной мере использовать все API-интерфейсы Node, включая require и любой модуль, который вы можете найти в npm. Естественно, сюда входят нативные модули, такие как sqlite или nodegit.

Это также устраняет все границы безопасности, к которым может привыкнуть веб-разработчик. Скомпрометированное приложение Electron гораздо опаснее взломанного веб-сайта, учитывая, что приложение Electron имеет полный доступ к операционной системе. Это краткое введение посвящает раздел безопасности, но, как правило, загрузка удаленной веб-страницы в процессе рендеринга Electron с включенной интеграцией Node.js — плохая идея. Чтобы снизить этот риск, Electron позволяет разработчикам создавать процессы рендеринга с полностью отключенной интеграцией Node.js. Позже мы обсудим сценарии, в которых вы хотели бы загружать удаленный контент и предлагать ограниченный набор API, доступных только через Node.js.

Познакомьтесь с Знакомство с Electron прямо сейчас благодаря онлайн-обучению O’Reilly.

Члены O’Reilly проходят онлайн-обучение в режиме реального времени, а также получают книги, видео и цифровой контент от более чем 200 издателей.

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

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

Веб-технологии

Электрон использует Chromium и Node.js, поэтому Вы можете создавать свои приложения на HTML, CSS и JavaScript.

Открытый код

Электрон — это проект с вероятным исходным кодом, который является чудом OpenJS Foundation и активным сообществом авторов.

Кросс-платформенный

Совместимые с Mac, Windows и Linux приложения Electron вызывают обвинения и загружаются на трех платформах.

Сложные вещи стали проще

Для начала работы с Electron требуется восстановление нижележащих ресурсов. Получите доступ ко всем API-интерфейсам и создайте установщики.

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

Небольшое приложение Electron с комментариями.

Попробуйте мощные эксперименты с Electron Fiddle

Electron Fiddle позволяет Вам создавать и пробовать небольшие эксперименты с Electron. Открыть, Вас приветствуют шаблоном ускоренного запуска - Вы можете изменить несколько установок, выбрать желаемую версию Electron и играть с вариантами файлов. После сохраните Ваш Fiddle как GitHub Gist или в локальной папке. При публикации на GitHub, Ваш Fiddle доступен и всё, что нужно сделать, чтобы попробовать Ваш Fiddle это ввести его в адресную строку.

Или окунитесь глубже и ознакомьтесь с документацией.

Нужна помощь?

Авторские права участников OpenJS Foundation и Electron. Все права защищены. OpenJS Foundation зарегистрировала товарные знаки и использует товарные знаки. Список товарных знаков OpenJS Foundation см. в нашей Политике в отношении товарных знаков и Списке товарных знаков. Товарные знаки и логотипы, не указанные в списке товарных знаков OpenJS Foundation, являются товарными знаками™ или зарегистрированными® товарными знаками соответствующих владельцев. Их использование не подразумевает какой-либо принадлежности к ним или их одобрения.

< бр />

В этом руководстве мы покажем вам, как создать простой веб-браузер с использованием методов Electron HTML5.

В этом руководстве мы будем использовать «ванильный» JavaScript. Если вы хотите глубже погрузиться в Electron с помощью React, ознакомьтесь с нашей предыдущей записью в блоге: Создание приложения для расходов с помощью Electron и React.

Что такое Электрон?

Электрон — это платформа, которую можно использовать для создания настольных приложений для Windows, MacOS и Linux.

Он был разработан Github для их редактора кода Atom, а позже использовался Microsoft для создания своего все более популярного редактора VSCode. На серверной части Electron использует Node.js, а на внешней — Chromium для рендеринга приложений. Написание кода в Electron похоже на написание кода в браузере, поскольку вы можете использовать все API DOM, но также и все доступные API Node.js.

Почему вы должны использовать Electron?

Один размер подходит всем

Поскольку Electron использует одну и ту же версию Chromium на каждой платформе для рендеринга вашего приложения, вам не придется беспокоиться о кросс-браузерной совместимости при написании CSS. То же самое касается JavaScript: если в версии Chromium, которую использует Electron, доступна новая спецификация, вы можете использовать ее без необходимости транспилировать обратно в ES5. На момент написания большинство новых функций ES6 доступны для использования в Electron. С точки зрения настольной разработки это даже лучше, чем писать нативные приложения для каждой платформы, поскольку вам не нужно писать отдельный код для каждой операционной системы.

Быстрая разработка

Разработка с использованием Electron быстрее, проще и дешевле, чем написание обычных настольных приложений. Electron использует JavaScript, который в настоящее время является самым популярным языком программирования в мире, согласно Stack Overflow. JavaScript довольно прост в изучении, и многие разработчики уже знают этот язык, используя его в Интернете. Использование JavaScript также означает, что вы можете повторно использовать весь код, который вы использовали для своего веб-сайта, и, кроме того, на вашей стороне есть сообщество JavaScript, включая npm, крупнейший менеджер пакетов в мире.

Начало работы

Прежде чем начать, убедитесь, что Electron работает в вашей ОС. Electron доступен для Windows, Mac и Linux, но его установка может быть сложной. Поскольку это руководство посвящено кодированию, а не стилям, мы уже создали шаблон, который вы можете использовать для этого руководства. По сути это копия Electron-quickstart с добавленным шаблоном. Вы можете найти код вместе с инструкциями по его установке на Github.

Мы собираемся написать код в файле renderer.js. Код в main.js является частью Electron-quickstart и создает наше окно и добавляет несколько лучших практик, но не более того. Как видите, index.html уже настроен со структурой веб-браузера, который мы будем создавать. Наш файл renderer.js также требуется в нижней части страницы.

Как мы уже говорили ранее, в нашем файле renderer.js мы можем получить доступ как к DOM, так и к API Node.js. Поначалу это может показаться немного запутанным, но использовать силу обоих вместе довольно круто. Следовательно, мы можем потребовать этот файл JavaScript вместо использования тега скрипта.

Веб-просмотр

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

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

Этот код ничего не делает для пользовательского интерфейса нашего приложения. Кстати, вы запускаете его, набрав npm start или electronic. в терминал.
Мы также объявили переменную с путем к файлу JSON. Мы будем использовать этот файл для хранения закладок, хотя мы также могли бы использовать хранилище HTML5, но для этого примера гораздо интереснее использовать некоторые функции Node.js.

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

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

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

Закладки

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

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

Сначала мы получаем URL-адрес и заголовок текущей страницы из веб-просмотра. Затем мы извлекаем фавикон с помощью простой библиотеки, которую мы добавили в начале кода. Затем это возвращает ссылку на фавикон для текущей страницы. После того, как мы получим фавиконку, мы создадим новую закладку, используя наш ранее созданный конструктор, а также передадим уникальный идентификатор на основе времени, который генерируется с помощью библиотеки uuid для Node.js.

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

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

Состояние всплывающего окна контролируется с помощью атрибута данных HTML5 элемента. Если всплывающее окно уже открыто, всплывающее окно будет просто закрыто повторным щелчком по значку. Однако, если всплывающее окно закрыто, мы сначала очистим HTML внутри него, если пользователь уже открывал его ранее и добавлял новые закладки в это время. Затем мы читаем наш файл JSON и перебираем закладки, превращая их обратно в объекты Bookmark, а затем получаем готовый HTML-код перед добавлением их во всплывающее окно. Прежде чем мы сможем подключить все с помощью прослушивателей событий, нам понадобятся еще три функции.

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

Все вместе

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

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

Отсюда идти?

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

Отзыв при добавлении закладки. (предупреждение)
Отзыв при загрузке страницы. (спиннер)
Функция удаления закладки.
Поиск Google из строки URL.

И если вы действительно хотите испытать себя, попробуйте следующее:

Заключение

Если вы хотите узнать больше об Electron, вы можете найти полную документацию здесь. Ищете законченную версию этого руководства? Вы можете найти это здесь. Помните, что, как и любой другой код JavaScript, вы можете защитить этот браузер или определенные функции, которые вы разрабатываете, с помощью Jscrambler, убедившись, что ваш браузер не может быть взломан с помощью самозащиты, и запутать каждую функциональность с помощью таких преобразований, как выравнивание потока управления, функция Переупорядочивание, переименование идентификаторов и многое другое. Вы можете протестировать эти преобразования в приложении Jscrambler для игровых площадок.

Jscrambler Лидер в области веб-безопасности на стороне клиента. С помощью Jscrambler приложения JavaScript становятся самозащитными и способны обнаруживать и блокировать атаки на стороне клиента, такие как Magecart.

На прошлой неделе я использовал Pixelbook, проверяя новые функции приложений для Linux. Оно не готово к использованию в прайм-тайм, но оно в миллиард раз лучше, чем в прошлый раз, когда я пытался запускать приложения Linux в Chrome OS.

Но меня поразила определенная ирония: половина приложений, которые я хотел установить, были приложениями Electron. Если вы не знакомы с Electron, это платформа, которая позволяет разработчикам создавать настольные приложения с использованием веб-технологий. «Если вы можете создать веб-сайт, вы можете создать настольное приложение», — гласит слоган. На самом деле, многие приложения Electron выглядят почти так же, как веб-сайты.

Slack, Hyper, Simplenote, Visual Studio Code. Все они отвечают за большую часть моего дня, и все они созданы с помощью Electron.

Под капотом Electron используется движок рендеринга Chromium и Node.js. Chromium — это часть браузера Google Chrome с открытым исходным кодом. А Node.js работает на базе V8 – движка JavaScript для Chrome.

Итак, поясняю: у меня ноутбук с операционной системой Chrome OS, которая в основном состоит из браузера Google Chrome и немного Linux, и теперь я устанавливаю "настоящие" Linux-приложения. внутри виртуальной машины поверх Chrome OS, и большинство этих приложений полностью созданы с использованием технологий, производных от Chrome.

И знаете что? Эти приложения Electron отстой в Chrome OS. Я уверен, что со временем они улучшатся — особенно после того, как они получат поддержку GPU, которая, как мне сказали, находится в разработке, — но они всегда будут ограничены песочницей, созданной Google для того, чтобы приложения Linux были отделены и защищены от других. остальная часть ОС.

Я не хочу показаться жалобщиком. Есть много технических достижений, которые можно отпраздновать со всех сторон. Приложения Electron легко установить в Linux, они автономны и, безусловно, функциональны. Напротив, мне пришлось удалить пару файлов внутри моей установки Steam, чтобы запустить ее, хотя базовая структура Steam — пользовательский интерфейс веб-браузера с доступом к файловой системе — едва ли сложнее, чем у VS Code.

Вот разработчик Electron, объясняющий, как все это работает, с небольшим уроком истории о технологии внутри:

Электрон похож на веб-браузер и веб-сервер в одном удобном пакете. Разработчики создают пользовательский интерфейс с использованием HTML, CSS и JavaScript (так же, как и любой веб-сайт) и создают «бэкенд» для своего приложения — в основном, все функции, которые веб-сайт обычно не может выполнять, например удаление жесткого диска или включите веб-камеру без запроса — с помощью JavaScript.

В качестве примера возьмем Slack. Вот один из разработчиков Slack, объясняющий, почему они используют Electron:

Учитывая появление прогрессивных веб-приложений (PWA) и браузеров как операционных систем, стоит уделить некоторое время тому, чтобы подумать о том, какими возможностями ваше приложение не может обладать как стандартное веб-приложение. Для Slack это включает в себя детальное управление встроенными уведомлениями, демонстрацией экрана и видеовызовами, проверкой орфографии и определением языка, собственными приложениями и контекстными меню, а также доступом к новым интересным API, таким как Touch Bar и Мои люди.

Это выглядит как длинный список, но больше всего меня впечатляет то, чего нет в списке: пользовательский интерфейс и основная логика Slack полностью независимы от Electron. В случае Slack большая часть основной логики находится в облаке на серверах Slack. Для автономных приложений Electron, таких как Visual Studio Code, существует гораздо больше «бэкенда», который работает на вашем локальном компьютере для компиляции кода, предложения предложений и работы с контролем версий git. Но вы по-прежнему можете использовать основной текстовый редактор VS Code в браузере — он называется Monaco Editor и поддерживает одну из моих любимых веб-сред кодирования — CodeSandbox.

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

Просто запустите серверную часть приложения в новой изолированной программной среде Linux и запустите пользовательский интерфейс как приложение Chrome, работающее на собственной версии Chrome для ОС Chrome. Я говорю «просто», как будто это было бы легким делом. Наверное, не было бы. Но альтернативой для Google является то, что Slack и VS Code работают на Chrome OS хуже, чем на Windows и Mac. А то мне будет грустно.

Если я даю волю своему воображению, я не понимаю, почему Apple и Microsoft не могут сделать аналогичную декомпозицию Electron, используя свои собственные браузерные движки, оптимизированные для ОС, для пользовательского интерфейса. Я имею в виду, что мне нравится, что основные поставщики браузеров так усердно работают над поддержкой прогрессивных веб-приложений в качестве открытого стандарта, но очевидно, что требования большинства «настоящих» настольных приложений всегда будут опережать эти открытые стандарты.

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

Специфика архитектуры Electron помогла ему добиться успеха, но на самом деле важны результаты: разработчик может создать настольное приложение, используя единую кодовую базу JavaScript, и оно компилируется в двоичный файл, который работает на любой ОС. Не исключено, что Google внесет свой вклад в этот конвейер компиляции, чтобы гарантировать, что приложения Electron станут идеальными гражданами Chrome OS — на самом деле, Microsoft уже разработала инструмент, который помогает разработчикам упаковывать приложения Electron для Магазина Windows.

Это не должно быть навсегда. Возможно, в будущем разработчики начнут использовать React Native для создания настольных приложений. Или, возможно, Флаттер! Приложения Electron имеют плохую репутацию из-за того, что они используют слишком много оперативной памяти, имеют потенциальные проблемы с безопасностью, не могут (пока) не сравниться со скоростью C++, и им часто не хватает отточенности и привычности отличного нативного приложения.

Но мне кажется очевидным, что SDK для конкретных ОС становятся проблемой для поставщиков настольных ОС. Разработчики хотят использовать технологии, которые они знают, и хотят, чтобы продукты, которые они создают, были максимально доступны. И они достаточно умны, чтобы получить то, что они хотят. Отсутствие сотрудничества со стороны Apple, Google и Microsoft только навредит пользователям.

Читайте также: