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.1k
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
Flutter アプリのリリースフローを考える
swiftty
0
53
Cloud-managed certificates へ移行した話
swiftty
0
120
同じアプリを Flutter と SwiftUI で書いてみる
swiftty
0
250
Swift Package Manager へ移行した話
swiftty
0
240
SwiftLint にコントリビュートする
swiftty
1
4.3k
SwiftUI でリスト要素のインプレッションを計測する
swiftty
0
370
個人開発アプリでの Swift Macros 紹介
swiftty
0
470
SwiftUI + Kotlin Multiplatform 開発で見えた長所と短所
swiftty
2
4.7k
Other Decks in Programming
See All in Programming
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
890
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
120
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
4k
文化が生産性を作る
jimpei
3
540
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
aoseyuu
1
210
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.6k
型付きで行うVSCode拡張機能開発 / VSCode Meetup #31
mazrean
0
230
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
600
推しの夫に恋のGPS「ときメーター」#M5Stack #IoT #M5JPTour2024
riyu
0
230
AWS Lambda Web Adapterを活用する新しいサーバーレスの実装パターン
tmokmss
6
5.9k
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
110
CSC305 Lecture 01
javiergs
PRO
1
150
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Done Done
chrislema
181
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
Code Reviewing Like a Champion
maltzj
519
39k
Designing with Data
zakiwarfel
98
5.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
220
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Web Components: a chance to create the future
zenorocha
310
42k
Raft: Consensus for Rubyists
vanstee
136
6.6k
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. ご清聴ありがとうございました!