メインコンテンツへ飛ぶ

BrowserView から WebContentsView への移行

· 読むのにかかる時間 1 分
yangannyx
yangannyx

BrowserView は Electron 30 から非推奨となり、WebContentView に置き換えられます。 ありがたいことに、移行は比較的簡単です。

Electron は、Chromium の UI フレームワークである Views API に合わせて、BrowserView から WebContentsView へ移行しています。 WebContentsView は、Chromium のレンダリングパイプラインに直接結び付けられた再利用可能なビューを提供し、将来のアップグレードを簡素化し、開発者が Electron アプリに非ウェブ UI 要素を統合する可能性を広げます。 WebContentsView を採用することで、アプリケーションは今後のアップデートに備えることができるだけでなく、長期的にはコードの複雑さが軽減され、潜在的なバグも減少するというメリットも得られます。

BrowserWindow と BrowserView に精通している開発者は、BrowserWindow と WebContentsView がそれぞれ BaseWindow と View の基底クラスから派生したサブクラスであることに注意するとよいでしょう。 利用可能なインスタンス変数とメソッドを完全に理解するには、これら基底クラスのドキュメントを参照するようにしてください。

移行ステップ​

1. Electron 30.0.0 以降へアップグレード​

警告

Electron のリリースは、アプリケーションに影響する破壊的変更を含むことがあります。 残りの移行に進む前に、まず Electron のアップグレードをあなたのアプリでテストしてから実装することを推奨します。 Electron の各メジャーバージョンにおける破壊的変更点のリストは、こちら および Electron ブログの各メジャーバージョンのリリースノートに記載されています。

2. あなたのアプリケーションが BrowserView を使う場所を把握する​

1 つ方法は、あなたのコードベースで new BrowserView( を検索することです。 これにより、アプリケーションが BrowserView をどのように使用しているか、および移行する必要がある呼び出し箇所の数がわかります。

ヒント

ほとんどの場合、アプリが新規 BrowserView をインスタンス化している各コードは、他とは独立して移行できます。

3. BrowserView の使用それぞれを移行する​

  1. それぞれのインスタンス化を移行します。 WebContentsView と BrowserView のコンストラクターは本質的に同じ形状なので、これはかなり簡単なはずです。 どちらも webPreferences 引数を介して WebPreferences を受け入れます。

    - this.tabBar = new BrowserView({
    + this.tabBar = new WebContentsView({
    info

    デフォルトでは、WebContentsView は白い背景でインスタンス化され、BrowserView は透明な背景でインスタンス化されます。 WebContentsView で透明な背景にするには、以下のように背景色をアルファ (不透明度) チャンネルが 00 の RGBA 16 進値に設定します。

    + this.webContentsView.setBackgroundColor("#00000000");

  2. BrowserView を親ウインドウへ追加する場所を移行します。

    - this.browserWindow.addBrowserView(this.tabBar)
    + this.browserWindow.contentView.addChildView(this.tabBar);

  3. 親ウインドウの BrowserView インスタンスメソッドの呼び出しを移行します。

    旧メソッド新メソッド注釈
    win.setBrowserViewwin.contentView.removeChildView + win.contentView.addChildView
    win.getBrowserViewwin.contentView.children
    win.removeBrowserViewwin.contentView.removeChildView
    win.setTopBrowserViewwin.contentView.addChildView既存のビューで addChildView を呼び出すと、そのビューが最上位に並べ替えられます。
    win.getBrowserViewswin.contentView.children

  4. setAutoResize インスタンスメソッドをサイズ変更のリスナーへ移行します。

    - this.browserView.setAutoResize({
    -   vertical: true,
    - })

    + this.browserWindow.on('resize', () => {
    +   if (!this.browserWindow || !this.webContentsView) {
    +     return;
    +   }
    +   const bounds = this.browserWindow.getBounds();
    +   this.webContentsView.setBounds({
    +     x: 0,
    +     y: 0,
    +     width: bounds.width,
    +     height: bounds.height,
    +    });
    +  });
    ヒント

    browserView.webContents とインスタンスメソッド browserView.setBounds、browserView.getBounds、browserView.setBackgroundColor の既存の使用法はすべて移行不要で、そのままの WebContentsView インスタンスで動作するはずです！

4) テストして変更をコミットする​

問題が発生しましたか？ Electron の Issue トラッカーの WebContentsView タグを確認して、発生している問題が報告済かどうかご確認ください。 ここで Issue が見つからない場合は、お気軽に新しいバグレポートを追加してください。 テストケースの要点を含めてもらえると、Issue のより適切なトリアージに役立ちます！

おめでとうございます。WebContentsView への移行が完了しました！ 🎉