Как настроить глубокие ссылки для ваших Ionic Apps с помощью Branch.io и параметров перехвата
Я делюсь одной уловкой в день до первоначально запланированной даты окончания карантина COVID-19 в Швейцарии, 19 апреля 2020 года. До этого первого рубежа осталось шесть дней. Надеюсь, впереди и лучшие дни.
В прошлую пятницу мне пришлось быстро внедрить поддержку deeplinking для приложения, которое мы дорабатывали. Его цель была и остается в том, чтобы помочь изолированным людям чувствовать себя менее одинокими, чтобы легко найти помощь своих родственников, что-то действительно полезное в нормальные времена, особенно для пожилых людей, как мы думаем, но, возможно, даже больше, когда есть кризис.
Оказывается, Apple отклонила его в субботу, так как они думают, что наш проект ориентирован только на COVID-19, и принимают только связанные проекты от сертифицированных организаций 😢. Если интересно, CNBC опубликовал статью на тему.
В любом случае, я здесь не для того, чтобы поделиться своим мнением о компаниях, которые стали более могущественными, чем государства и их люди, а для того, чтобы поделиться техническими советами и уловками 😉.
Вот почему вот как я быстро реализовал такую концепцию, включая то, как улавливать связанные параметры.
Что такое диплинкинг?
Для меня глубинные ссылки решают разные проблемы, связанные с мобильными приложениями:
- Приложение может быть доступно в App Store, Google Play, как Progressive Web Apps и, возможно, даже в других магазинах. Для всех из них он будет доступен с помощью другой ссылки или URI, поэтому это затруднит ваше общение, так как вам придется передавать несколько ссылок («Если вы используете Android, нажмите здесь. Если вы используете iOS, нажмите здесь и т. д.). Благодаря глубоким ссылкам можно предоставить один единственный URL-адрес, который связывает пользователя с соответствующим ресурсом, соответствующей целью.
- Пользователи могут иметь или еще не установили ваше приложение. Вот почему, когда вы предоставляете им ссылку, вы можете захотеть связать их либо прямо с ней, если она уже установлена, либо автоматически с магазином, если она еще не установлена.
- Наконец, вам может потребоваться предоставить параметры вашему приложению. Что произойдет, если пользователь щелкнет ссылку, у него нет приложения, он перейдет в магазин, установит приложение, а затем запустит его? Параметры будут потеряны. Это также то, что глубокие ссылки могут помочь поддерживать и предоставлять параметры до тех пор, пока пользователь не запустит приложение.
Удаление ссылок по сравнению с настраиваемой схемой URI
Не следует путать удаление ссылок с настраиваемой схемой URI.
Пользовательская схема URI, например myapp://, - это схема, которую можно использовать на мобильных устройствах для вызова вашего приложения, но она работает только после установки приложения. До этого момента устройства не имели представления о такой схеме.
Branch.io
Я вообще не пишу ни о каких решениях с открытым исходным кодом, но пока я не нашел лучшего решения, чем Branch.io для установки глубоких ссылок.
Существует плагин Cordova Ionic для обработки таких ссылок, которые поддерживаются сообществом. Когда Ionic представил его несколько лет назад, я сначала использовал его, но в конце концов выбрал решение Branch, но, честно говоря, я не помню точно, почему, вероятно, конкретный случай.
У Branch есть стартовый бесплатный тарифный план.
Настраивать
Branch предоставляет исчерпывающую документацию о том, как настраивать свои службы, и даже их платформа после регистрации становится довольно простой в использовании.
Только важные вещи, на которые стоит обратить внимание: ваше приложение должно быть доступно в магазине, прежде чем вы сможете правильно настроить глубокие ссылки. Когда вы его настроите, вам нужно будет выполнить поиск и связать его со своей учетной записью, поэтому он должен быть общедоступным и доступным в первую очередь, иначе вы не сможете завершить настройку.
Но стоит отметить, что вам не нужно ждать публикации, чтобы уже внедрить и протестировать его.
Это оно
Уже все! Если ваша единственная цель - предоставить глубокие ссылки для наших, текущих и потенциальных пользователей, которые указывают либо на ваше приложение, если оно установлено, либо на магазин с одной ссылкой, то все готово.
Не нужно устанавливать плагин, независимо от того, используете ли вы Cordova или Capacitor.
Например, посмотрите исходный код моего приложения Tie Tracker на GitHub. Как вы заметили, нет никаких ссылок на Branch, но, несмотря на это, я могу предоставить единственную ссылку https://tietracker.app.link/, которая приведет вас либо к установленному приложению, либо к магазину, либо ничего из этого в PWA.
Параметры перехвата
При такой настройке вам может быть интересно перехватить параметры во всех процессах, помня, конечно, что отслеживание - это плохо, и допустимо только анонимное использование.
Установка
Соответствующий плагин Cordova находится в npm и может использоваться следующим образом:
ionic cordova plugin add branch-cordova-sdk
Конфигурация
После того, как он установлен, вам нужно будет настроить его для своих платформ. В вашем config.xml должна быть добавлена соответствующая запись.
Вся информация Branch будет предоставлена ими, когда вы настроите свое приложение, а идентификатор релиза группы iOS найдет место на вашей панели управления Apple appstoreconnect.
<branch-config>
<branch-key value="key_live_2ad987a7d8798d7a7da87ad8747" />
<uri-scheme value="myapp" />
<link-domain value="myapp.app.link" />
<ios-team-release value="BE88ABJS2W" />
</branch-config>
Реализация
Ionic Native обеспечивает поддержку Branch, но я до сих пор не использовал его, поэтому не буду использовать его в следующем примере. Я тоже реализовал это только в Angular приложениях с Cordova, поэтому использую вот такие технологии.
В нашем основном компоненте app.component.ts мы сначала объявляем новый интерфейс, который представляет параметр, который мы хотим перехватить. В этом примере я назвал его $myparam. Стоит отметить, что стандартные параметры Branch fill forward с префиксом $.
interface DeeplinkMatch {
$myparam: string;
}
После инициализации нашего основного компонента мы добавляем слушателя на платформу, чтобы инициализировать перехват только после его монтирования.
ngAfterViewInit() {
this.platform.ready().then(async () => {
await this.initDeepLinking();
});
}
В зависимости от устройства пользователя он / она может запустить приложение как мобильное приложение или как веб-приложение. Это два разных способа запроса параметров, поэтому мы обрабатываем их по-разному.
private async initDeepLinking(): Promise<void> {
if (this.platform.is('cordova')) {
await this.initDeepLinkingBranchio();
} else {
await this.initDeepLinkingWeb();
}
}
Когда дело доходит до Интернета, мы можем искать параметры с помощью platform. Затем он может быть предоставлен и префиксом по-разному, конечно же, я люблю проверять все возможности.
private async initDeepLinkingWeb(): Promise<void> {
const myparam: string =
this.platform.getQueryParam('$myparam') ||
this.platform.getQueryParam('myparam') ||
this.platform.getQueryParam('%24myparam');
console.log('Parameter', myparam);
}
Наконец, мы можем обрабатывать параметр мобильного приложения, предоставляемый Branch.
Важно отметить тот факт, что параметр предоставляется асинхронно. Вот почему нельзя вносить поправки в то, что он присутствует при запуске, но нужно подумать, что он может быть предоставлен позже с опозданием.
private async initDeepLinkingBranchio(): Promise<void> {
try {
const branchIo = window['Branch'];
if (branchIo) {
const data: DeeplinkMatch =
await branchIo.initSession();
if (data.$myparam !== undefined) {
console.log('Parameter', data.$myparam);
}
}
} catch (err) {
console.error(err);
}
}
И вуаля 🥳, мы можем обрабатывать глубокие ссылки с параметрами. Если, например, мы предоставим нашим пользователям URL-адрес, такой как https://myapp.app.link/?$myparam=yolo, мы сможем перехватить yolo 😁.
В целом
Если он вам понадобится, вот приведенный выше код в виде единого фрагмента:
import {AfterViewInit, Component} from '@angular/core';
import {Platform} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
interface DeeplinkMatch {
$myparam: string;
}
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent implements AfterViewInit {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
ngAfterViewInit() {
this.platform.ready().then(async () => {
await this.initDeepLinking();
});
}
private async initDeepLinking(): Promise<void> {
if (this.platform.is('cordova')) {
await this.initDeepLinkingBranchio();
} else {
await this.initDeepLinkingWeb();
}
}
private async initDeepLinkingWeb(): Promise<void> {
const myparam: string =
this.platform.getQueryParam('$myparam') ||
this.platform.getQueryParam('myparam') ||
this.platform.getQueryParam('%24myparam');
console.log('Parameter', myparam);
}
private async initDeepLinkingBranchio(): Promise<void> {
try {
const branchIo = window['Branch'];
if (branchIo) {
const data: DeeplinkMatch =
await branchIo.initSession();
if (data.$myparam !== undefined) {
console.log('Parameter', data.$myparam);
}
}
} catch (err) {
console.error(err);
}
}
}
Резюме
Это работает. Честно говоря, это не самая забавная часть работы, не то, чтобы она была сложной или что-то в этом роде, чтобы ее настроить или использовать, просто не очень весело.
Оставайся дома, будь в безопасности!
Дэйвид
