在应用内浏览器中打开 Capacitor 插件

使用 @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser 从 Capacitor 应用中打开外部 Web 内容。使用 open() 作为平台的浏览器界面，或者 openWebView() 当您的应用需要一个受管理的 Native WebView，并支持自定义尺寸、工具栏、消息、脚本、下载、代理、弹窗控制、私有存储，或在页面之上叠加 Ionic UI 时。

安装

npm install @capgo/capacitor-inappbrowser
npx cap sync

此插件公开的内容

• 在 Android 上使用 Chrome Custom Tabs 的系统浏览器流程，以及 SFSafariViewController 在 iOS 上的流程。
• 可管理的 WebView，支持调整大小、隐藏、显示、移动至 Capacitor 应用后方，并重新置于前台。
• 支持点击、触摸和滚动事件转发， dispatchInputEvent() 当应用 UI 位于浏览器上方时。
• 部分屏幕浏览器：在 Android 和 iOS 上，点击原生 WebView 框架之外的区域可穿透至 Capacitor 应用。
• 支持 Cookie、缓存及完整的浏览数据清理， persistWebViewData, clearCookies, clearAllCookies, clearCache，以及 clearAllBrowsingData.
• 支持应用与页面间的通信， postMessage()以及页面与应用间的通信。 window.mobileApp.postMessage(...)以及通过 script injection 实现的注入功能 executeScript().
• 支持下载管理、原生优先的代理规则、弹窗控制、Google Pay 支持、 _blank 链接处理以及隐藏的可预加载浏览器实例。

常见用例

将 App UI 置于 Live Browser 之上

import { InAppBrowser } from '@capgo/capacitor-inappbrowser';

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/checkout',
  toBack: true,
  transparentBackground: true,
});

await InAppBrowser.dispatchInputEvent({
  id,
  type: 'click',
  x: 160,
  y: 420,
});

await InAppBrowser.bringToFront({ id });

适用于结账覆盖层、基于浏览器的支付流程、引导式支持流程，或任何需要保持 Ionic 控制层位于实时 Web 内容之上的场景。

在 Browser Sheet 周围保持 App 可点击

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

自定义尺寸的浏览器仅捕获其框架内的触摸事件。在 Android 和 iOS 上，剩余的可见 App 区域仍可点击。

避免持久化的 Web 会话

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

适用于账号切换、结账测试、支持人员模拟，或需要确保 Cookie、缓存、local storage 和 IndexedDB 不会长期留存的身份验证流程。

预加载并切换多个 WebView

const first = await InAppBrowser.openWebView({ url: 'https://example.com/a', hidden: true });
const second = await InAppBrowser.openWebView({ url: 'https://example.com/b', hidden: true });

await InAppBrowser.show({ id: first.id });
await InAppBrowser.hide({ id: first.id });
await InAppBrowser.show({ id: second.id });

隐藏实例可在保持状态的同时，避免因原生覆盖层而阻塞 App 的触摸操作。

嵌入高级 Web 应用

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/portal',
  handleDownloads: true,
  openBlankTargetInWebView: true,
  hiddenPopupWindow: true,
  outboundProxyRules: [
    {
      urlRegex: '^https://example\\.com/api/',
      action: 'delegateToJs',
    },
  ],
});

await InAppBrowser.postMessage({
  id,
  detail: { source: 'app', action: 'refresh' },
});

适用于文档门户、上传流程、支持中心、视频通话、Google Pay 页面或交互式 Web 应用。无需离开应用外壳，即可实现原生应用级别的控制。

完整参考文档

• GitHub： https://github.com/Cap-go/capacitor-inappbrowser/
• 文档：/docs/plugins/inappbrowser/

继续阅读：使用 @capgo/capacitor-inappbrowser

如果你正在使用 使用 @capgo/capacitor-inappbrowser 要规划原生插件工作，请将其连接到 @capgo/capacitor-inappbrowser 有关 @capgo/capacitor-inappbrowser 中的实现细节， 快速入门 有关入门指南中的实现细节， Capgo 插件目录 用于 Capgo 插件目录中的产品工作流， 由 Capgo 提供的 Capacitor 插件 有关 Capgo 提供的 Capacitor 插件实现细节，以及 添加或更新插件 有关添加或更新插件的实现细节。