Electron «Открыть с помощью» для Mac OSX

Пролог

Я люблю продукты Apple, но в основном то, что я использую каждый день для зарабатывания денег, - это операционная система. Мне нравится Mac OSX, я считаю, что это одна из лучших ОС для веб-разработки. Нет, Microsoft Windows недостаточно хороша для веб-разработки. Одна из вещей, которой нет в Mac OS, - это надлежащая галерея изображений.

Да, в новых версиях Mac OS вы можете видеть изображения не так, как искатель, или, возможно, использовать программу просмотра изображений по умолчанию, но это отчасти неубедительно. Я попытался найти что-то в App Store, но большинство других решений мне показались такими:

Итак, какие есть варианты? Ну, это зависит от обстоятельств - вы тот парень, который разговаривает, или вы тот парень, который предпринимает действия? Обычно я тот парень, который принимает меры и решает создать для этого настольное приложение. Не поймите меня неправильно, эта ужасная ситуация, в которой нет хорошей галереи изображений, была такой уже много лет, но только сейчас я решил что-то с этим сделать.

Оружие выбора

Итак, как веб-разработчик, я собираюсь использовать Electron, и, поскольку я в значительной степени сторонник VueJS, комбинация этих двух вещей выглядит нормально. Да, я видел сообщения об Electron, в которых люди писали, что это плохое и не лучшее решение. Но если мы посмотрим на картину в целом - Electron и VueJS для веб-разработчика должны быстро найти решение. Поскольку мы собираемся получить доступ к локальным файлам, нам не нужна какая-либо база данных или какая-то библиотека HTTP-запросов (кхм, аксиос, кхм).

Небольшой отказ от ответственности: я не собираюсь встраивать в это сообщение в блоге компоненты или архитектуру. В этом сообщении блога мы увидим, как получить доступ только к файлам, которые были выбраны и обработаны с помощью опции «Открыть с помощью»:

Пришло время создать приложение

Итак, давайте запустим приложение - мы можем использовать electronic-vue. В разделе readme у нас есть объяснение, как его настроить, но давайте напишем это здесь, чтобы было понятно:

Вышеописанный процесс создал для нас полноценное электронное приложение с красивым дизайном и информацией, которая для нас не так актуальна:

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

Код должен выглядеть так:

Введение в архитектуру Quick Electron

Есть две части: основной файл, который находится в main.js, он же главный процесс, и часть рендеринга, AKA render process, которая представляет собой раздел, в котором находится наше приложение Vue JS. в нашем случае это папка рендеринга. Основной процесс получает информацию от ОС, а затем создает главное окно браузера, которое загружает наш vue JS.

Как узнать, какие файлы были выбраны?

Мы можем использовать канал, который отправляет данные от основного процесса на рендер через Electron IPC. Звучит хорошо, что дальше? Нам нужно знать, какие файлы были выбраны опцией Открыть с помощью. Мы можем сделать это с помощью события open-file.

Теперь вы, вероятно, говорите себе - давайте соединимся между событиями, и мы можем двигаться дальше, верно? Короткий ответ - нет, мы не можем этого сделать.

Ответ довольно сложен, так что оставайтесь со мной: событие open-file запускается очень рано в процессе начальной загрузки нашего приложения Electron и процесса, который загружает само приложение , который вызывал готов, запускался после этого . Оба события могут не знать друг друга, поэтому наше приложение останется без важных данных - какие файлы были выбраны .

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

Простым решением будет запись в файл. Событие open-file запускается для каждого файла, поэтому нам нужно будет объединить их в один массив:

При событии ready мы запишем массив файлов в файл:

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

Сообщите ОС, что мы можем обрабатывать файлы

Нам нужно уведомить ОС, что наше приложение может обрабатывать изображения. Мы бы сделали это в файлах package.json в разделе build в mac свойство:

"build": {
  "productName": "open-with",
  "appId": "com.example.yourapp",
  "directories": {
    "output": "build"
  },
  "files": [
    "dist/electron/**/*"
  ],
  "dmg": {
    "contents": [
      {
        "x": 410,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      },
      {
        "x": 130,
        "y": 150,
        "type": "file"
      }
    ]
  },
  "mac": {
    "icon": "build/icons/icon.icns",
    "category": "public.app-category.photography",
    "fileAssociations": [
      {
        "ext": [
          "jpg",
          "jpeg",
          "png",
          "PNG",
          "tiff"
        ],
        "description": "Image files",
        "role": "Viewer"
      }
    ]
  },
  "win": {
    "icon": "build/icons/icon.ico"
  },
  "linux": {
    "icon": "build/icons"
  }
},

Пролуге

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

npm run build # Or yarn run build

Приложение будет скомпилировано в каталог build, и вы увидите файл dmg, который вы установите. ваше приложение с:

Теперь, когда пользователь будет использовать опцию «Открыть с помощью», появится приложение:

Если вы не видите приложение, возможно, вы захотите использовать параметр «Другое…» внизу списка.

Бонус

Поскольку вы прочитали все сообщения в блоге и попали сюда, взгляните на два репозитория;

Во-первых, репозиторий с примером кода, который вы видели в этом замечательном сообщении в блоге: https://github.com/RoySegall/electron-open-with-demo

Во-вторых, если вы ищете приложение, вы можете получить его здесь: https://github.com/RoySegall/imaginary