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
47
iOS 18 から追加された SwiftUI の傾向について調べてみる
swiftty
3
700
Flutter アプリのリリースフローを考える
swiftty
0
290
Cloud-managed certificates へ移行した話
swiftty
0
510
同じアプリを Flutter と SwiftUI で書いてみる
swiftty
0
550
Swift Package Manager へ移行した話
swiftty
0
660
SwiftLint にコントリビュートする
swiftty
1
4.6k
SwiftUI でリスト要素のインプレッションを計測する
swiftty
0
540
個人開発アプリでの Swift Macros 紹介
swiftty
0
620
Other Decks in Programming
See All in Programming
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
7
2.4k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
11
1.3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
PicoRuby on Rails
makicamel
2
140
Featured
See All Featured
Designing for Performance
lara
610
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Scaling GitHub
holman
460
140k
Raft: Consensus for Rubyists
vanstee
140
7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
BBQ
matthewcrist
89
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Code Review Best Practice
trishagee
69
19k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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. ご清聴ありがとうございました!