【Electron】クールファミリークライアント開発実践共有—ブラウザ起動クライアント

作者:鍾離、クール家楽PCクライアント担当者原文住所:https://webfe.kujiale.com/browser-to-client/クールホームクライアント:ダウンロードアドレスhttps://www.kujiale.com/activity/136バックグラウンド:クールファミリークライアントがV 12の改版に成功した後、多くの貴重な経験と最適な実践を蓄積しました.先のコミュニティではElectronに関する知識が比較的少ないので、これらの内容を一連の文章で共有したいです.シリーズ記事:

【Electron】クールファミリークライアント開発実践共有―ピット編

【Electron】クールファミリークライアント開発実践共有—ソフトウェア自動更新

【Electron】クールファミリークライアント開発実践共有―ブラウザ起動クライアント

【Electron】クールファミリークライアント開発実践共有－プロセス通信

【Electron】クールファミリークライアント開発実践共有-ダウンロードマネージャ

不定期更新…

背景
多くのローカルアプリケーション(例えば、vscode、QQ)は、ブラウザを通じてPC上のローカルソフトウェアを起動することをサポートしています.
この機能はウェブ端末とクライアントを連動させることができます.ユーザー体験もとても良く、実現も複雑ではありません.クールファミリークライアントはこの機能をサポートしています.
原理を実現する
ブラウザは、urlを解析する際に、システムからurlプロトコルに関連するアプリケーションをローカルに探してみます.関連するアプリケーションがあれば、このアプリケーションを開けてみます.
例えばVsCodeがweb端末からプラグインをインストールする場合、実際にはvscodeプロトコルのurlにアクセスし、ユーザローカルVsCodeを起動する目的を達成する.
具体的に実現する
今は、ユーザー定義のプロトコルをユーザーコンピュータに登録するだけで、機能が実現できます.ユーザーブラウザからカスタマイズプロトコルのあるurlにアクセスすると、クライアントが起動します.
Windows
windowsの下で、契約書を登録するのは簡単です.レジストリを書けばいいです.この部分はマイクロソフトのお父さんが詳しい文書を持っています.Registining an Appliation to a URI Schemeを参照してください.
インストールプログラムにレジストリ項目を書き込み、アンインストールプログラムに指定してこれらのレジストリ項目を削除することを推奨します.以下はinno setupパッケージで、レジストリを操作するコードの例です.

[Registry]
Root: HKCR; SubKey: Kujiale; ValueData: "KujialeProtocol"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale; ValueName: "URL Protocol"; ValueData: "{app}\{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale\DefaultIcon; ValueData: "{app}\{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale\shell\open\command; ValueData: "{app}\{#appExe} ""%1"""; Flags: createvalueifdoesntexist uninsdeletekey; ValueType: string;

もちろん、ソフトウェア起動時にレジストリを操作してもいいです.この時はNodeJsを使ってレジストリとインタラクションして、npmパッケージのnode-regeditを勧めます.
カスタムプロトコルの登録が成功したら、レジストリの中はこのようになります.
MacOS
MacOSシステムの下では、レジストリは書いていませんので、別の実装方法でお願いします.その前に、何か紹介しておきます.
info.plist
iOSとMacOSのアプリケーションパッケージには、主にアプリケーションの一部のmeta情報を記録するためのinfo.plistファイルがあります.Information Property Listを参照してください.ファイルはキーペアの形で情報(xml)を記録します.構造は以下の通りです.
CFBundleURLType
公式説明:CFBundleURLTypes:A list of URL schemes(http,ftp,and so on)supported by the ap.
実は、これはinfo.plistの中の一つのkeyです.対応するvalueは行列です.このフィールドを通じてアプリケーションに一つ以上のURL Schemaを登録することができます.CFBundleURLTypesを参照してください.
info.plistファイルを変更する
plistファイルを了解した後、私達は今Appパッケージのinfo.plistのために、CFBundleURLTypesの値を設定すればいいです.どのように修正しますか?手書きですか?nono、こういうことはもちろん道具に任せます.でないと、lowすぎます.
Electron Packagerにおいて、カスタマイズプロトコルを登録することができる構成protocolsがあり、MacOS端末のみに有効である.原理は上述の修正infi.plistファイルである.

// for mac
options.protocols = [{
  name: '  ',
  schemes: ['zhongli', 'test'], //         
}];

受信パラメータ
プロトコルの登録が完了したら、ブラウザでカスタマイズプロトコルurlにアクセスしてクライアントを起動することができます.
urlの異なるパラメータについては、クライアントの挙動も異なります.例えば、vscode:extension/ms-python.pythonのこのurlは、VsCodeを起動したと同時にVsCodeにも教えました.プラグインをインストールしたいです.プラグイン名はms-phthon.pythonです.
Vscodeは、urlのパラメータを解析することによって、カスタム挙動を実現しますが、クライアントとしてこのurlをどうやって取得しますか?
Windows
windowsに対して、パラメータは起動パラメータでアプリケーションに伝達されます.したがって、私たちはこのパラメータを簡単に入手することができます.

//      url      
console.log(process.argv);

//    
[
 'C://your-app.exe', //     
 'kujiale://111',  //       url
]

MacOS
Macではパラメータを起動してアプリケーションに転送しません.カスタマイズしたプロトコルでアプリケーションを開きます.

// mac   kujiale      
app.on('open-url', (e, url) => { // eslint-disable-line
  parse(url)；   url
});

最後に
本論文はブラウザからPC端末のアプリケーションを起動する方法を説明する二つの部分に分けている.

カスタムプロトコルを登録し、すべてのアプリケーションに対して

を適用します.

はパラメータを受信し、Electronを用いて構築されたアプリケーションに対して

を適用する.
コメントエリアでの議論、技術交流＆内挿->[email protected]