Meet BrowserEngineKit

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

Transcript

1. © 2024 Wantedly, Inc. Meet BrowserEngineKit 独自のブラウザエンジンを体験しよう iOSDC Japan 2024 - Day 1, Track C Aug. 23 2024 - 林達也
2. © 2024 Wantedly, Inc. 自己紹介 林達也 モバイルエンジニア @ ウォンテッドリー株式会社 github swiftty x _swiftty wantedly tatsuya_hayashi_ar 性格診断 - ハーモナイザー
3. © 2024 Wantedly, Inc. 今日話すこと • 󰢏 ◦ BrowserEngineKit の構成 ◦ 最初のステップについて • 󰢃 ◦ ブラウザエンジンの具体的な実装方法
4. © 2024 Wantedly, Inc. BrowserEngineKit とは
5. © 2024 Wantedly, Inc. BrowserEngineKit とは • 独自のブラウザエンジンを作成できるようになる フレームワーク • 今までのブラウザアプリでは WebKit の利用が必須だった構 成から独自のエンジンを利用できるようなアーキテクチャが可 能に
6. © 2024 Wantedly, Inc. BrowserEngineKit とは • 現在は EU かつ要件を満たし承認された開発者1のみが ストアに公開することができる • ただしシミュレータであれば誰でも開発ができる 1: https://developer.apple.com/jp/support/alternative-browser-engines/
7. © 2024 Wantedly, Inc. BrowserEngineKit とは • 現在は EU かつ要件を満たし承認された開発者1のみが ストアに公開することができる • ただしシミュレータであれば誰でも開発ができる 1: https://developer.apple.com/jp/support/alternative-browser-engines/ どんなことができる、どういったことができる フレームワーク？
8. © 2024 Wantedly, Inc. はじめに ブラウザエンジンの構成要素
9. © 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース（html, css, js, …）の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork
10. © 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース（html, css, js, …）の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork WebKit, Blink, Gecko, …
11. © 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース（html, css, js, …）の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork JavaScriptCore, V8, …
12. © 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行 • 安定性 ◦ 別のタブ（プロセス）がクラッシュしても他のタブや本体に 影響を与えない
13. © 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行 • 安定性 ◦ 別のタブ（プロセス）がクラッシュしても他のタブや本体に 影響を与えない iOS での独自ブラウザエンジンにおいても同様に マルチプロセスでの動作が要求されている
14. © 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行 • 安定性 ◦ 別のタブ（プロセス）がクラッシュしても他のタブや本体に 影響を与えない iOS での独自ブラウザエンジンにおいても同様に マルチプロセスでの動作が要求されている ただし iOS アプリではプロセスの 生成について制限がある
15. © 2024 Wantedly, Inc. BrowserEngineKit では
16. © 2024 Wantedly, Inc. BrowserEngineKit では • 別プロセスで実行される App Extension を用いて マルチプロセスを実現 • それぞれのプロセスとは XPC を用いたプロセス間 通信（IPC）によって行う
17. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割 • WebContentExtension ◦ タブなどのウェブページのコンテンツ一つごとに割り当てられる ◦ ネットワークやレンダリングなどのプロセスやアプリ本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
18. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割 • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
19. © 2024 Wantedly, Inc. XPC とは
20. © 2024 Wantedly, Inc. XPC とは • iOS や macOS などのプラットフォームでプロセス間 通信を実現するためのフレームワーク • 高レベルなインターフェースと低レベルなものがあるが BrowserEngineKit では低レベルなものを使用する ◦ C-like なインターフェース ◦ NSXPCConnection ↔ xpc_connection_t
21. © 2024 Wantedly, Inc. XPC とは xpc_connection_t オブジェクトを介してメッセージを 送受信する
22. © 2024 Wantedly, Inc. XPC とは xpc_connection_t オブジェクトを介してメッセージを 送受信する
23. © 2024 Wantedly, Inc. XPC とは メッセージの受け取りはそれぞれイベントハンドラを設置 することで非同期なコミュニケーションを実現する
24. © 2024 Wantedly, Inc. BrowserEngineKit の実装例
25. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割 • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
26. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割 • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
27. © 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割 • WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う アプリケーション本体は 複数のプロセスを管理する必要がある
28. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • BrowserEngineKit で提供されて いるプロセスオブジェクトの 作成・保持 • WebContentProcess はコンテン ツ毎にプロセスが立ち上げるがそれ 以外は任意 プロセスプール
29. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 各プロセスは単純になければ新規に 作成される • プロセスの異常終了時はコールバッ クが呼ばれる プロセスプール
30. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension のプロセスを起動する プロセスの開始
31. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension のプロセスを起動する ◦ それぞれのプロセスを準備し、 xpc_connection_t を用意 プロセスの開始
32. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension のプロセスを起動する ◦ WebContentProcess がネットワークとレ ンダリングの処理を仲介できるようにプロセス 同士で行う通信を準備する プロセスの開始
33. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • NetworkingExtension 上で URLSession などを利用してデータ を取得する リソースの取得
34. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
35. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
36. © 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
37. © 2024 Wantedly, Inc. BrowserEngineKit の実装例
38. © 2024 Wantedly, Inc. おわりに • BrowserEngineKit を紹介 • 最初のステップとして各 App Extension やプロセス管理の 例を紹介 • →ここまでを基礎として、これからブラウザエンジンが作られて いく ◦ レンダリングエンジン、 JavaScript インタプリタ、 …
39. © 2024 Wantedly, Inc. 参考 • https://developer.apple.com/documentation/browserenginekit/devel oping-a-browser-app-that-uses-an-alternative-browser-engine • https://developer.apple.com/documentation/browserenginekit • https://developer.apple.com/documentation/xpc
40. © 2024 Wantedly, Inc. ご清聴ありがとうございました！