1# Using Deep Linking for Application Redirection
2
3In Deep Linking, the system, based on the passed-in URI, searches for the application that meets the conditions from the locally installed applications and starts that application. If multiple applications are matched, a dialog box is displayed for users to select one of them.
4
5## Working Principles
6
7Deep Linking searches for an application based on the URI matching rules in implicit Want mechanism and starts the matching application. For details about the URI matching rules of implicit Want, see [Matching Rules of uri](explicit-implicit-want-mappings.md#matching-rules-of-uri).
8
9
10## Procedure for the Target Application
11
12### Configuring the module.json5 File
13
14To be accessed by other applications, an application must configure the [skills](../quick-start/module-configuration-file.md#skills) field of the [module.json5 file](../quick-start/module-configuration-file.md). The value of **scheme** under **uri** can be customized. It can be any string that does not contain special characters or start with **ohos**.
15
16> **NOTE**
17>
18> The value of **scheme** in Deep Linking cannot be **https**, **http**, or **file**. Otherwise, the default system browser is started.
19
20
21A configuration example is as follows:
22
23```json
24{
25  "module": {
26    // ...
27    "abilities": [
28      {
29        // ...
30        "skills": [
31          {
32            "actions": [
33              // actions cannot be empty. Otherwise, matching the target application fails.
34              "ohos.want.action.viewData"
35            ],
36            "uris": [
37              {
38                // scheme is mandatory and can be customized. The following uses link as an example. Replace it with the actual scheme.
39                "scheme": "link",
40                // host is mandatory. Configure the domain name to be matched.
41                "host": "www.example.com"
42              }
43            ]
44          }
45        ]
46      }
47    ]
48  }
49}
50```
51
52### Obtaining and Parsing the Link Passed by the Caller
53
54In the **onCreate()** or **onNewWant()** lifecycle callback of the UIAbility of the target application, obtain and parse the Link passed by the caller.
55
56```ts
57// EntryAbility.ets is used as an example.
58import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
59import { url } from '@kit.ArkTS';
60
61export default class EntryAbility extends UIAbility {
62  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
63    // Obtain the input link information from want.
64    // For example, the input URL is link://www.example.com/programs?action=showall.
65    let uri = want?.uri;
66    if (uri) {
67      // Parse the query parameter from the link. You can perform subsequent processing based on service requirements.
68      let urlObject = url.URL.parseURL(want?.uri);
69      let action = urlObject.params.get('action');
70      // For example, if action is set to showall, all programs are displayed.
71      if (action === "showall") {
72         // ...
73      }
74    }
75  }
76}
77```
78
79## Implementing Application Redirection (Required for the Caller Application)
80
81The following uses three cases to describe how to use [openLink()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextopenlink12) and [startAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to implement application redirection and how to implement application redirection in the [Web component](../reference/apis-arkweb/ts-basic-components-web.md).
82
83### Using openLink to Implement Application Redirection
84
85Pass in the URL of the target application into **link** of [openLink()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextopenlink12), and set **appLinkingOnly** in the **options** field to **false**.
86
87
88The sample code is as follows:
89
90```ts
91import { common, OpenLinkOptions } from '@kit.AbilityKit';
92import { BusinessError } from '@kit.BasicServicesKit';
93import { hilog } from '@kit.PerformanceAnalysisKit';
94
95const TAG: string = '[UIAbilityComponentsOpenLink]';
96const DOMAIN_NUMBER: number = 0xFF00;
97
98@Entry
99@Component
100struct Index {
101  build() {
102    Button('start link', { type: ButtonType.Capsule, stateEffect: true })
103      .width('87%')
104      .height('5%')
105      .margin({ bottom: '12vp' })
106      .onClick(() => {
107        let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
108        let link: string = "link://www.example.com";
109        let openLinkOptions: OpenLinkOptions = {
110          appLinkingOnly: false
111        };
112
113        try {
114          context.openLink(link, openLinkOptions)
115            .then(() => {
116              hilog.info(DOMAIN_NUMBER, TAG, 'open link success.');
117            }).catch((err: BusinessError) => {
118              hilog.error(DOMAIN_NUMBER, TAG, `open link failed. Code is ${err.code}, message is ${err.message}`);
119            });
120        } catch (paramError) {
121          hilog.error(DOMAIN_NUMBER, TAG, `Failed to start link. Code is ${paramError.code}, message is ${paramError.message}`);
122        }
123      })
124  }
125}
126```
127
128### Using startAbility() to Implement Application Redirection
129
130Pass in the target application's link into **want** of [startAbility](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability), which then uses [implicit Want](explicit-implicit-want-mappings.md#matching-rules-of-implicit-want) to trigger application redirection. In addition, you must pass in the **action** and **entity** fields to be matched.
131
132
133The sample code is as follows:
134
135```ts
136import { common, Want } from '@kit.AbilityKit';
137import { BusinessError } from '@kit.BasicServicesKit';
138import { hilog } from '@kit.PerformanceAnalysisKit';
139
140const TAG: string = '[UIAbilityComponentsOpenLink]';
141const DOMAIN_NUMBER: number = 0xFF00;
142
143@Entry
144@Component
145struct Index {
146  build() {
147    Button('start ability', { type: ButtonType.Capsule, stateEffect: true })
148      .width('87%')
149      .height('5%')
150      .margin({ bottom: '12vp' })
151      .onClick(() => {
152        let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
153        let want: Want = {
154            uri: "link://www.example.com"
155        };
156
157        try {
158          context.startAbility(want).then(() => {
159            hilog.info(DOMAIN_NUMBER, TAG, 'start ability success.');
160          }).catch((err: BusinessError) => {
161            hilog.error(DOMAIN_NUMBER, TAG, `start ability failed. Code is ${err.code}, message is ${err.message}`);
162          });
163        } catch (paramError) {
164          hilog.error(DOMAIN_NUMBER, TAG, `Failed to start ability. Code is ${paramError.code}, message is ${paramError.message}`);
165        }
166      })
167  }
168}
169```
170
171### Using the Web Component to Implement Application Redirection
172
173To implement application redirection from a **Web** component in Deep Linking mode, process the defined event in the [onLoadIntercept](../reference/apis-arkweb/ts-basic-components-web.md#onloadintercept10) callback.
174
175The sample code is as follows:
176
177```ts
178// index.ets
179import { webview } from '@kit.ArkWeb';
180import { BusinessError } from '@kit.BasicServicesKit';
181import { common } from '@kit.AbilityKit';
182
183@Entry
184@Component
185struct WebComponent {
186  controller: webview.WebviewController = new webview.WebviewController();
187
188  build() {
189    Column() {
190      Web({ src: $rawfile('index.html'), controller: this.controller })
191        .onLoadIntercept((event) => {
192          const url: string = event.data.getRequestUrl();
193          if (url === 'link://www.example.com') {
194            (getContext() as common.UIAbilityContext).openLink(url)
195              .then(() => {
196                console.log('openLink success');
197              }).catch((err: BusinessError) => {
198                console.error('openLink failed, err:' + JSON.stringify(err));
199              });
200            return true;
201          }
202          // If true is returned, the loading is blocked. Otherwise, the loading is allowed.
203          return false;
204        })
205    }
206  }
207}
208```
209
210Frontend page code:
211```html
212// index.html
213<!DOCTYPE html>
214<html>
215<head>
216    <meta charset="UTF-8">
217</head>
218<body>
219<h1>Hello World</h1>
220<!--Method 1: Bind window.open to implement redirection.-->;
221<button class="doOpenLink" onclick="doOpenLink()">Redirect to application 1</button>
222<!--Method 2: Use a hyperlink for redirection.-->;
223<a href="link://www.example.com">Redirect to application 2</a>
224</body>
225</html>
226<script>
227    function doOpenLink() {
228        window.open("link://www.example.com")
229    }
230</script>
231```
232