Для додавання діплінків в Cordova додаток вам знадобиться плагін - cordova-plugin-customurlscheme. Він надасть змогу як ссилатися на інші додатки, так і приймати посилання.
Після встановлення плагіну додайте в налаштування config.xml:
<plugin name="cordova-plugin-customurlscheme" spec="~5.0.1">
<variable name="URL_SCHEME" value="<YourAppName>" />
</plugin>
<allow-intent href="yourdeeplink://*" />
<access origin="yourdeeplink://*" />
<allow-intent href="externaldeeplink://*" />
<access origin="externaldeeplink://*" />
В налаштуваннях замініть тільки змінні externaldeeplink
- на ссилку сторонньої программи, щоб по ній змогли відкривати ваш додаток. А yourdeeplink
- це саме ваша ссилка. В <YourAppName> - введіть вашу діпназву. Тобто якщо ви хочете ссилку: "myapp://", то туди треба ввести просто "myapp".
Обробка deeplinks на прикладі Vuejs - /src/core/vue-deeplinks.js
:
import { useRouter } from 'vue-router';
export function useDeeplinkHandler() {
const router = useRouter();
const { noty } = useNoty()
const handleDeepLink = (url) => {
if(!url) return
try {
const urlObj = new URL(url);
const pathname = url.replace(/mono:\/|\?.*/g, "");
const queryParams = {};
urlObj.searchParams.forEach((value, key) => {
queryParams[key] = value;
});
if (pathname === '/deep/bank/mono/auth' && queryParams.resolveStatus === 'true' ) router.push({ path: '/banks/mono', query: queryParams });
if (pathname === '/deep/bank/mono/auth' && queryParams.resolveStatus === 'false') router.push({ path: '/banks/mono/not-user', query: queryParams });
} catch (error) {
console.error('Invalid URL:', error);
}
};
const initDeeplinkHandler = () => {
if (window.cordova) {
window.handleOpenURL = (url) => {
setTimeout(() => {
const event = new CustomEvent('deeplink', { detail: { url } });
window.dispatchEvent(event);
}, 0);
};
document.addEventListener('deviceready', () => {
window.handleOpenURL = (url) => {
setTimeout(() => {
handleDeepLink(url);
}, 0);
};
window.addEventListener('deeplink', (event) => {
const { url } = event.detail;
handleDeepLink(url);
});
});
}
};
return { initDeeplinkHandler };
}
/src/App.vue
:
import { useDeeplinkHandler } from '@/core/initDeepLinks';
const { initDeeplinkHandler } = useDeeplinkHandler();
onMounted(async () => {
initDeeplinkHandler()
})