使用 @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser 打开一个 Capacitor 应用中的外部网页。使用 open() 适用于平台浏览器表面，或 openWebView() 当您的应用需要一个自定义大小、工具栏、消息、脚本、下载、代理、弹出控制、私有存储或 Ionic UI 层叠在页面上的管理的原生 WebView 时。

安装

npm install @capgo/capacitor-inappbrowser
npx cap sync

此插件暴露的内容

系统浏览器流程，带有 Android 上的 Chrome 自定义标签 SFSafariViewController On iOS.
可管理的 WebView，可以调整大小、隐藏、显示、在 Capacitor 应用程序后面移动，并将其带到前面。
点击、触摸和滚动的转发与 dispatchInputEvent() 当应用程序 UI 位于浏览器上方时。
部分屏幕浏览器，其中 Android 和 iOS 上的触摸事件外部 WebView 框架将传递给 Capacitor 应用程序。
cookie、缓存和完整的浏览数据清理与 persistWebViewData, clearCookies, clearAllCookies, clearCache, 和 clearAllBrowsingData.
应用程序与页面之间的通信与 postMessage(), 页面与应用程序之间的通信与 window.mobileApp.postMessage(...), 和脚本注入与 executeScript().
下载处理、原生代理规则、弹出控制、Google Pay 支持 _blank , 链接处理和隐藏的预加载浏览器实例。

常见用例

将应用 UI 置于一个活跃的浏览器上

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 内容之上的特性。

在一个浏览器窗口周围保持应用点击

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 上保持可点击。

避免持久的 Web 会话

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

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

使用此功能进行账户切换、结帐测试、支持模拟或认证流程，其中 cookie、缓存、本地存储和 IndexedDB 不应在需要时长时间存活。

预加载并交换多个 WebViews

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 });

隐藏的实例保持其状态可用，同时避免阻塞应用触摸的原生覆盖层。

嵌入一个高级 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 的实现细节查看 Getting Started 的实现细节 __CAPGO_KEEP_0__ 插件目录 Capgo 为 Capgo 产品工作流程在 Capgo 插件目录中 Capacitor 插件由 Capgo 提供为 Capacitor 插件的实现细节在 Capacitor 插件由 Capgo 提供，添加或更新插件为添加或更新插件的实现细节

In App Browser

In App 浏览器教程