@ capgo/ inapp浏览器

应用浏览器中的Capacitor插件,有urlChangeEvent,双向通信,相机和麦克风使用等功能.

为什么是InApp Browser?

官方Capacitor浏览器插件有严格的安全限制,可以防止高级特性. InAppBrowser 取消了这些限制, 允许 :

• 双向通信 在您的应用程序和浏览器之间
• Java 脚本注入 用于动态内容操作
• 相机和麦克风接入 在浏览器上下文中
• URL 变化监测 导航跟踪
• 自定义工具栏和 UI 品牌经验
• Cookie 和缓存管理 用于会话控制
• 自定义大小 用于额外控制显示位置

适合OAuth流量,嵌入式网络应用,视频通话,以及任何需要与网络内容深度融合的情景.

文档

这里有最完整的医生: https://capgo.app/docs/plugins/inappbrowser/ 互联网档案馆的存檔,存档日期2013-12-11

兼容性

说明: 此插件的主要版本沿用了Capacitor的主要版本. 使用匹配您的 Capacitor 安装的版本( 如 Capacitor 8 的插件 v8) 。 只有最新的主要版本得到积极维护.

安装

npm install @capgo/inappbrowser
npx cap sync

使用量

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

InAppBrowser.open({ url: 'YOUR_URL' });

自定义 Chrome 自定义标签外观( Android)

这个 open() 在Android上发射Chrome自定义标签。 您可以自定义其外观以与您的应用程序相融合 :

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

InAppBrowser.open({
  url: 'https://example.com',
  toolbarColor: '#1A1A2E', // Match your app's theme
  showTitle: true, // Show page title instead of raw URL
  showArrow: true, // Back arrow instead of X close icon
  urlBarHidingEnabled: true, // Auto-hide URL bar on scroll
  disableShare: true, // Remove share from overflow menu
  disableBookmark: true, // Hide bookmark icon (undocumented, may break)
  disableDownload: true, // Hide download icon (undocumented, may break)
});

所有CCT选项都是只使用Android并安全被iOS忽略. 见 OpenOptions 用于完整文档.

打开带有自定义尺寸的 Web View

默认情况下,网页视图会在全屏中打开. 您可以设置自定义维度来控制大小和位置 :

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

// Open with custom dimensions (400x600 at position 50,100)
const { id } = await InAppBrowser.openWebView({
  url: 'YOUR_URL',
  width: 400,
  height: 600,
  x: 50,
  y: 100,
});

// Update dimensions at runtime
InAppBrowser.updateDimensions({
  id, // Optional, if omitted targets the active webview
  width: 500,
  height: 700,
  x: 100,
  y: 150,
});

触摸通过:当设定自定义维度(不是全屏)时,在网页视图界限外的触摸会穿过到基本的Capacitor网络视图,让用户在被曝光区域与你的应用交互. 这使得 InAppBrowser 在您的内容之上浮出水面的图片样式体验成为可能 .

以安全边距打开网络视图

要创建带有 20px 底边距( 浏览器外的安全边距) 的 WebView :

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

InAppBrowser.openWebView({
  url: 'YOUR_URL',
  enabledSafeBottomMargin: true,
});

不支持 Web 平台 。 使用 window.open 换句话说.

在全屏模式下打开 Webview

要以真实的全屏模式打开网页视图( 内容延伸至状态栏后面), 设置 enabledSafeTopMargin 改为 false数字 :

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

InAppBrowser.openWebView({
  url: 'YOUR_URL',
  enabledSafeTopMargin: false, // Disables safe area at top, allows full screen
});

此选项独立于工具栏类型 :

• iOS系统:网页视图延伸至状态栏后方,提供真实的边缘到边缘内容
• 机器人:上边框已禁用,允许内容填充整个屏幕

适合电子玩家,游戏等浸入体验,或全屏网络应用. 可与任何 toolbarType 设置.

代理实例

