Build Desktop Applications

for Linux, Windows and Mac using HTML, CSS and Javascript

Deprecation Notice

AppJS project has not been actively developed for a few years. Please check out NW.js or Electron instead.

Why AppJS?

Because it is simple and yet powerful. Using AppJS you don’t need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.

HTML 5

AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!

CSS 3

Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3.

Node.js

The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.

30 Second Quickstart

The below packages include everything needed to get started with AppJS, including Node.js, all dependencies, binaries, and a launcher ready to go out of the box. 1.) Extract to a folder. 2.) Double click on launch. 3.) Hello World.

AppJS 0.0.20 Distributables:

For Node.js users, AppJS can be also be installed via npm.

AppJS requires 32bit Node on OS X. It works on 64bit OS X but Node must be 32bit. We’re working on solving this, but it’s a limitation of Chrome itself so it’s a work in progress. Help us gain traction by starring this chromium issue.

One Minute Usage Overview

We need your help!

AppJS is a work in progress and needs a lot of improvement. There are unimplemented stuff waiting for your help! You can find them at github issue tracker or read the code and find @TODO tags! You can also subscribe to the development mailing list where we talk about AppJS features.

There are two areas you can help. If you code in C++ try to implement features that are only supported in one platform or two. We need all three major platforms to work (Mac, Linux and Windows). If you are professional in Javascript and Node.js then you can help us by implementing JS wrappers for C++ APIs.

To start contributing, fork git repository from github, clone the forked repository and make your changes according to instructions below. Then send a pull request. We discuss changes you have made. After that you can see your changes merged in the main repository!

Как быстро создать десктопное приложение на HTML, CSS и JavaScript

Можно ли использовать HTML, CSS и JavaScript для создания десктопных приложений?

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

Electron

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

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

Electron Forge

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

Electron Forge значительно упрощает все вышеперечисленное.

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

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

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

Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:

Начнём с приложения

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

simple-desktop-app-electronicjs — это название приложения.

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

Это должно открыть окно как на скрине ниже:

Разберёмся в структуре и коде

Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.

package.json

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

Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

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

src/index.js

Согласно package.json , index.js является основным скриптом. Процесс, который запускает основной скрипт, называется главным процессом. Таким образом, основной процесс запускает скрипт index.js .

Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.

Главный процесс и процесс отрисовки

Основное предназначение главного процесса — создание страниц с помощью экземпляра BrowserWindow . Экземпляр BrowserWindow использует процесс отрисовки для запуска каждой страницы.

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

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

abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.

src/index.html

index.js загружает файл index.html в новый экземпляр BrowserWindow .

Это означает, что index.js создает новое окно GUI и загружает его со страницей index.html . Страница index.html запускается в своем собственном процессе отрисовки.

Код в index.js с пояснениями

Большая часть кода, созданного в index.js , содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js :

Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow . Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

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

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

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

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

Сначала давайте установим Bootstrap с помощью следующей команды:

Скопируйте следующий код в src/index.html:

Приведенный выше код выполняет следующие действия:

1. Создаёт поле ввода текста с id=»celcius» . Всякий раз, когда в это поле что-то вводится, вызывается функция celciusToFahrenheit() .
2. Создаёт поле ввода текста с id=»fahrenheit» . Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius() .
3. Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
4. Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.

2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js .

Создайте файл с именем renderer.js внутри src . Скопируйте в него следующий код:

Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

Функция fahrenheitToCelcius() делает ровно наоборот.

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

Запустите приложение, используя следующую команду:

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

Десктопные приложения на html, css и js для windows, mac os, linux. Подробный обзор nw.js (бывший node-webkit)

nw.js – это платформа, которая позволяет создавать кроссплатформенные десктопные приложения для windows, mac os и linux, используя веб-технологии. При этом javascript, html и css используются для построения интерфейса, а node.js(io.js) – для описания основной логики. Кроме того, Вам предоставляется высокоуровневый JS API для доступа ко многим элементам операционных систем (настройкам окна, меню, буферу обмена, системному трею и др.)

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

Что же не позволяет веб-приложениям выйти на уровень десктопных?

Я приведу всего несколько ограничений, которые есть у всех веб-приложений и которые можно преодолеть, разрабатывая десктопный софт с nw.js. Итак, я хочу, чтобы мое приложение:

• Имело полный доступ к файловой системе, системным процессам, могло выполнять команды в командной оболочке той машины, на которой запущено.
• Могло работать в фоне, запускаться при старте системы и оффлайн.
• Не спрашивало подтверждения доступа при использовании камеры и микрофона.
• Могло использовать Web Gl, Web Audio, Web RTC и т.д. в той версии браузера, которая определена мной.
• Могло создавать элементы управления на уровне операционной системы: меню, окна, иконки в трее (менюбаре), управлять ими.
• Могло создавать несколько окон.
• Могло делать скриншоты.
• Имело доступ к буферу обмена на запись и чтение.
• Могло подписываться на системные сочетания клавиш (в том числе, когда приложение не в фокусе)
• Могло пользоваться системной нотификацией.
• Могло делать кроссдоменные запросы.
• Могло изменять UserAgent
• Могло загружать любые сайты во фрейм, который они не считали бы фреймом.
• Могло включать полноценный полноэкранный режим kiosk-mode (как в десктопных играх).
• Я хочу распространять и рекламировать приложение через магазины приложений.
• И просто, но важно… Я хочу запускать приложение нажатием на иконку!

nw.js позволяет реализовать вышеописанные задумки.

