web-dev-qa-db-ja.com

ElectronアプリをWebサイトから起動する方法

（特に）トランザクションに署名する電子暗号アプリがあります。

他のウェブサイトに、その電子アプリを開くボタンを用意して、いくつかのパラメーター（トランザクション情報）を事前に入力してもらう必要があります。

フローは次のとおりです。

  1. ユーザーがsome-crypto-site.comで「トランザクションを作成」をクリックする
  2. 事前入力されたパラメーターでelectronアプリが開きます
  3. ユーザーがelectronアプリで「トランザクションに署名」をクリックする
  4. electronアプリはバックグラウンドで機能します
  5. electronアプリが終了し、some-crypto-site.comにメッセージを送信します

これは、実行時またはインストール時に実行できます。

試したこと（Linux、Chrome）

呼び出し app.setAsDefaultProtocolClientthis Gist のコードで、基本的には：

app.setAsDefaultProtocolClient("my-app")

しかし、my-app://foo?bar=baz in chromeブラウザ、次のポップアップが表示され、open-xdgを押しても何も起こりません（ポップアップを閉じる以外は））

enter image description here

私は調べた

  1. Electron protocol api アプリ内プロトコルのみを処理するようです
  2. webtorrent .desktop file これが進むべき道かもしれませんが、どうすればいいのかわかりません。

たぶん、インストール時に 電子ビルダー を使用してそうする方法がありますか？

事前に助けてくれてありがとう、私はここでどのように進むべきか分かりません！

役に立つかもしれないリソース

  1. mac + windowの例でのgithubリポジトリ
  2. Linuxのgithubコメント
  3. Linux 2のgithubコメント
  4. つのOSすべてのSO回答
  5. SOウィンドウ回答
  6. Windows Registeryのnpmパッケージ
  7. SO mac answer
  8. SO linux answer
  9. Windows用Microsoftドキュメント
  10. Windowsの記事
  11. Windowsのgithubコメント
  12. mac用githubコメント
  13. macの場合はinfo.plst
  14. macとwinの古いリポジトリ
electronelectron-builder
14
goldylucks

これは仕事でやっていることに関連する可能性があるため、試してみることにしました。ただし、これはOSXでしかテストしていません！

app.setAsDefaultProtocolClient のドキュメントを見て、次のように書かれています：

注：macOSでは、アプリのinfo.plistに追加されたプロトコルのみを登録できますが、実行時に変更することはできません。ただし、ビルド時に、単純なテキストエディターまたはスクリプトを使用してファイルを変更できます。詳細については、Appleのドキュメントを参照してください。

これらのプロトコルは、electron-builderを使用してアプリをパッケージ化するときに定義できます。 buildを参照してください：

{
  "name": "foobar",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^3.0.7",
    "electron-builder": "^20.38.2"
  },
  "dependencies": {},
  "build": {
    "appId": "foobar.id",
    "mac": {
      "category": "foo.bar.category"
    },
    "protocols": {
      "name": "foobar-protocol",
      "schemes": [
        "foobar"
      ]
    }
  }
}

メインスレッドで：

const {app, BrowserWindow} = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

var link;

// This will catch clicks on links such as <a href="foobar://abc=1">open in foobar</a>
app.on('open-url', function (event, data) {
  event.preventDefault();
  link = data;
});

app.setAsDefaultProtocolClient('foobar');

// Export so you can access it from the renderer thread
module.exports.getLink = () => link;

レンダラースレッドで：

メインスレッドでエクスポートされたgetLink関数にアクセスするための リモート APIの使用に注意してください

<!DOCTYPE html>
<html>
  <body>
    <p>Received this data <input id="data"/></p>
    <script>
      const {getLink} = require('electron').remote.require('./main.js');
      document.querySelector('#data').value = getLink();
    </script>
  </body>
</html>

例

<a href="foobar://abc=1">open in foobar</a>

enter image description here

これにより、コマンドラインから起動することもできます。

open "foobar://xyz=1"

enter image description here

元の発信者に戻るにはどうすればよいですか？

アプリを起動するときに、発信者のURLを含めることができると思います。

<a href="foobar://abc=1&caller=example.com”>open in foobar</a>

Electronアプリがデータの処理を完了すると、単にそのURLにpingを返します

クレジット

私の発見のほとんどは、次のものに基づいています。

15
customcommander