Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meet BrowserEngineKit

swiftty
August 23, 2024

Meet BrowserEngineKit

iOSDC Japan 2024 Day 1, Track C で発表した内容です
https://iosdc.jp/2024/

swiftty

August 23, 2024
Tweet

More Decks by swiftty

Other Decks in Programming

Transcript

  1. © 2024 Wantedly, Inc. 自己紹介 林達也 モバイルエンジニア @ ウォンテッドリー株式会社 github

    swiftty x _swiftty wantedly tatsuya_hayashi_ar 性格診断 - ハーモナイザー
  2. © 2024 Wantedly, Inc. 今日話すこと • 󰢏 ◦ BrowserEngineKit の構成

    ◦ 最初のステップについて • 󰢃 ◦ ブラウザエンジンの具体的な実装方法
  3. © 2024 Wantedly, Inc. BrowserEngineKit とは • 独自のブラウザエンジンを作成できるようになる フレームワーク •

    今までのブラウザアプリでは WebKit の利用が必須だった構 成から独自のエンジンを利用できるようなアーキテクチャが可 能に
  4. © 2024 Wantedly, Inc. BrowserEngineKit とは • 現在は EU かつ要件を満たし承認された開発者1のみが

    ストアに公開することができる • ただしシミュレータであれば誰でも開発ができる 1: https://developer.apple.com/jp/support/alternative-browser-engines/
  5. © 2024 Wantedly, Inc. BrowserEngineKit とは • 現在は EU かつ要件を満たし承認された開発者1のみが

    ストアに公開することができる • ただしシミュレータであれば誰でも開発ができる 1: https://developer.apple.com/jp/support/alternative-browser-engines/ どんなことができる、どういったことができる フレームワーク?
  6. © 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース(html,

    css, js, …)の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork
  7. © 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース(html,

    css, js, …)の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork WebKit, Blink, Gecko, …
  8. © 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース(html,

    css, js, …)の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork JavaScriptCore, V8, …
  9. © 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行

    • 安定性 ◦ 別のタブ(プロセス)がクラッシュしても他のタブや本体に 影響を与えない iOS での独自ブラウザエンジンにおいても同様に マルチプロセスでの動作が要求されている
  10. © 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行

    • 安定性 ◦ 別のタブ(プロセス)がクラッシュしても他のタブや本体に 影響を与えない iOS での独自ブラウザエンジンにおいても同様に マルチプロセスでの動作が要求されている ただし iOS アプリではプロセスの 生成について制限がある
  11. © 2024 Wantedly, Inc. BrowserEngineKit では • 別プロセスで実行される App Extension

    を用いて マルチプロセスを実現 • それぞれのプロセスとは XPC を用いたプロセス間 通信(IPC)によって行う
  12. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割

    • WebContentExtension ◦ タブなどのウェブページのコンテンツ一つごとに割り当てられる ◦ ネットワークやレンダリングなどのプロセスやアプリ本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
  13. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割

    • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
  14. © 2024 Wantedly, Inc. XPC とは • iOS や macOS

    などのプラットフォームでプロセス間 通信を実現するためのフレームワーク • 高レベルなインターフェースと低レベルなものがあるが BrowserEngineKit では低レベルなものを使用する ◦ C-like なインターフェース ◦ NSXPCConnection ↔ xpc_connection_t
  15. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割

    • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
  16. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割

    • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
  17. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割

    • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う アプリケーション本体は 複数のプロセスを管理する必要がある
  18. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • BrowserEngineKit で提供されて いるプロセスオブジェクトの

    作成・保持 • WebContentProcess はコンテン ツ毎にプロセスが立ち上げるがそれ 以外は任意 プロセスプール
  19. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 各プロセスは単純になければ新規に 作成される •

    プロセスの異常終了時はコールバッ クが呼ばれる プロセスプール
  20. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension

    のプロセスを起動する ◦ それぞれのプロセスを準備し、 xpc_connection_t を用意 プロセスの開始
  21. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension

    のプロセスを起動する ◦ WebContentProcess がネットワークとレ ンダリングの処理を仲介できるようにプロセス 同士で行う通信を準備する プロセスの開始
  22. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • NetworkingExtension 上で URLSession

    などを利用してデータ を取得する リソースの取得
  23. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess

    を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
  24. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess

    を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
  25. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess

    を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
  26. © 2024 Wantedly, Inc. おわりに • BrowserEngineKit を紹介 • 最初のステップとして各

    App Extension やプロセス管理の 例を紹介 • →ここまでを基礎として、これからブラウザエンジンが作られて いく ◦ レンダリングエンジン、 JavaScript インタプリタ、 …