モバイルアプリで外部リンクを開くことはよくあります。ユーザーがアプリから完全に離れずにリンクを開ければ、使い勝手が向上します。Expoではそのために expo-web-browser モジュールを提供しています。この記事ではWebBrowserの使い方と、似た機能を持つWebViewとの違いを説明します。
expo-web-browser は、外部のWebページを
アプリ内ブラウザ
として開くExpoのライブラリです。ユーザーはアプリを閉じずにWebページを閲覧できます。
iOSのSafari View Controller
または
AndroidのChrome Custom Tabs
を使って動くため、標準ブラウザのような速く安全なUIを保ちながら、アプリ内にいるような操作感を提供します。
まず expo-web-browser パッケージをインストールします。
npx expo install expo-web-browser
インストール後は次のように使えます。
import * as WebBrowser from 'expo-web-browser';
import { Button } from 'react-native';
export default function App() {
const openLink = async () => {
await WebBrowser.openBrowserAsync('https://example.com');
};
return <Button title="링크 열기" onPress={openLink} />;
}
この例ではボタンを押すと、
https://example.com が
アプリ内ブラウザ
で開きます。ユーザーはアプリを離れずにページを閲覧し、見終わったらアプリに戻れます。
WebBrowser
と
WebView
は混同しやすいですが、機能と用途には次の違いがあります。
| 項目 | WebBrowser | WebView |
|---|
| UI | システム標準ブラウザのUI(Safari / Chrome) | アプリ内のブラウザコンポーネント |
|---|
| セキュリティ | システムのブラウザ機能を使うため比較的高い | アプリで直接描画し、セキュリティ設定が必要 |
|---|
| 用途 | 外部リンクを開く | Webアプリをアプリ内に組み込む |
|---|
| ユーザー体験 | ブラウザに近い(アドレスバーあり) | アプリに溶け込む(アドレスバーなし) |
|---|
| 複雑さ | 非常に簡単 | 設定と管理が必要 |
|---|
ログインのリンクを開いたり、利用規約を表示したりするならWebBrowserが適しています。Webで作ったUIをアプリ内で継続的に表示するなら、WebViewが向いています。
WebBrowserを使うときは、次の点に注意します。
iOSシミュレーターではSafari View Controllerが動かない場合があります。
実機でテストするとよいでしょう。
openBrowserAsync はPromiseを返すので、閉じたときの処理などを追加できます。
例えば、ブラウザを閉じたあとに特定の動作を実行できます。
const result = await WebBrowser.openBrowserAsync('https://example.com');
if (result.type === 'dismiss') {
console.log('브라우저가 닫혔습니다.');
}
Expoの WebBrowser を使うと、外部リンクをアプリ内で簡単に表示できます。WebView より設定が簡単でセキュリティも高いため、単にリンクを開く場合に適しています。
- WebBrowserでログインページを開き、認証完了後にアプリに戻る流れを実装できます。
openAuthSessionAsync を使うと、OAuthログインに特化したフローも実装できます。