InAppBrowser for NativeScript

提供对系统网页浏览器的访问，并支持处理重定向

Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

谁在使用 InAppBrowser?

你想看到这个包的实际效果吗？查看这些酷炫的项目，耶！🎉

Oxycar - 提供方便家庭和工作旅程的创新方式。
Pegus Digital - 您的数字产品开发的创新合作伙伴。

在这里分享你的酷炫项目这里! ❤️

入门

ns plugin add nativescript-inappbrowser

手动安装

Android 平台及 Android 支持

修改你的 android/build.gradle 配置

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    // Only using Android Support libraries
    supportLibVersion = "28.0.0"
  }

Android 平台及 AndroidX

修改你的 android/build.gradle 配置

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
    androidXBrowser = "1.0.0"
    // Put here other AndroidX dependencies
  }

使用

方法	动作
`open`	使用 SFSafariViewController 在 iOS 上以模态方式打开 URL，并在 Android 上的新自定义标签页中打开 Chrome。在 iOS 上，模态 Safari 将不会与系统 Safari 共享 Cookie。
`close`	关闭系统显示的网页浏览器。
`openAuth`	使用 SFAuthenticationSession/ASWebAuthenticationSession 在 iOS 上以模态方式打开 URL，并在 Android 上的新自定义标签页中打开 Chrome。在 iOS 上，将询问用户是否允许应用程序使用给定的 URL 进行身份验证（OAuth 流与深链接重定向）。
`closeAuth`	关闭当前的认证会话。
`isAvailable`	检测设备是否支持此插件。
`onStart`	初始化一个绑定后台服务，以便应用程序可以将其意图传达给浏览器。服务连接后，客户端可用于预热浏览器以加快导航，并指示将来可能加载的给定 URL。 - 仅 Android。
`warmup`	预热浏览器进程 - 仅 Android。
`mayLaunchUrl`	告诉浏览器可能未来会导航到 URL。最可能的 URL 必须首先指定。可选地，可以提供其他可能的 URL 列表。它们被视为比第一个可能性低，并且必须按递减优先级顺序排序。这些附加 URL 可被忽略。所有之前的此方法调用都将降级 - 仅 Android。

iOS 选项

属性	描述
`dismissButtonStyle` (String)	关闭按钮的样式。[`done`/`close`/`cancel`]
`preferredBarTintColor` (String)	用于着色导航栏和工具栏背景的颜色。[`white`/`#FFFFFF`]
`preferredControlTintColor` (String)	用于着色导航栏和工具栏上的控件按钮的颜色。[`gray`/`#808080`]
`readerMode` (Boolean)	一个值，指定 Safari 是否应该进入阅读模式（如果可用）。[`true`/`false`]
`animated` (Boolean)	动画呈现。[`true`/`false`]
`modalPresentationStyle` (String)	模态展示视图控制器的展示风格。[`自动`/`无`/`全屏`/`页签`/`表单`/`当前上下文`/`自定义`/`覆盖全屏`/`覆盖当前上下文`/`弹出`]
`modalTransitionStyle` (String)	展示视图控制器时使用的过渡风格。[`垂直覆盖`/`水平翻转`/`交叉溶解`/`部分卷曲`]
`modalEnabled` (Boolean)	以模态方式展示 SafariViewController 或作为推送。 [`true`/`false`]
`enableBarCollapsing` (Boolean)	确定浏览器工具栏是否折叠。 [`true`/`false`]
`ephemeralWebSession` (Boolean)	防止重用之前会话的cookie（仅限openAuth）。 [`true`/`false`]
`formSheetPreferredContentSize` (Object)	iPad `formSheet` 模态的自定义大小 [`{width: 400, height: 500}`]

Android选项

