Это обзор и руководство по созданию настольных программ для Linux, Mac и Windows с помощью NW.js.

NW.js - это фреймворк для создания настольных приложений с использованием HTML, CSS и JavaScript. Он работает путем объединения приложения JavaScript с Node.js и движком браузера Google Chromium в единую настольную программу.

Я фронтенд-разработчик с небольшим опытом создания настольных приложений и установщиков, поэтому мне потребовалось некоторое время, чтобы найти все подробности о том, как все настроить. Это руководство представляет собой обзор моих выводов. Я надеюсь, что это поможет вам начать работу с NW.js и создавать настольные программы и установщики. Я написал это руководство, используя MacOS 10.14 (Mojave), Ubuntu 18.04 и Windows 10.

NW.js вместо или Electron

Electron - наиболее известный фреймворк для создания нативных приложений. Мне также показалось, что это проще в использовании. Мое приложение, однако, полагается на requestAnimationFrame для синхронизации, и я не мог использовать Electron из-за проблемы в Chromium (таймер останавливается, когда окно приложения скрыто). В конце концов, NW.js не так уж и сложен в использовании.

Проект «Метроном»

Приложение для этого урока - простой метроном. Полезно для музыкального хронометража. Он использует requestAnimationFrame и генерирует звук, поэтому будет легко продемонстрировать, что с NW.js таймер requestAnimationFrame будет продолжать работать, даже если окно приложения скрыто за другими. См. Демонстрацию приложения здесь: https://hisschemoller.github.io/nwjs-tutorial/src/.

Обзор руководства

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

  • Настройка проекта для запуска в браузере
  • Запустите NW.js прямо из командной строки
  • Создайте настольную программу Mac (файл .app)
  • Создайте настольную программу Linux
  • Создайте настольную программу Windows (файл .exe)
  • Создайте установщик Mac (файл .dmg)
  • Создайте установщик Linux (файл .deb)
  • Создайте установщик Windows (файл .exe)

Настройка проекта для запуска приложения в браузере

Клонируйте репозиторий Git для учебника по адресу https://github.com/hisschemoller/nwjs-tutorial.

Установите зависимости как обычно и запустите, как определено в package.json.

yarn install
yarn start

Приложение теперь будет доступно по адресу http: // localhost: 3000.

Откройте URL-адрес в браузере, и вы увидите небольшой счетчик. Нажмите кнопку "Воспроизвести". Счетчик увеличивается, и при каждом увеличении счетчика раздается короткий сигнал.

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

Запустите NW.js прямо из командной строки

Во время разработки приложение можно легко протестировать в рамках NW из командной строки. Для настройки требуется всего несколько шагов:

  • Добавьте пакет NW как зависимость с помощью NPM
  • Создать файл манифеста
  • Запустите приложение в NW framework

Добавить NW как пакет NPM

Существует два варианта NW: для целей разработки существует версия SDK, которая содержит инструменты разработчика Chrome. В обычной версии отсутствуют инструменты разработчика, поэтому размер файла меньше. Чтобы использовать версию SDK, добавьте -sdk в строку версии.

Добавьте NW как devDependency в package.json :

"devDependencies": {
  "nw": "0.38.0-sdk"
}

Создать файл манифеста

NW требуется файл манифеста для запуска. Файл манифеста - это файл JSON с именем package.json. Как ни странно, он назван точно так же, как NPM package.json. Однако разница в том, что файл манифеста находится в том же каталоге, что и исходные файлы приложения, а package.json NPM находится в корне проекта.

+-- nwjs-tutorial
|   +-- package.json (NPM)
|   +-- src
|   |   +-- index.html
|   |   +-- package.json (NW manifest file)

Как минимум, манифесту нужны только поля name и main для запуска NW. Поле main указывает NW на точку входа приложения, которой в данном случае является index.html.

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

Это манифест приложения Metronome:

{
  "name": "Metronome_manifest_name",
  "description": "A metronome app to keep time.",
  "main": "index.html",
  "chromium-args": "--disable-raf-throttling",
  "window": {
    "icon": "img/icon.png",
    "height": 240,
    "resizable": false,
    "width": 400,
    "title": "Metronome_manifest_window_title"
  }
}

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

Я добавил в package.json сценарий для запуска NW, но его также можно легко запустить, просто набрав yarn nw в командной строке.

"scripts": {
  "start-nw": "nw --disable-raf-throttling"
},

После запуска NW ищет поле "main" в package.json, чтобы найти точку входа приложения, и ищет файл манифеста в том же каталоге, что и точка входа. Затем у него есть все данные, необходимые для запуска приложения.

Попробуйте запустить NW с параметром командной строки --disable-raf-throttling и без него и обратите внимание, что с параметром метроном продолжает работать, когда приложение скрыто.

Создание настольной программы с NW.js

Для создания настольной программы сборку NW можно загрузить со страницы загрузки nwjs.io по адресу https://nwjs.io/downloads/. Сборки доступны в различных вариантах для Mac, Linux и Windows, 32- или 64-разрядные, с опцией SDK или без нее.

