Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Meet BrowserEngineKit
Search
swiftty
August 23, 2024
Programming
0
1.7k
Meet BrowserEngineKit
iOSDC Japan 2024 Day 1, Track C で発表した内容です
https://iosdc.jp/2024/
swiftty
August 23, 2024
Tweet
Share
More Decks by swiftty
See All by swiftty
Wantedly Visit での SKIE の導入と振り返り
swiftty
0
35
iOS 18 から追加された SwiftUI の傾向について調べてみる
swiftty
3
610
Flutter アプリのリリースフローを考える
swiftty
0
260
Cloud-managed certificates へ移行した話
swiftty
0
470
同じアプリを Flutter と SwiftUI で書いてみる
swiftty
0
520
Swift Package Manager へ移行した話
swiftty
0
620
SwiftLint にコントリビュートする
swiftty
1
4.6k
SwiftUI でリスト要素のインプレッションを計測する
swiftty
0
520
個人開発アプリでの Swift Macros 紹介
swiftty
0
600
Other Decks in Programming
See All in Programming
Digging into the Matrix: Practicing Code Archaeology
arthurdoler
PRO
0
200
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
110
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
ruby.wasmとWebSocketで遊ぼう!
lnit
0
140
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
130
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
730
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
600
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
がんばりすぎないコーディングルール運用術
tsukakei
1
110
tsconfigのオプションで変わる型世界
keisukeikeda
1
110
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
4
540
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Producing Creativity
orderedlist
PRO
345
40k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
For a Future-Friendly Web
brad_frost
178
9.7k
Fireside Chat
paigeccino
37
3.5k
We Have a Design System, Now What?
morganepeng
52
7.6k
Music & Morning Musume
bryan
47
6.5k
Unsuck your backbone
ammeep
671
58k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
© 2024 Wantedly, Inc. Meet BrowserEngineKit 独自のブラウザエンジンを体験しよう iOSDC Japan 2024
- Day 1, Track C Aug. 23 2024 - 林達也
© 2024 Wantedly, Inc. 自己紹介 林達也 モバイルエンジニア @ ウォンテッドリー株式会社 github
swiftty x _swiftty wantedly tatsuya_hayashi_ar 性格診断 - ハーモナイザー
© 2024 Wantedly, Inc. 今日話すこと • ◦ BrowserEngineKit の構成
◦ 最初のステップについて • ◦ ブラウザエンジンの具体的な実装方法
© 2024 Wantedly, Inc. BrowserEngineKit とは
© 2024 Wantedly, Inc. BrowserEngineKit とは • 独自のブラウザエンジンを作成できるようになる フレームワーク •
今までのブラウザアプリでは WebKit の利用が必須だった構 成から独自のエンジンを利用できるようなアーキテクチャが可 能に
© 2024 Wantedly, Inc. BrowserEngineKit とは • 現在は EU かつ要件を満たし承認された開発者1のみが
ストアに公開することができる • ただしシミュレータであれば誰でも開発ができる 1: https://developer.apple.com/jp/support/alternative-browser-engines/
© 2024 Wantedly, Inc. BrowserEngineKit とは • 現在は EU かつ要件を満たし承認された開発者1のみが
ストアに公開することができる • ただしシミュレータであれば誰でも開発ができる 1: https://developer.apple.com/jp/support/alternative-browser-engines/ どんなことができる、どういったことができる フレームワーク?
© 2024 Wantedly, Inc. はじめに ブラウザエンジンの構成要素
© 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース(html,
css, js, …)の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork
© 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース(html,
css, js, …)の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork WebKit, Blink, Gecko, …
© 2024 Wantedly, Inc. ブラウザエンジンの構成要素 • ネットワーク処理系 ◦ URI から必要になるリソース(html,
css, js, …)の取得を担う • レンダリング処理系 ◦ html, css のパース、レイアウトの制御を担う • JavaScript 処理系 ◦ JavaScript の実行を担う • ストレージ処理系 ◦ Cookie などのデータ保存を担う • … https://web.dev/articles/howbrowserswork JavaScriptCore, V8, …
© 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行
• 安定性 ◦ 別のタブ(プロセス)がクラッシュしても他のタブや本体に 影響を与えない
© 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行
• 安定性 ◦ 別のタブ(プロセス)がクラッシュしても他のタブや本体に 影響を与えない iOS での独自ブラウザエンジンにおいても同様に マルチプロセスでの動作が要求されている
© 2024 Wantedly, Inc. ブラウザエンジンの特徴 近年のブラウザはマルチプロセスで動作する • セキュリティ ◦ メモリ空間の分離やサンドボックス下での実行
• 安定性 ◦ 別のタブ(プロセス)がクラッシュしても他のタブや本体に 影響を与えない iOS での独自ブラウザエンジンにおいても同様に マルチプロセスでの動作が要求されている ただし iOS アプリではプロセスの 生成について制限がある
© 2024 Wantedly, Inc. BrowserEngineKit では
© 2024 Wantedly, Inc. BrowserEngineKit では • 別プロセスで実行される App Extension
を用いて マルチプロセスを実現 • それぞれのプロセスとは XPC を用いたプロセス間 通信(IPC)によって行う
© 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割
• WebContentExtension ◦ タブなどのウェブページのコンテンツ一つごとに割り当てられる ◦ ネットワークやレンダリングなどのプロセスやアプリ本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
© 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割
• WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
© 2024 Wantedly, Inc. XPC とは
© 2024 Wantedly, Inc. XPC とは • iOS や macOS
などのプラットフォームでプロセス間 通信を実現するためのフレームワーク • 高レベルなインターフェースと低レベルなものがあるが BrowserEngineKit では低レベルなものを使用する ◦ C-like なインターフェース ◦ NSXPCConnection ↔ xpc_connection_t
© 2024 Wantedly, Inc. XPC とは xpc_connection_t オブジェクトを介してメッセージを 送受信する
© 2024 Wantedly, Inc. XPC とは xpc_connection_t オブジェクトを介してメッセージを 送受信する
© 2024 Wantedly, Inc. XPC とは メッセージの受け取りはそれぞれイベントハンドラを設置 することで非同期なコミュニケーションを実現する
© 2024 Wantedly, Inc. BrowserEngineKit の実装例
© 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割
• WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
© 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割
• WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う
© 2024 Wantedly, Inc. BrowserEngineKit では 各 App Extension の大まかな役割
• WebContentExtension ◦ タブなどのコンテンツ一つごとに割り当てる ◦ ネットワークやレンダリングなどのプロセスや本体とを仲介する • NetworkingExtension ◦ リソースの取得を行う • RenderingExtension ◦ リソースをもとにレンダリングを行う アプリケーション本体は 複数のプロセスを管理する必要がある
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • BrowserEngineKit で提供されて いるプロセスオブジェクトの
作成・保持 • WebContentProcess はコンテン ツ毎にプロセスが立ち上げるがそれ 以外は任意 プロセスプール
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 各プロセスは単純になければ新規に 作成される •
プロセスの異常終了時はコールバッ クが呼ばれる プロセスプール
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension
のプロセスを起動する プロセスの開始
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension
のプロセスを起動する ◦ それぞれのプロセスを準備し、 xpc_connection_t を用意 プロセスの開始
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • launchProcesses で各 Extension
のプロセスを起動する ◦ WebContentProcess がネットワークとレ ンダリングの処理を仲介できるようにプロセス 同士で行う通信を準備する プロセスの開始
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • NetworkingExtension 上で URLSession
などを利用してデータ を取得する リソースの取得
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess
を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess
を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
© 2024 Wantedly, Inc. BrowserEngineKit の実装例 • 自作のウェブビューではプロセス プールからユニークに生成された WebContentProcess
を得る • そのプロセスに対してウェブビューが 持つべき機能を要求する ◦ URL から結果を受け取る ◦ … ウェブビュー
© 2024 Wantedly, Inc. BrowserEngineKit の実装例
© 2024 Wantedly, Inc. おわりに • BrowserEngineKit を紹介 • 最初のステップとして各
App Extension やプロセス管理の 例を紹介 • →ここまでを基礎として、これからブラウザエンジンが作られて いく ◦ レンダリングエンジン、 JavaScript インタプリタ、 …
© 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
© 2024 Wantedly, Inc. ご清聴ありがとうございました!