Кстати, если вам удобнее воспринимать видео, нежели читать дальше, то вот запись с моего доклада на Frontend Conf. Но, хочу предупредить, в статье все описано подробне 😉

Почему браузера может быть мало?

Похожие подходы и их недостатки

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

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

С nw.js все намного проще. Если вы разрабатываете веб-приложения и имеете немного опыта работы с node.js, то уже через несколько часов вы поймете как писать и собирать десктопные приложения под mac, windows и linux.

От node-webkit к nw.js. Немного истории

В 2011 году разработчик из Китая Roger Wang основал проект node-webkit, основной задумкой которого стало использование веб-технологий для написания полнофункциональных кроссплатформенных десктопных приложений. Как уже понятно из названия, основными составляющими проекта стали Node.js и Webkit (Chromium).

Шли годы и в апреле 2013-го Chromium, а вместе с ним и проект node-webkit переехал на новый движок Blink (форк Webkit-а). В добавок к этому с января 2015 проект начал использовать io.js вместо node.js.

В итоге изначальное название “node-webkit” стало совсем не актуальным и было принято решение переименовать проект в nw.js. Бытует мнение, что теперь в буквах NW заложен новый смысл – “Native Web”.

Основными спонсорами проекта до сих пор являются intel и Gnor Tech.

Основная идея. Зачем “скрещивать” Chromium c node.js?

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

Для того, чтобы понять всю мощь идеи nw.js, давайте коротко рассмотрим основные составляющие nwjs.

Chromium – браузер с открытым исходным кодом, который разрабатывается силами Google, Opera Software, Яндекс, NVIDIA и других компаний. В качестве движка для отображения веб-страниц в Chromium используется Blink (форк Webkit). В качестве движка для обработки JavaScript используется v8.

node.js(io.js) – это JavaScript runtime на основе движка v8, изначально используемого в Chromium. Он написан на С++ и работает на уровне протоколов прикладного уровня, где ему доступны множество различных API операционных систем, таких как файловая система и сетевые взаимодействия. В силу этого, node чаще всего используется для построения системных приложений и серверов.

Основной идеей nw.js является объединение Chromium и node.js в единый контекст, используя один и тот же v8. Если сказать точнее, node.js использует v8 Chromium-a. Т.е. при помощи Chromium мы можем создать графический интерфейс на основе html, css, js, как и в любом веб-браузере. Но, в отличие от обычного браузера, nw.js позволяет из этого же контекста вызывать функции node.js для работы с системными API операционной системы.

Давайте разберем простейший пример. При помощи модуля fs для io.js мы будем следить за изменениями какого-нибудь файла в системе. В случае, если файл изменился, отобразим его содержимое в div-e c >

Как мы видим, здесь нет сервера и клиента, нет ajax, нет сокетов, нет http, нет обмена данными по сети. Как мы говорили, вся прелесть nwjs заключается в возможности работы с node.js из контекста Chromium.

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

Разработчики nw.js приложили немало усилий для обеспечения единого event loop и построения “моста” между контекстами node.js и chromium. Здесь можно почитать подробнее о технических деталях и проблемах, возникших при реализации этой задумки.

Начинаем погружение

Для начала скачайте и установите последнюю версию nw.js для Вашей платформы. Далее следуйте указаниям документации для настройки командной строки и алиасов для Вашей операционной системы.

Структура приложения nw.js

Приложение для nw.js состоит из обычных html, css, js файлов, структурированных произвольно. Нет никаких дополнительных правил и условностей по их компоновке.

При запуске nw.js ищет файл манифеста package.json .

Пример package.json

Этот файл ничем не отличается от обычного package.json в node.js, за исключением того, что он содержит дополнительные параметры: window , user-agent , chromium-args , js-flags и другие. Они позволяют nw.js настраивать и контролировать поведение Chromium и его окружения, добавлять флаги при запуске node.js, менять режим отображения, размеры окна, иконки, точку входа в приложение и множество других установок.

Для примера мы создадим файл index.html и добавим немного CSS.

index.html

Затем откроем консоль и наберем:

где my/lovely/app – путь к папке с приложением, а nw – правильно настроенный алиас для nw.js

И все! В результате запустится десктопное приложение, которое выглядит примерно так:

Настройка отображения окна

Результат, который мы видим очень похож на обычный браузер с адресной строкой. В принципе, это и есть браузер! Да-да, тот самый Chromium, о котором мы говорили.

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

Для этого существует целый ряд настроек, доступных в package.json . Давайте подробнее остановимся на некоторых из них.

Для начала можем убрать тулбар.

package.json

При желании можно скрыть фрейм окна.

package.json

Или вообще убрать фон окна, оставив только контент.

package.json

Kiosk-mode

Еще одной мощной опцией является возможность запуска приложений в Kiosk-mode. Этот режим часто используется в десктопных играх, а также на экранах в публичных местах (например, для показа рекламы на больших мониторах). Выйти из приложения, запущенного в Кiosk-mode не так просто как из браузерного fullscreen. Это можно сделать только при помощи методов API nw.js, Alt-Tab или Ctrl-Alt-Del(Windows), поэтому, разрабатывая приложения, работающие в этом режиме, Вы сами должны позаботиться о наличии в интерфейсе некоторой кнопки “Выход”, которая поможет пользователю его закрыть.

package.json

Ну и, наконец, мы просто можем скрыть окно, оставив приложение в фоновом режиме

Элементы интерфейса операционной системы.

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

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

А теперь давайте посмотрим подробнее на некоторые из вышеописанных возможностей.

Создание системных контекстных меню

Вот что мы получим в итоге при клике правой клавишей на окне: