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.4k
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
iOS 18 から追加された SwiftUI の傾向について調べてみる
swiftty
3
270
Flutter アプリのリリースフローを考える
swiftty
0
140
Cloud-managed certificates へ移行した話
swiftty
0
270
同じアプリを Flutter と SwiftUI で書いてみる
swiftty
0
380
Swift Package Manager へ移行した話
swiftty
0
440
SwiftLint にコントリビュートする
swiftty
1
4.4k
SwiftUI でリスト要素のインプレッションを計測する
swiftty
0
440
個人開発アプリでの Swift Macros 紹介
swiftty
0
520
SwiftUI + Kotlin Multiplatform 開発で見えた長所と短所
swiftty
2
4.9k
Other Decks in Programming
See All in Programming
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
750
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
330
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
Recoilを剥がしている話
kirik
5
6.7k
103 Early Hints
sugi_0000
1
230
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
Zoneless Testing
rainerhahnekamp
0
120
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
760
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
MCP with Cloudflare Workers
yusukebe
2
220
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
181
21k
A better future with KSS
kneath
238
17k
Facilitating Awesome Meetings
lara
50
6.1k
Building an army of robots
kneath
302
44k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
GraphQLとの向き合い方2022年版
quramy
44
13k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
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. ご清聴ありがとうございました!