如何向 ReactJS Ionic Android 項目添加深層鏈接

Question

我有一個基本的 ReactJS 項目，我按照本指南將它變成了一個 android 項目，我的 output 在build目錄中。

我已經成功生成了一個可用的 APK 文件。 但是現在我希望在安裝后通過移動設備上的任何瀏覽器打開https://example.com/ URL 打開我的應用程序。 任何幫助將不勝感激。

我不確定在哪里注冊這個 url 來打開我的應用程序，TIA

更新

<intent-filter android:label="@string/title_activity_main">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https"
        android:host="m.clipdrop.io"
        android:pathPrefix="/" />
</intent-filter>
<intent-filter android:label="@string/title_activity_main">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http"
        android:host="m.clipdrop.io"
        android:pathPrefix="/" />
</intent-filter>
<!-- Accepts URIs that begin with "clipdrop://login” -->
<intent-filter android:label="@string/title_activity_main">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="clipdrop"
        android:host="login" />
</intent-filter>

單擊的鏈接將如下所示

https://m.clipdrop.io/login?b=datahere

然后我有這段代碼可以處理打開的 url 事件

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { App, URLOpenListenerEvent } from '@capacitor/app';

export default function AppUrlListener(){
    let history = useHistory();
    useEffect(() => {
      App.addListener('appUrlOpen', (event) => {
        var url = new URL(event.url);
        var benc = url.searchParams.get("b")?.replace("%3D", "=");
        if(benc){
          window.location.href = "/login?b=" + benc; 
        }
        // If no match, do nothing - let regular routing
        // logic take over
      });
    }, []);
  
    return null;
  };

更新 2

文件： AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.clipdrop.clipdrop">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
            android:name="io.clipdrop.clipdrop.MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <!-- Accepts URIs that begin with "http(s)://m.clipdrop.io -->
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="http" />
                <data android:scheme="https" />
                <data android:host="m.clipdrop.io" />
            </intent-filter>
        </activity>
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>
    <!-- Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MICROPHONE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-feature android:name="android.hardware.microphone"/>
    <uses-permission android:name="android.permission.AUDIO_CAPTURE" />
</manifest>

我已經設置了assetlinks.json

當點擊鏈接時，它會在瀏覽器中打開，但是當它在瀏覽器中打開時，角落里有這個圖標：

Answer 1

如果您使用的是 Capacitor，要將深層鏈接添加到您的項目，請遵循本機過程。 就像在android 文檔中解釋的那樣，你應該在你的清單文件中有這個（位於 android/app/src/main/AndroidManifest.xml）：

<activity
    android:name="com.example.android.GizmosActivity"
    android:label="@string/title_gizmos" >
    <intent-filter android:label="@string/filter_view_http_gizmos">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <!-- **** -->
        <!-- This is where you put your deeplinks with the 'data' tag:  -->
        <!-- **** -->

        <!-- Accepts URIs that begin with "http://www.example.com/gizmos” -->
        <data android:scheme="http"
              android:host="www.example.com"
              android:pathPrefix="/gizmos" />
        <!-- note that the leading "/" is required for pathPrefix-->

        <!-- **** -->
        <!-- **** -->

    </intent-filter>
    <intent-filter android:label="@string/filter_view_example_gizmos">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "example://gizmos” -->
        <data android:scheme="example"
              android:host="gizmos" />
    </intent-filter>
</activity>

要處理深層鏈接請求及其打開后應用程序內部的數據，請使用appUrlOpen事件，如電容器文檔中所述

更新

回答您的更新：

由於 android 12，android 中的深度鏈接將直接打開瀏覽器，除非您驗證您的應用程序鏈接。 按照此說明驗證應用程序鏈接。