WebEngine ライフサイクルの例

WebEngine Lifecycle Exampleは、 の プロパティと プロパティを使用して、タブブラウザのバックグラウンドタブの CPU とメモリの使用量を削減する方法を示します。WebEngineView lifecycleState recommendedState

ライフサイクル機能の概要については、ページ・ライフサイクルAPIを参照してください。

例の実行

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

例の UI 要素

この例では、Qt Quick Controls 2 を使用して、従来のタブブラウザをマテリアル・スタイル（ダーク・バリアント）で実装しています。メイン・アプリケーション・ウィンドウ (WebBrowser.qml) は、上部のヘッダー・バーと、ウィンドウの残りの部分を埋めるメイン表示エリアに分かれています。ヘッダーにはタブバー(WebTabBar.qml)があり、タブごとに1つのボタン(WebTabButton.qml)があります。メインエリアはタブのスタック（WebTabStack.qml とWebTab.qml ）で構成されています。各タブの上部にはツールバーがあり、ウェブページを表示するためのWebEngineView 。最後に、メインウィンドウには設定を変更するためのDrawer もあります。ツールバーの「⋮」ボタンをクリックすると、ドロワーを開くことができます。

例におけるライフサイクル状態

この例では、手動と自動の 2 つの方法でライフサイクル状態を変更します。手動の方法では、lifecycleState プロパティを直接使用して Web ビューのライフサイクル状態を変更しますが、自動の方法はタイマーベースで、recommendedState も考慮します。

タブバーのタブタイトルは色分けされ、凍結されたタブは青、破棄されたタブは赤で表示されます。

手動によるライフサイクル・コントロール

手動コントロールは、タブバーボタンのコンテキストメニューによって提供される(WebTabButton.qml)。メニューには3つのラジオボタンがあり、ライフサイクルの状態ごとに1つずつ、現在の状態がチェックされています。一部のボタンは、不正な状態遷移を表すため（例えば、Discarded のビューは、Frozen の状態に直接遷移できません）、または他の前提条件が満たされていないため（例えば、表示可能なビューは、Active の状態にしかできません）、無効になっている場合があります。

自動ライフサイクル制御

自動制御は、WebTab コンポーネント (WebTab.qml) のTimer で実装されています。このタイマーは、ウェブビューのlifecycleState がrecommendedState と一致しないたびに開始されます。タイマーが開始されると、ビューのライフサイクル状態は推奨状態に設定されます。

時間遅延は、ユーザがタブを切り替えているときに、ライフサイクルの状態が急激に変化するのを避けるために使用されます。凍結と破棄の遅延は、ツールバーの"⋮"ボタンからアクセスできる設定ドロワーで変更できます。

これは、自動ライフサイクル制御のためのかなり単純なアルゴリズムですが、lifecycleState プロパティに基づいて、より洗練されたアルゴリズムを考え、実装することもできます。例えば、Chromiumブラウザは実験的に、事前に訓練されたディープ・ニューラル・ネットワークを使用して、ユーザーによる次のタブの起動時間を予測する。このようなアルゴリズムを実装することは、今のところ読者への練習として残されている。

サンプルプロジェクト @ code.qt.io