[大 代理处理在 8.6.0。 。 。 . 如果您已经依赖了旧的代理流, 请将此作为断开的迁移处理, 在运输前重新测试您的处理器 . 仅因为API名称保持不变,现有的代理处理器被认为不相容.

• 现在使用本地第一匹配 outboundProxyRules 财务报告和审定财务报表 inboundProxyRules。 。 。 .
• JavaScript 代理处理器现在收到一个 phase (单位:千美元)outbound 或者说 inbound) (中文(简体) ).
• 如果您手动回复 handleProxyRequest(...),通过同样的 phase 回到原生状态.
• 逾期答复,无正本 phase 现在可以忽略而不是改变错误的请求阶段.
• proxyRequests: true 财务报告和审定财务报表 proxyRequests: "<regex>" 仍然是遗留的相容模式。 不要不重新测试就将遗留模式与基于规则的新流相混合.
• 仅使用 URL/ 方法而不是保存的代理收听器 phase 与新流量不兼容.

以本地方式封锁一个请求

在不通过 JavaScript 绕行停止请求时使用本地规则 :

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

await InAppBrowser.openWebView({
  url: 'https://example.com',
  outboundProxyRules: [
    {
      urlRegex: '^https://www\\.google-analytics\\.com/.*',
      action: 'cancel',
    },
  ],
});

JavaScript 的一个脚本

使用 delegateToJs 如果您想要本地匹配, 但仍希望 JavaScript 替换响应 :

import { InAppBrowser, addProxyHandler } from '@capgo/inappbrowser';

const proxyHandle = await addProxyHandler(async (request) => {
  if (request.phase === 'inbound' && request.url.includes('connect.facebook.net')) {
    return new Response('window.FB = { init: () => {}, login: () => {}, getLoginStatus: () => {} };', {
      status: 200,
      headers: {
        'Content-Type': 'application/javascript; charset=utf-8',
      },
    });
  }

  return null;
});

await InAppBrowser.openWebView({
  url: 'https://www.grailed.com/users/sign_up',
  inboundProxyRules: [
    {
      urlRegex: '^https://connect\\.facebook\\.net/.*',
      action: 'delegateToJs',
    },
  ],
});

// Later, when you are done:
await proxyHandle.remove();

在 JavaScript 中重写输出的 API 请求

当一个请求在离开网页视图前必须修改时,返回 a request 覆盖 :

import { InAppBrowser, addProxyHandler } from '@capgo/inappbrowser';

const proxyHandle = await addProxyHandler(async (request) => {
  if (request.phase === 'outbound' && request.url.includes('/api/private')) {
    return {
      request: {
        url: request.url,
        headers: {
          ...request.headers,
          Authorization: 'Bearer MY_TOKEN',
          'X-Proxy-Debug': 'enabled',
        },
      },
    };
  }

  return null;
});

await InAppBrowser.openWebView({
  url: 'https://example.com/dashboard',
  outboundProxyRules: [
    {
      urlRegex: '^https://example\\.com/api/private.*',
      action: 'delegateToJs',
    },
  ],
});

// Later, when you are done:
await proxyHandle.remove();

测试应用程序和代码 :

https://github.com/Cap-go/demo-app/blob/main/src/views/plugins/Web.vue 互联网档案馆的存檔,存档日期2013-12-20

相机使用量

机器人

在您的 AndroidManifest.xml 文件 :

    <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
        <uses-permission android:name="android.permission.RECORD_AUDIO"/>

然后在使用相机时会询问权限.

iOS系统

在您的 Info.plist 文件 :

<key>NSCameraUsageDescription</key>
<string>We need access to the camera to record audio.</string>

微型电话的使用

机器人

在您的 AndroidManifest.xml 文件 :

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

然后在使用麦克风时会询问许可.

iOS系统

在您的 Info.plist 文件 :

<key>NSMicrophoneUsageDescription</key>
<string>We need access to the microphone to record audio.</string>

地点使用情况

机器人

在您的 AndroidManifest.xml 文件 :

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

然后,在网页视图中的网站何时请求位置,将询问权限.

iOS系统

在您的 Info.plist 文件 :

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location to provide location-based services.</string>

双向交流

