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