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
360
Flutter アプリのリリースフローを考える
swiftty
0
170
Cloud-managed certificates へ移行した話
swiftty
0
300
同じアプリを Flutter と SwiftUI で書いてみる
swiftty
0
410
Swift Package Manager へ移行した話
swiftty
0
490
SwiftLint にコントリビュートする
swiftty
1
4.5k
SwiftUI でリスト要素のインプレッションを計測する
swiftty
0
460
個人開発アプリでの Swift Macros 紹介
swiftty
0
540
SwiftUI + Kotlin Multiplatform 開発で見えた長所と短所
swiftty
2
5k
Other Decks in Programming
See All in Programming
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
220
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
3.9k
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
140
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
110
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
130
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
functionalなアプローチで動的要素を排除する
ryopeko
1
190
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Writing Fast Ruby
sferik
628
61k
Embracing the Ebb and Flow
colly
84
4.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
It's Worth the Effort
3n
183
28k
Code Reviewing Like a Champion
maltzj
521
39k
RailsConf 2023
tenderlove
29
970
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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. ご清聴ありがとうございました!