通过此插件, 您可以将主应用程序的事件发送到内存浏览器, 反之亦然 .

数据被作为JSON对象发送,因此不允许任何函数或其他非JSON序列化类型.

对不应用者的主要应用, 细节对象为修饰

const { id } = await InAppBrowser.openWebView({ url: 'YOUR_URL' });
InAppBrowser.postMessage({ id, detail: { message: 'myMessage' } });
// Or broadcast to all open webviews
InAppBrowser.postMessage({ detail: { message: 'broadcast' } });

从 inapprowser 中的本地接收事件

window.addEventListener('messageFromNative', (event) => {
  console.log(event);
});

从 inapprowser 发送事件到主应用程序, 细节对象为修饰

window.mobileApp.postMessage({ detail: { message: 'myMessage' } });

接收主应用程序中无法浏览的事件

InAppBrowser.addListener('messageFromWebview', (event) => {
  console.log(event.id, event.detail);
});

关闭来自 inapprowser 本身的 approwser

window.mobileApp.close();

谷歌付费( Android)

要在Android上的应用程序浏览器内启用 Google Pay, 您必须这样做 所有三个 改为:

1. 打开浏览器时启用选项

过 enableGooglePaySupport: true 在你身边 openWebView 电话 :

InAppBrowser.openWebView({
  url: 'https://your-checkout-page.example.com',
  enableGooglePaySupport: true,
});

2. 向您添加付款请求意向查询 AndroidManifest.xml

Android 11+ 执行 软件包可见度。如果没有这些条目,WebView将无法发现Google Pay,付款表将永远不会出现.

