Создание кроссплатформенного настольного приложения с помощью NW.js

Эта статья была рецензирована Тимом Севериеном и Джоан Инь . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

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

Гибридные приложения не просто хороши, потому что они написаны на языках, с которыми вы уже знакомы (HTML, JavaScript и CSS), но также потому, что они предлагают существенные преимущества по сравнению с обычными веб-приложениями:

• Контроль над браузером и версией браузера (вы знаете, из какого браузера вызывается ваше приложение). Гибридные приложения NW.js отображаются с помощью Chromium — браузера с открытым исходным кодом, работающего за Google Chrome. Поэтому приложения, работающие в Chrome, также должны работать с NW.js.
• Контроль над окнами просмотра. Вы можете, например, определить фиксированный или минимальный / максимальный видовой экран.
• Нет ограничений политики одного и того же происхождения из-за локальных файлов. Если вы открываете локальный файл из файловой системы, браузер блокирует запросы XMLHttpRequest для файлов, которые не находятся в одном каталоге. Это поведение можно отключить в приложениях NW.js.

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

• Интеграция с Node.js
• доступ к буферу обмена
• доступ к файловой системе
• аппаратный доступ (например, для получения списка принтеров)
• иконки в трее
• настраиваемые диалоги выбора файлов
• интеграция с оболочкой (открывать файлы или URL-адреса в проводнике по умолчанию или в браузере)
• возможность настройки всего окна (кнопки закрытия, строка меню) и контекстных меню
• возможность установить и получить уровень масштабирования.

Звучит здорово? Тогда начнем. В этой статье мы познакомимся на практике с NW.js и узнаем, как создать гибридное приложение. Пример приложения, созданного с использованием инструкций из этой статьи, можно найти на GitHub .

Преимущества NW.js по сравнению с Электроном

Во-первых, следует упомянуть одну вещь: NW.js — не единственная платформа для гибридных приложений. Есть еще один конкурент по имени Электрон . Он начался в 2013 году, через два года после NW.js, но, поскольку он появился на GitHub, он быстро стал широко известен. Теперь вас могут заинтересовать различия между ними. Вот преимущества NW.js по сравнению с Electron:

• Поддерживает chrome.* API. Эти API могут использоваться для взаимодействия с браузером. (Вы можете найти больше информации об этом в документации NW.js. )
• Имеет поддержку приложений Chrome . Приложения Chrome — это упакованные приложения, написанные на веб-языках. (Подробнее см. В документации разработчика Chrome .) Эти приложения отличаются от NW.js тем, что не имеют интеграции с Node.js и публикуются с использованием Chrome Web Store. (Chromium прекратит свою поддержку до августа 2018 года (см. Их сообщение в блоге ). Но согласно этому сообщению NW.js по-прежнему будет поддерживать приложения Chrome.)
• Поддерживает приложения NaCl (Native Client) и PNaCl (Portable Native Client). Они ориентированы на производительность и поэтому в основном написаны на C и C ++. (Смотрите это руководство о том, как использовать их в NW.js.)
• Имеет защиту исходного кода снимка V8, которая используется для защиты исходного кода вашего приложения. Используя инструмент nwjc , ваш код будет скомпилирован в нативный код. (См. Эту статью для получения дополнительной информации.)
• Имеет встроенный просмотрщик PDF.
• Позволяет предварительный просмотр печати.
• Поддерживает интеграцию Node.js в Web Workers . Они используются для написания многопоточных приложений.

Тем не менее, Electron также имеет ряд преимуществ, о которых стоит упомянуть:

• Встроенный автообновитель (вы можете следить за этим вопросом про автообновление для NW.js).
• Автоматическое сообщение о сбое на удаленный сервер. NW.js записывает только локальный файл, который затем можно отправить вручную.

Там также есть принципиальная разница. Приложения NW.js указывают свою точку входа в виде файла HTML. Этот HTML-файл будет открыт в графическом интерфейсе напрямую.

Электронные приложения, с другой стороны, указывают файл JavaScript в качестве точки входа. Этот файл JavaScript открывается в отдельном основном процессе, а затем может открыть файл HTML в графическом интерфейсе. Это означает, что теоретически вы можете запускать приложения Electron без графического интерфейса. Кроме того, закрытие графического интерфейса не приведет к закрытию основного процесса; вам нужно будет завершить его вручную, вызвав метод API.

Хотя Electron открывает двери для настольных приложений, написанных на JavaScript и без графического интерфейса, приложения NW.js, вероятно, проще в настройке, если вы просто хотите отобразить приложение на основе HTML.

Примечание. Если вы действительно предпочитаете преимущества Electron, ознакомьтесь с недавней статьей SitePoint о создании настольных приложений с помощью Electron .

Создание демо-приложения

Давайте начнем создавать наше приложение, которое мы позже скомпилируем в собственное приложение. Потому что существует множество способов настройки веб-приложения — с различными языками JS (TypeScript, CoffeeScript и т. Д.), Загрузчиками модулей (RequireJS, webpack, SystemJS и т. Д.), Средами (AngularJS, React, Vue.js и т. Д.). ) и препроцессоры (SCSS, LESS, Haml и т. д.) — и у каждого свои фавориты, мы просто используем базовые технологии HTML, CSS и JS (стандарт ES6).

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

 nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json 

 { "name":"nw.js-example", "main":"views/main.html", "window":{ "min_width":400, "min_height":400, "icon":"assets/icon.png" } } 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>NW.js-example | main</title> <link rel="stylesheet" href="../styles/common.css"> </head> <body> <h1>Hello World 🙂</h1> <script src="../app/main.js"></script> </body> </html> 

 <a href="something.html">Something</a> 

 { "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" } } - { "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" } } 

 $ npm install 

 { "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" }, "scripts":{ "dev":"nw src/", "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/" } } - { "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" }, "scripts":{ "dev":"nw src/", "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/" } } 

 $ npm run dev 

 $ npm run prod 

 dist/ └── nw.js-example/ ├── linux32/ ├── linux64/ ├── osx64/ ├── win32/ └── win64/ 

 nw.Window.get().showDevTools();