Архив

Nativefier. Создание приложений из сайтов

Несколько месяцев назад я открыл для себя Nativefier — это инструмент который позволяет создавать типовые приложения на базе electron из web-сайтов.

Я целенаправленно начал искать такой инструмент, когда осознал, что уже четыре года использую Safari исключительно для того чтобы держать открытым окно с метриками в Grafana. Safari, в моем случае, выступает в роли отдельного приложения, к которому можно легко получить доступ через cmd+tab

macos grafana application

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

Если интересно и не хотите заморачиваться с установкой и сборкой, то список сервисов есть в конце статьи.

Установка

Если у вас macOS, то проще всего установить через brew

~ » brew info nativefier
nativefier: stable 8.0.7 (bottled)
Wrap web apps natively
https://github.com/jiahaog/nativefier
/usr/local/Cellar/nativefier/8.0.7 (7,969 files, 25.4MB) *
  Poured from bottle on 2020-04-25 at 00:18:44
From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/nativefier.rb
==> Dependencies
Required: node ✔

Для остальных случаев можно использовать docker

docker pull jiahaog/nativefier

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

Базовая сборка

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

macos grafana application

nativefier \
    -n "Grafana" \
    -p 'osx' \
    -f -m \
    -i /path/to/icon.png \
        --internal-urls "https://play.grafana.org/d/*" \
    --single-instance \
        "https://play.grafana.org/d/000000012/grafana-play-home?orgId=1" \
    /path/to/output/

Обратите внимание на параметры:

  • --internal-urls "https://play.grafana.org/d/*" - все ссылки попадающие под маску будут открываться внутри приложения. Все остальные будут открыты в браузере по умолчанию
  • --single-instance - можно ли запускать несколько копий приложения
  • Иконка была взята в поиске по картинкам

Дополнительные улучшения

В качестве дополнительных улучшений, на macOS, можно сделать чтобы title bar приложения был спрятан и, как бы, интегрирован в него.

macos grafana application

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

--title-bar-style со значением hiddenInset.

Дополнительную информацию можно почитать в документации к Electron (1), документации к Electron (2).

При этом, если просто скрыть title bar, то после запуска приложения, его будет очень сложно двигать по экрану, т.к. на нем нету мест за которые его можно ухватить.

Чтобы исправить это, необходимо определить элементы приложения, за которые его можно перетаскивать по экрану. Это делается с помощью css свойства -webkit-app-region: no-drag

Таки образом, нужно создать отдельный css файл, который мы будем внедрять в приложение на этапе сборки, через параметр --inject

Дополнительно информацию можно почитать в документации к Electron.

После того как мы скрыли тайтл, элементы управления окно сползли вниз и залезли на иконку с логотипом. Чтобы сделать этот угол примыкания корректным, я внес еще несколько изменений во внедряемый стиль:

  • Добавил внутренний верхний отступ у логотипа
  • Увеличил ширину бокового меню, чтобы элементы управления помещались в него
  • Поправил правый отступ у логотипа, чтобы он выглядел более симметричного, в новой ширине колонки

В итоге, стиль который я внедрил в приложение выглядит так:

.sidemenu {
    padding-top: 40px;
    width: 75px !important;
}

.sidemenu__logo {
    padding-left: 20px !important;
}

.navbar {
    -webkit-app-region: drag;
}

А команда для сборки приложений таким образом:

nativefier \
    -n "Grafana" \
    -p 'osx' \
    -f -m \
    --title-bar-style "hiddenInset" \
    --inject ./style.css \
    -i /path/to/icon.png \
    --internal-urls "https://play.grafana.org/d/*" \
    --single-instance \
    "https://play.grafana.org/d/000000012/grafana-play-home?orgId=1" \
    /path/to/output/

GitHub

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

Сервисы для создания приложений:

Другие статьи в блоге:

⟵ Zero Inbox. Гайд по наведению порядка в почте