Slide 1

Slide 1 text

© 2024 Wantedly, Inc. Meet BrowserEngineKit 独自のブラウザエンジンを体験しよう iOSDC Japan 2024 - Day 1, Track C Aug. 23 2024 - 林達也

Slide 2

Slide 2 text

© 2024 Wantedly, Inc. 自己紹介 林達也 モバイルエンジニア @ ウォンテッドリー株式会社 github swiftty x _swiftty wantedly tatsuya_hayashi_ar 性格診断 - ハーモナイザー

Slide 3

Slide 3 text

© 2024 Wantedly, Inc. 今日話すこと ● 󰢏 ○ BrowserEngineKit の構成 ○ 最初のステップについて ● 󰢃 ○ ブラウザエンジンの具体的な実装方法

Slide 4

Slide 4 text

© 2024 Wantedly, Inc. BrowserEngineKit とは

Slide 5

Slide 5 text

© 2024 Wantedly, Inc. BrowserEngineKit とは ● 独自のブラウザエンジンを作成できるようになる フレームワーク ● 今までのブラウザアプリでは WebKit の利用が必須だった構 成から独自のエンジンを利用できるようなアーキテクチャが可 能に

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

© 2024 Wantedly, Inc. はじめに ブラウザエンジンの構成要素

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

© 2024 Wantedly, Inc. BrowserEngineKit では

Slide 16

Slide 16 text

© 2024 Wantedly, Inc. BrowserEngineKit では ● 別プロセスで実行される App Extension を用いて マルチプロセスを実現 ● それぞれのプロセスとは XPC を用いたプロセス間 通信(IPC)によって行う

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

© 2024 Wantedly, Inc. XPC とは

Slide 20

Slide 20 text

© 2024 Wantedly, Inc. XPC とは ● iOS や macOS などのプラットフォームでプロセス間 通信を実現するためのフレームワーク ● 高レベルなインターフェースと低レベルなものがあるが BrowserEngineKit では低レベルなものを使用する ○ C-like なインターフェース ○ NSXPCConnection ↔ xpc_connection_t

Slide 21

Slide 21 text

© 2024 Wantedly, Inc. XPC とは xpc_connection_t オブジェクトを介してメッセージを 送受信する

Slide 22

Slide 22 text

© 2024 Wantedly, Inc. XPC とは xpc_connection_t オブジェクトを介してメッセージを 送受信する

Slide 23

Slide 23 text

© 2024 Wantedly, Inc. XPC とは メッセージの受け取りはそれぞれイベントハンドラを設置 することで非同期なコミュニケーションを実現する

Slide 24

Slide 24 text

© 2024 Wantedly, Inc. BrowserEngineKit の実装例

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

© 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割 ● WebContentExtension ○ タブなどのコンテンツ一つごとに割り当てる ○ ネットワークやレンダリングなどのプロセスや本体とを仲介する ● NetworkingExtension ○ リソースの取得を行う ● RenderingExtension ○ リソースをもとにレンダリングを行う アプリケーション本体は 複数のプロセスを管理する必要がある

Slide 28

Slide 28 text

© 2024 Wantedly, Inc. BrowserEngineKit の実装例 ● BrowserEngineKit で提供されて いるプロセスオブジェクトの 作成・保持 ● WebContentProcess はコンテン ツ毎にプロセスが立ち上げるがそれ 以外は任意 プロセスプール

Slide 29

Slide 29 text

© 2024 Wantedly, Inc. BrowserEngineKit の実装例 ● 各プロセスは単純になければ新規に 作成される ● プロセスの異常終了時はコールバッ クが呼ばれる プロセスプール

Slide 30

Slide 30 text

© 2024 Wantedly, Inc. BrowserEngineKit の実装例 ● launchProcesses で各 Extension のプロセスを起動する プロセスの開始

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

© 2024 Wantedly, Inc. BrowserEngineKit の実装例 ● NetworkingExtension 上で URLSession などを利用してデータ を取得する リソースの取得

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

© 2024 Wantedly, Inc. BrowserEngineKit の実装例

Slide 38

Slide 38 text

© 2024 Wantedly, Inc. おわりに ● BrowserEngineKit を紹介 ● 最初のステップとして各 App Extension やプロセス管理の 例を紹介 ● →ここまでを基礎として、これからブラウザエンジンが作られて いく ○ レンダリングエンジン、 JavaScript インタプリタ、 …

Slide 39

Slide 39 text

© 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

Slide 40

Slide 40 text

© 2024 Wantedly, Inc. ご清聴ありがとうございました!