Обычно для создания настольной программы вы добавляете исходные файлы проекта в загруженную сборку NW, и полученный пакет является программой для распространения. Однако есть различия между Mac, Linux и Windows. У NW.js есть собственная документация здесь.

Создайте настольную программу Mac (файл .app)

  1. Загрузите выпуск Mac с https://nwjs.io/downloads/ и разархивируйте загрузку. В распакованной папке находится файл nwjs.app (среди прочих).
  2. Упакуйте все файлы из каталога /src проекта в ZIP-файл и переименуйте его в app.nw. Итак, для ясности, расширение файла будет .nw вместо .zip, и он будет содержать каталоги index.html, css, js и fonts и package.json файл манифеста.
  3. Поместите app.nw в загруженный выпуск Mac в каталог nwjs.app/Contents/Resources/. (щелкните правой кнопкой мыши на nwjs.app и выберите «Показать содержимое пакета», чтобы открыть его)
  4. Чтобы добавить значки приложений, переименуйте /assets/icons/metronome.icns в app.icns и вставьте его в nwjs.app/Contents/Resources/. Файл должен заменить существующие значки по умолчанию. См. Ниже, чтобы создать файл .icns.
  5. Также перезапишите nwjs.app/Contents/Resources/documents.icns файлом .icns.

Файл nwjs.app теперь является исполняемым файлом, запускающим приложение. Это единственный файл, который вам нужен, вы можете удалить все остальные файлы в загрузке. Переименуйте файл в Metronome.app. Дважды щелкните, чтобы запустить его.

Файл .icns для Mac

На Mac вы можете создать .icns файл с помощью утилиты командной строки iconutil. Вот два урока:

  1. Https://retifrav.github.io/blog/2018/10/09/macos-convert-png-to-icns/
  2. Https://elliotekj.com/2014/05/27/how-to-create-high-resolution-icns-files/

В MacOS Mojave я создал файлы значков, как описано в первом руководстве, и запустил iconutil, как описано во втором. Это сработало. Общий обзор шагов:

  1. Создайте все необходимые png изображений. (Для этого урока они указаны в assets/icons/metronome.iconset).
  2. Поместите все файлы в папку и переименуйте папку, чтобы ее имя заканчивалось на .iconset. В данном случае metronome.iconset.
  3. Запустите Терминал и cd в каталог, где находится .iconset.
  4. Запустите iconutil, чтобы создать файл .icns, например:
iconutil -c icns metronome.iconset

Создайте настольную программу Linux

Я тестировал это на Ubuntu 18.04, но не знаю, насколько этот процесс отличается в других дистрибутивах Linux.

  1. Загрузите 32- или 64-разрядную версию Linux с https://nwjs.io/downloads/ и разархивируйте загрузку.
  2. Скопируйте все файлы из каталога /src проекта в корневой каталог загруженного пакета. В моем случае это называется nwjs-sdk-v0.38.0-linux-x64. Таким образом, ваши исходные файлы и package.json файл манифеста будут использовать один и тот же каталог с файлом nw при загрузке.
  3. Скопируйте файл /metronome.desktop в тот же корневой каталог, что и исходные файлы и манифест. См. Ниже, как создать файл .desktop.

Файл Linux .desktop

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

У файла должно быть уникальное описательное имя без пробелов. Для этого проекта я использую metronone.desktop. Место должно быть доступно для всех:

/usr/share/applications

Или, чтобы быть доступным для одного пользователя:

/.local/share/applications

Некоторые файловые ресурсы .desktop:

Установить в Linux вручную

Загрузите пакет Linux и скопируйте исходные файлы, манифест и файл значка, как в шагах «Создание настольной программы Linux» выше.

  1. Переименуйте пакет в метроном.
  2. Скопируйте пакет в каталог /opt.
  3. Скопируйте файл metronome.desktop в /usr/share/applications.

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

sudo cp -r /path/to/metronome /opt
sudo cp /path/to/metronome.desktop /usr/share/applications

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

Создайте настольную программу Windows (файл .exe)

  1. Загрузите 32- или 64-разрядную версию Windows с сайта https://nwjs.io/downloads/ и разархивируйте загрузку.
  2. Скопируйте все файлы из каталога /src проекта в корневой каталог загруженного пакета. Исходные файлы и package.json файл манифеста должны находиться в том же каталоге, что и файл nw.exe.
  3. Значок для nw.exe можно заменить такими инструментами, как Resource Hacker, nw-builder и node-winresourcer. (См. Ниже инструкции для Resource Hacker.)

Дважды щелкните nw.exe, чтобы запустить приложение.

Измените значок программы с помощью Resource Hacker