添加以下内容: <manifest> 您的应用程序标签 AndroidManifest.xml (通常为: android/app/src/main/AndroidManifest.xml:

<queries>
  <!-- Required for Google Pay / Payment Request API in WebView -->
  <intent>
    <action android:name="org.chromium.intent.action.PAY" />
  </intent>
  <intent>
    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY" />
  </intent>
  <intent>
    <action android:name="org.chromium.intent.action.UPDATE_PAYMENT_DETAILS" />
  </intent>
</queries>

3. 要求Webview 120或以后

W3C支付请求API(由Google Pay使用)要求Android WebView 120+. 运行更古老的WebView版本的设备将无法完成Google Pay交易. 大多数现代Android设备已经满足了这一要求.

API 密码

• goBack(...)
• open(...)
• clearCookies(...)
• clearAllCookies(...)
• clearCache(...)
• getCookies(...)
• close(...)
• hide(...)
• show(...)
• openWebView(...)
• executeScript(...)
• postMessage(...)
• takeScreenshot(...)
• setUrl(...)
• addListener('urlChangeEvent', ...)
• addListener('buttonNearDoneClick', ...)
• addListener('closeEvent', ...)
• addListener('confirmBtnClicked', ...)
• addListener('messageFromWebview', ...)
• addListener('screenshotTaken', ...)
• addListener('browserPageLoaded', ...)
• addListener('pageLoadError', ...)
• addListener('customSchemeIntercepted', ...)
• addListener('downloadCompleted', ...)
• addListener('downloadFailed', ...)
• addListener('popupWindowOpened', ...)
• addListener('proxyRequest', ...)
• addListener('consoleMessage', ...)
• handleProxyRequest(...)
• removeAllListeners()
• reload(...)
• updateDimensions(...)
• setEnabledSafeTopMargin(...)
• setEnabledSafeBottomMargin(...)
• openSecureWindow(...)
• 接口
• 类型异名
• 数字

goBack (...) (中文(简体) )

goBack(options?: { id?: string | undefined; } | undefined) => Promise<{ canGoBack: boolean; }>

如果可能, 在 WebView 的历史中导航

回返情况: Promise<{ canGoBack: boolean; }>

自: 7.21.0 国家

打开(...)

open(options: OpenOptions) => Promise<any>

在新窗口全屏中打开 URL, 它使用自定义的铬标签, 在 ios 上使用 SFSafariView 控制器

回返情况: Promise<any>

自: 0.1.0 (中文(简体) )

清除 Cookies (...)

clearCookies(options: ClearCookieOptions) => Promise<any>

清除 URL 的饼干 何时 id ,并适用于所有开放的网页视图.

回返情况: Promise<any>

自: 0.5.0 (单位:千美元)

清除所有 Cookies (...)

clearAllCookies(options?: { id?: string | undefined; } | undefined) => Promise<any>

清除全部饼干 何时 id ,并适用于所有开放的网页视图.

回返情况: Promise<any>

自: 6.5.0 (中文(简体) )

清除缓存(...)

clearCache(options?: { id?: string | undefined; } | undefined) => Promise<any>

清除缓存 何时 id ,并适用于所有开放的网页视图.

回返情况: Promise<any>

自: 6.5.0 (中文(简体) )

获取 Cookies (...)

getCookies(options: GetCookieOptions) => Promise<Record<string, string>>

获取特定 URL 的 cookie .

回返情况: Promise<Record<string, string>>

关闭(...)

close(options?: CloseWebviewOptions | undefined) => Promise<any>

关闭网页视图. 何时 id 中省略,关闭活动的网页视图.

回返情况: Promise<any>

隐藏(...)

hide(options?: { id?: string | undefined; } | undefined) => Promise<void>

隐藏网页视图而不关闭 . 使用显示( ) 把它带回来 . 何时 id 被省略,以活动网页视图为目标.

自: 8.0.8 (中文(简体) )

显示(...)

show(options?: { id?: string | undefined; } | undefined) => Promise<void>

显示先前隐藏的网页视图 . 何时 id 被省略,以活动网页视图为目标.

自: 8.0.8 (中文(简体) )

打开WebView(...)

openWebView(options: OpenWebViewOptions) => Promise<{ id: string; }>

在有工具栏的新网页视图中打开url,并增强能力,如相机访问,文件访问,收听事件,注入javascript,双向通信等.

JavaScript 接口 : 当您用这种方法打开一个网页视图时, JavaScript 接口会自动被注入,提供:

• window.mobileApp.close(): 从 JavaScript 关闭网页视图
• window.mobileApp.postMessage({detail: {message: "myMessage"}}): 从网页视图发送消息到应用程序, 细节对象是您想要发送到网页视图的数据
• window.mobileApp.takeScreenshot() 何时 allowScreenshotsFromWebPage 真实

承诺时间因平台而异 isPresentAfterPageLoad 已使用. Android 解决与 { id } 在对话框准备好控制后, iOS 解决 { id } 创建本地网页视图后立即开始 .

回返情况: Promise<{ id: string; }>

自: 0.1.0 (中文(简体) )

执行脚本(...)

executeScript(options: { code: string; id?: string; }) => Promise<void>

将JavaScript代码注入InApp浏览器窗口. 何时 id 被省略,在所有打开的网页视图中执行.

后 Message (...) 翻译

postMessage(options: { detail: Record<string, any>; id?: string; }) => Promise<void>

将事件发送到网页视图( inapprowser) 。 您可以用窗口在无法阅读的 JS 中收听此事件。 add Event Listener (“ message From Native ” ), 听者Func : (活动 : 记录< 字符串, 任何 > )\ 无效 ) 细节是您想要发送到 Webview 的数据, 这是 Capacitor 的一项要求, 我们不能直接发送对象 您的对象必须可序列到 JSON, 所以不允许功能或其他非 JSON 序列化类型 . 何时 id 被省略,向所有开放的网页视图广播.

拍摄 Screenshot(...)

takeScreenshot(options?: { id?: string | undefined; } | undefined) => Promise<ScreenshotResult>

抓取当前网页视图端口为 PNG 截图 . 何时 id 被省略,以活动网页视图为目标.

回返情况: Promise<ScreenshotResult>

设置Url(...)

setUrl(options: { url: string; id?: string; }) => Promise<any>

设置网页视图的 URL. 何时 id 被省略,以活动网页视图为目标.

回返情况: Promise<any>

添加倾听器( “ url ChangeEvent , )..