属性	描述
`showTitle` (Boolean)	设置是否在自定义标签页中显示标题。[`true`/`false`]
`toolbarColor` (String)	设置工具栏颜色。[`灰色`/`#808080`]
`secondaryToolbarColor` (String)	设置次要工具栏的颜色。[`白色`/`#FFFFFF`]
`navigationBarColor` (String)	设置导航栏颜色。[`灰色`/`#808080`]
`navigationBarDividerColor` (String)	设置导航栏分割线颜色。[`白色`/`#FFFFFF`]
`enableUrlBarHiding` (Boolean)	启用当用户在页面上滚动时隐藏URL栏。[`true`/`false`]
`enableDefaultShare` (Boolean)	在菜单中添加默认分享项。[`true`/`false`]
`animations` (Object)	设置开始和退出动画。[`{ startEnter, startExit, endEnter, endExit }`]
`headers` (Object)	数据是键/值对，它们将作为提供的URL的HTTP请求头发送。[`{ 'Authorization': 'Bearer ...' }`]
`forceCloseOnRedirection` (Boolean)	在新任务中打开自定义标签页，以避免重定向回应用方案的问题。[`true`/`false`]
`hasBackButton` (Boolean)	将回退箭头设置为默认的 `X` 图标以关闭自定义标签页。[`true`/`false`]
`browserPackage` (String)	用于处理自定义标签页的浏览器的包名。
`showInRecents` (Boolean)	确定是否将浏览的网站作为单独的条目在Android最近的/多任务视图中显示。[`true`/`false`]
`includeReferrer` (Boolean)	确定是否将您的包名作为网站跟踪的引用。[`true`/`false`]

演示

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from 'nativescript-inappbrowser';

...
  openLink = async () => {
    try {
      const url = 'https://www.proyecto26.com'
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
          // Specify full animation resource identifier(package:anim/name)
          // or only resource name(in case of animation bundled with app).
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right'
          },
          headers: {
            'my-custom-header': 'my custom header value'
          },
          hasBackButton: true,
          browserPackage: '',
          showInRecents: false
        });
        Dialogs.alert({
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        });
      }
      else {
        Utils.openUrl(url);
      }
    }
    catch(error) {
      Dialogs.alert({
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      });
    }
  }
...

Android优化

在Android上，您可以预热应用内浏览器客户端以使其启动速度更快。为此，请将以下内容添加到您的自定义Android Activity。

import { InAppBrowser } from "nativescript-inappbrowser";
@NativeClass()
@JavaProxy("org.nativescript.demo.MainActivity")
export class Activity extends androidx.appcompat.app.AppCompatActivity {
  public onStart(): void {
    // InAppBrowser initialization for CustomTabsServiceConnection
    InAppBrowser.onStart();
  }
}

您可以通过提供用户可能打开的URL来进一步优化性能和预渲染页面。

constructor() {
  super();
  // Do not call this every time the component render
  InAppBrowser.mayLaunchUrl(this._url, [
    "https://twitter.com/NativeScript",
    "https://github.com/NativeScript/NativeScript",
    "https://openjsf.org"
  ]);
}

使用深度链接进行身份验证流程

为了从网络浏览器重定向回您的应用程序，您必须指定一个唯一的URI到您的应用程序。为此，定义您的应用方案，并将 my-scheme 和 my-host 替换为您的信息。

启用深度链接（Android） - AndroidManifest.xml

<activity
  ...
  android:launchMode="singleTask">
  <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:scheme="my-scheme" android:host="my-host" android:pathPrefix="" />
  </intent-filter>
</activity>

启用深度链接（iOS） - Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my-scheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>my-scheme</string>
    </array>
  </dict>
</array>

utilities.ts

export const getDeepLink = (path = "") => {
  const scheme = 'my-scheme';
  const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
  return prefix + path;
}

home-page.ts

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from 'nativescript-inappbrowser';
import { getDeepLink } from './utilities';
...
  async onLogin() {
    const deepLink = getDeepLink('callback')
    const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
    try {
      if (await InAppBrowser.isAvailable()) {
        InAppBrowser.openAuth(url, deepLink, {
          // iOS Properties
          ephemeralWebSession: false,
          // Android Properties
          showTitle: false,
          enableUrlBarHiding: true,
          enableDefaultShare: false
        }).then((response) => {
          if (
            response.type === 'success' &&
            response.url
          ) {
            Utils.openUrl(response.url)
          }
        })
      } else Utils.openUrl(url)
    } catch {
      Utils.openUrl(url)
    }
  }
...

状态栏

状态栏将保持您在应用中提供的最后一个状态。因此，如果您在打开浏览器之前的状态栏是 dark-content，这将保持不变。

身份验证

在有可用的情况下使用应用内浏览器标签（如 SFAuthenticationSession/ASWebAuthenticationSession 和 Android Custom Tabs）。由于 RFC 8252 的第 8.12 节中记录的可用性和安全性原因，显式不支持嵌入的用户代理（即 web-view，如 UIWebView 和 WKWebView）。