Десктопные приложения

на веб-технологиях

by @nedudi @html5by

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

Я хочу, чтобы веб-приложение имело доступ к файловой системе, системным процессам, буферу обмена, сочетаниям клавиш и др.
Работало в фоне, могло запускаться при старте системы и офлайн.
Не спрашивало доступ к камере и микрофону.
Я хочу использовать в приложении Web Gl, Web Audio, Web RTC и другие ништячки и быть уверенным, что все работает одинаково и везде.
Могло создавать системные меню, окна, иконки в трее, управлять ими.

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

Делать скриншоты.
Пользоваться нотифиацией.
Делать кроссдоменные запросы, менять UserAgent, загружать Google во фрейме
Полноценный полноэкранный режим (kiosk-mode)
Распространять и рекламировать приложение через магазины приложений.
И просто, но важно… Запускалось нажатием на иконку!

Node? WebKit?

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

Единый контекст

    var fs = require('fs');
    fs.watchFile('access.log', function(a){
      document.getElementById('log').innerHTML =
      fs.readFileSync('access.log', {encoding:'utf8'});
    });

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

Единый event loop
Единый контекст

Здесь можно почитать подрбнее

package.json

"name": "dummydemo",
"version": "0.0.1",
"main": "index.html",
"window": {"width": 400,"height": 400},
"dependencies": {
  "moment": "2.10.2",
  "handlebars": "^2.0.0"
}

index.html

<div class="hello">
  Привет, NW.JS!
</div>

… добавим немного CSS и запустим

$ nw app

package.json

    ...
    "window": {
      "toolbar": false
    }
    ...

package.json

    ...
    "window": {
      "toolbar": false,
      "frame": false
    }
    ...

package.json

    ...
    "window": {
      "toolbar": false,
      "frame": false,
      "transparent": true
    }
    ...

package.json

    ...
    "window": {
       "kiosk": true
    }
    ...

package.json

    ...
    "window": {
       "show": false
    }
    ...

Элементы интерфейса ОС

            var gui = require('nw.gui');
            gui.Window.get(); //окно
            gui.Shell(); //оболочка
            gui.Tray // трей
            gui.Menu // менюшки
            gui.Clipboard // буффер обмена
            gui.Shortcut // сочетания клавиш
            // ...и другие элементы

var menu = new gui.Menu();
// Добавить пунктов меню или разделителей
menu.append(new gui.MenuItem({label: 'Ничего'}));
menu.append(new gui.MenuItem({type: 'separator'}));
// .. и повесить на них обработчики
menu.append(new gui.MenuItem({
  label: 'Сказать "Привет!"',
  click: function() {alert('Привет!');}
}));

var menubar = new gui.Menu({ type: 'menubar'});
// Подменю
menubar.append(new gui.MenuItem({ label: 'Главное'}));
menubar.append(new gui.MenuItem({ label: 'О нас',   
  submenu: menu
}));
//Получить текущее окно и подключить к нему верхнее меню
gui.Window.get().menu = menubar;

var tray = new gui.Tray({ 
  title: 'Привет', 
  icon: 'icon.png' 
});

var menu = new gui.Menu();
// .. наполняем меню пунктами
tray.menu = menu;


var shortcut = new gui.Shortcut({
  key : "Ctrl+Shift+A",
  active : function() {...},
  failed : function(msg) {...}
});
// регистрируем сочетание клавиш в системе
gui.App.registerGlobalHotKey(shortcut);

var clipboard = gui.Clipboard.get();
// получить значение
var text = clipboard.get('text');
// установить значение
clipboard.set('Привет', 'text');
// очистить буффер
clipboard.clear();