addListener(eventName: 'urlChangeEvent', listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>

听 url 更改, 只为 openWebView

回返情况: Promise<PluginListenerHandle>

自: 0.0.1 资源

添加收听器( “ 按钮附近” )..

addListener(eventName: 'buttonNearDoneClick', listenerFunc: ButtonNearListener) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加聆听器( “ 关闭Event ” ,...)

addListener(eventName: 'closeEvent', listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>

仅为打开WebView而点击关闭

回返情况: Promise<PluginListenerHandle>

自: 0.4.0 (中文(简体) )

添加倾听器('确认BtnClicked',...)

addListener(eventName: 'confirmBtnClicked', listenerFunc: ConfirmBtnListener) => Promise<PluginListenerHandle>

当用户在需要免责声明时点击确认按钮时会被触发, 使用 OpenWebView 共享解说和关闭 Modal 工作

回返情况: Promise<PluginListenerHandle>

自: 0.0.1 资源

添加Listener( 来自Webview 的信息),..

addListener(eventName: 'messageFromWebview', listenerFunc: (event: { id?: string; detail?: Record<string, any>; rawMessage?: string; }) => void) => Promise<PluginListenerHandle>

当事件从webview( inappbrowser)发送时会被触发,将事件发送到主应用程序使用窗口.mobileApp.postMessage({"detail":{"message":"myMessage"}}) 细节是您想要发送到主应用程序的数据, 这是Capacitor的要求, 我们不能直接发送对象 您的对象必须是可序列化的 JSON, 不允许任何函数或其他非 JSON 序列化类型 .

此方法在网络视图运行时注入

回返情况: Promise<PluginListenerHandle>

添加倾听器( “ 屏幕截图 ” ,...)

addListener(eventName: 'screenshotTaken', listenerFunc: (event: ScreenshotResult & { id?: string; }) => void) => Promise<PluginListenerHandle>

一旦从插件 API 中捕获到截图, 就会被触发, 本地截图按钮,或注入的JavaScript桥.

回返情况: Promise<PluginListenerHandle>

添加倾听器('浏览器PageLoaded',...)

addListener(eventName: 'browserPageLoaded', listenerFunc: (event: { id?: string; }) => void) => Promise<PluginListenerHandle>

装入页面时将触发

回返情况: Promise<PluginListenerHandle>

添加倾听器( “ pageLoadError, ” )..

addListener(eventName: 'pageLoadError', listenerFunc: (event: { id?: string; }) => void) => Promise<PluginListenerHandle>

页面加载错误时会被触发

回返情况: Promise<PluginListenerHandle>

添加收听器( “ 海关计程器已截取 ” ,...)

addListener(eventName: 'customSchemeIntercepted', listenerFunc: CustomSchemeInterceptedListener) => Promise<PluginListenerHandle>

当网页视图拦截到非标准自定义方案时会触发 把它交给操作系统.

由操作系统处理的标准计划,例如 tel:, (中文(简体) ), mailto:,以及 sms: 除外.

回返情况: Promise<PluginListenerHandle>

自: 8.6.7 联合国

添加倾听器( “ 下载完成 ” ,...)

addListener(eventName: 'downloadCompleted', listenerFunc: (event: DownloadCompletedEvent) => void) => Promise<PluginListenerHandle>

本地下载处理保存本地文件后将触发 . 启用此选项 handleDownloads: true 当打开网页视图时.

回返情况: Promise<PluginListenerHandle>

自: 8.6.0 (简体中文)

添加倾听器( “ 下载失败 ” ,...)

addListener(eventName: 'downloadFailed', listenerFunc: (event: DownloadFailedEvent) => void) => Promise<PluginListenerHandle>

当本地下载处理失败时会触发 . 启用此选项 handleDownloads: true 当打开网页视图时.

回返情况: Promise<PluginListenerHandle>

自: 8.6.0 (简体中文)

添加倾听器( “ popup Window Opened ” ,...)

addListener(eventName: 'popupWindowOpened', listenerFunc: (event: PopupWindowEvent) => void) => Promise<PluginListenerHandle>

每当页面打开弹出/ 新窗口时都会被触发 . 使用返回的弹出编号 executeScript, (中文(简体) ), postMessage, (中文(简体) ), show, (中文(简体) ), hide,以及 close。 。 。 .

回返情况: Promise<PluginListenerHandle>

自: 8.6.0 (简体中文)

添加倾听器( “ 代理请求 ” )..

addListener(eventName: 'proxyRequest', listenerFunc: (event: ProxyRequest) => void) => Promise<PluginListenerHandle>

倾听本地运行时间授权的代理请求. 偏爱 addProxyHandler() 而不是直接打电话.

回返情况: Promise<PluginListenerHandle>

自: 8.6.0 (简体中文)

添加Listener('consoleMessage', ...) 键盘

addListener(eventName: 'consoleMessage', listenerFunc: (event: ConsoleMessageEvent) => void) => Promise<PluginListenerHandle>

听从管理页面释放的 JavaScript 控制台输出 . 启用此选项 captureConsoleLogs: true 当打开网页视图时.

回返情况: Promise<PluginListenerHandle>

自: 8.6.0 (简体中文)

处理 Proxy 请求(...)

handleProxyRequest(options: { requestId: string; decision?: ProxyDecision | null; response?: ProxyResponse | null; webviewId?: string; phase?: 'outbound' | 'inbound'; }) => Promise<void>

内部方法 addProxyHandler() 将代理决定发回本地. 转发原件 phase 当对手册作出答复时 proxyRequest 听着.

自: 8.6.0 (简体中文)

删除所有收听器( )

removeAllListeners() => Promise<void>

删除此插件的所有听众 .

自: 1.0.0 (单位:千美元)

重新装入(...)

reload(options?: { id?: string | undefined; } | undefined) => Promise<any>

重新装入当前网页 .

回返情况: Promise<any>

自: 1.0.0 (单位:千美元)

更新 Dimension (...)

updateDimensions(options: DimensionOptions & { id?: string; }) => Promise<void>

更新网页视图的尺寸 . 允许在运行时更改网页视图的大小和位置 . 何时 id 被省略,以活动网页视图为目标.

设置可操作的SafeTop Margin (...)

setEnabledSafeTopMargin(options: { enabled: boolean; id?: string; }) => Promise<void>

设置运行时网页视图的安全顶端边距 . 何时 id 被省略,以活动网页视图为目标. 在Web上,这种方法是一种不开放并解析而不改变布局的方法.

设置可操作的SafeBottom Margin (...)

setEnabledSafeBottomMargin(options: { enabled: boolean; id?: string; }) => Promise<void>

设置运行时网页视图的安全底边距 . 何时 id 被省略,以活动网页视图为目标. 在Web上,这种方法是一种不开放并解析而不改变布局的方法.

打开SecureWindow(...)

openSecureWindow(options: OpenSecureWindowOptions) => Promise<OpenSecureWindowResponse>

打开 OAuth2 认证的安全窗口. 对于 Web, 您应该有重定向页面中的代码来使用广播频道将重定向的url发送到应用程序中 比如说:

<html>
<head></head>
<body>
<script>
  const searchParams = new URLSearchParams(location.search)
  if (searchParams.has("code")) {
    new BroadcastChannel("my-channel-name").postMessage(location.href);
    window.close();
  }
</script>
</body>
</html>

对于移动,你应该有一个方向回路的uri打开应用程序,比如: myapp://oauth_callback/ 并在应用程序的信息中注册 列表 :

<key>CFBundleURLTypes</key>
<array>
   <dict>
      <key>CFBundleURLSchemes</key>
      <array>
         <string>myapp</string>
      </array>
   </dict>
</array>

在AndroidManifest.xml的文件中:

<activity>
   <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:host="oauth_callback" android:scheme="myapp" />
   </intent-filter>
</activity>

回返情况: Promise<OpenSecureWindowResponse>

接口

打开选项

清除Cookie 选项

HtpCookie (美国英语)

获取 Cookie 选项

关闭网络视图选项

打开网络查看选项