Windows использует значки типа файлов .ico. Существуют онлайн-конвертеры, которые могут генерировать .ico файл из другого типа изображения. Например, ICOConvert на https://icoconvert.com/.

  1. Загрузите Resource Hacker с http://angusj.com/resourcehacker/ и установите.
  2. Запустите программу Resource Hacker.
  3. Выберите Файл ›Открыть… и выберите файл nw.exe.
  4. На левой панели щелкните правой кнопкой мыши папку "Значок" и выберите "Заменить значок…"
  5. Нажмите «Открыть файл с новым значком…» и выберите файл assets / icons / metronome.ico.
  6. На правой панели выберите значок, который нужно заменить, обычно верхний в списке.
  7. Нажмите кнопку "Заменить".
  8. Щелкните Файл ›Сохранить…, чтобы сохранить исполняемый файл с новым значком.
  9. Переименуйте nw.exe в «metronome.exe».

Подробнее о Resource Hacker:

Установщики

Создайте установщик для Mac (файл .dmg)

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

Вторая часть - создание собственно установщика.

Создать шаблон

  1. Запустите Дисковую утилиту.
  2. Перейдите в Файл ›Новое изображение› Пустое изображение…
  3. Задайте имя файла изображения installerTemplate.dmg.
  4. Выберите папку для сохранения установщика.
  5. Назовите образ «установщик метронома».
  6. Выберите размер, соответствующий размеру приложения, 320 МБ.
  7. Остальные поля оставьте как есть.
  8. Нажмите «Сохранить», чтобы создать файл DMG.
  9. Дважды щелкните installerTemplate.dmg, чтобы открыть его. Он будет отображаться в Finder как устройство.

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

  1. В меню Finder выберите Просмотр ›Показать параметры просмотра.
  2. Настройте внешний вид папки. Установите его в режим просмотра значков, значки большего размера и т. Д.
  3. Скопируйте файл metronome.app в папку.
  4. Скопируйте ярлык наApplications в папку.
  5. Разместите значки в папке.
  6. При желании создайте фоновое изображение для папки, которое говорит пользователям перетащить metronome.app в Приложения. (Найдите его в /assets/mac/mac-installer-background.jpg.)
  7. Извлеките образ диска.

Создайте последний DMG

  1. Снова запустите Дисковую утилиту.
  2. В меню выберите Изображения ›Конвертировать….
  3. Выберите InstallerTemplate.dmg только что созданный.
  4. Введите имя окончательного изображения metronome-installer_1.0.dmg.
  5. Выберите Сжатый в качестве формата изображения.
  6. Нажмите «Сохранить», чтобы создать файл DMG.

Ресурсы для создания DMG:

Создайте установщик Linux (файл .deb)

Я использовал простой в использовании учебник, который вы можете найти здесь: https://ubuntuforums.org/showthread.php?t=910717. Шаги следующие:

  1. Создайте файл с именем control с информацией для инструментов управления пакетами, таких как dpkg, для управления пакетом. Я уже добавил файл для этого проекта в /assets/linux/.
  2. Создайте каталог для устанавливаемых файлов, в котором используется соглашение об именах <project>_<major version>.<minor version>-<package revision>. Итак, вот это metronome-installer_1.0.
  3. Внутри папки создайте файловую структуру, которая представляет расположение файлов для установки. Так же, как в описанной выше ручной установке. См. Пример ниже:
  4. Создайте установщик deb с dpkg-deb --build metronome-installer_1.0.

Это каталог и файловая структура:

+-- metronome-installer_1.0
|   +-- DEBIAN
|   |   +-- control
|   +-- usr
|   |   +-- share
|   |   |   +-- applications
|   |   |   |   +-- metronome.desktop
|   +-- opt
|   |   +-- metronome
|   |   |   +-- nw
|   |   |   +-- index.html
|   |   |   +-- package.json
|   |   |   +-- ... (and all the other files of the application)

Как уже упоминалось, создайте файл .deb с помощью:

dpkg-deb --build metronome-installer_1.0

В результате получился файл с именем metronome-installer_1.0.deb. После этого приложение Metronome можно установить с помощью:

sudo dpkg -i metronome-installer_1.0.deb

Еще одно руководство по установке deb:

Создайте установщик Windows (файл .exe)

INNO Setup признан лучшим здесь, в Slant, поэтому я решил использовать именно его.

  • Загрузите Inno Setup с сайта http://www.jrsoftware.org/isdl.php (текущая версия - innosetup-5.6.1.exe)
  • Установите и запустите Inno Setup, как обычно для приложений Windows.
  • В окне приветствия выберите «Создать новый файл сценария с помощью мастера сценариев».

Для обзора шагов мастера ознакомьтесь с файлом Readme GitHub этого руководства, так как в этом посте на Medium не может быть показана структура вложенного списка, которую я использовал для обзора. Или прочтите руководство с множеством полезных снимков экрана здесь.

  • После мастера откроется окно компилятора.
  • Нажмите «Да», чтобы скомпилировать новый скрипт.
  • Сохраните сценарий установки, чтобы вы могли скомпилировать программу установки в будущем без повторного использования этого мастера.

Компилятору потребуется немного времени для создания установщика, но вы сможете следить за процессом на панели «Вывод компилятора» Inno Setup.

В результате установщик представляет собой .exe файл, который знакомит пользователей с процедурой установки, с которой они знакомы.

Ресурсы по установке INNO:

И, наконец, еще несколько статей, которые мне показались полезными для знакомства с NW.js: