Галоўная / Артыкулы / Рэйтарынг упавямых паведамленняў через глыбокія лінкі ў React Native

React NativePush NotificationsDeep LinkingiOSAndroidTypeScript

Рэйтарынг упавямых паведамленняў через глыбокія лінкі ў React Native

Створыце універсальныя лінкі і лінкі для дапрынкаў, падключыце Pusher Beams да дапрынка React Native і супарабоце веб-адрэсы з адпаведнымі экранамі дапрынка, каб нажатые на спавешчанне кнопкі ведалі на правыя месцы.

1898 слоў

Упавшая паўтаральная прыметка будзе корисна толькі тады, калі ўдараўшы па яй корыстнік потрапіць на экран, пра які ёй ідзе мова. Уявіце сабе дапрынт для международных студэнтаў, які выбірае колледжы: электранаўты не чыталіся, а SMS є ненадзеяны між краінамі, таму упавшыя паўтаральныя прыметкі павінны працаваць, калі піша адбірач кандыдаў. Хутчэй вы настроюеце глыбокія паўтаранні на обох платформах, прыкладзеце URL веб-сайта да кожной прыметкі Pusher Beams і перакладзеце гэты URL у маршрут React Navigation, працюючы з кожным слоем па шляху.

Чаму глыбокія паўтаранні несу месца прызначэння прыметкі

Калі была створана гэта наладка, пакеты Pusher, якія тут викорыстоўваліся, не маглі перадаць спецыяльны навантажэння паведамлення на сторону JavaScript у дапытку React Native на Android. Найпростейшы спосаб рашэння, падобны запросу пра змяны да Android SDK, — это выкарыстоўваць глыбокую перанасленню: у паведамленні для Android є звычны лінк да веб-сайта, клік на яго спрацьвоўвае як клік на гэты лінк, а існуючы механізм обработкі глыбокай перанасленню дапытку вяршыць выбіранне экрана, які трэба ачыніць.

Можа, з тэх падчас ўсё змянілася, таму спачатку пераканайцеся ў актуальных версіях Beams SDK. Слой маршрутацыі, які паказаны нижэй, корыстны ў будзь-якім случае, адтолькі ён таксама обробляе лінкі з е-пашт, SMS чы розмов.

Короткая аптака глыбокай перанасленню

Глыбокая пераадрасаванне дазволяе аплікацыі выкарыстоўваць лінкі да вашага сабе веб-сайту і ачынаць іх натыўна. Лінк у формате https://test.com/message/abc должен ачыняць саму аплікацыю пры візыту на паведамленне abc, а не запускать браузер. iOS называе такія лінкі універсальнымі, а Android — лінкамі аплікацыі; у обох случаях ваш домэн должен публікаваць файл, який падтверджвае, што ён даверяе аплікацыі.

Настройкі глыбокай пераадрасаваннэ на обох платформах

Публікуйце файлы паўтарэння пад даменам .well-known

Створыце катэгорію /.well-known/ у коране вашага веб-сайту. Для Android дадзіце файл /.well-known/assetlinks.json, у якому будзе зазначана, што ваша аплікацыя можа обрабоўваць усе URL-адрэсы на даным домэне. Заменіце месца для заполнення на назву пакета вашай аплікацыі і SHA-256-фінгерпринт сертыфіката, які яго падписвае:

[{
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
        "namespace": "android_app",
        "package_name": "package_name",
        "sha256_cert_fingerprints":
        ["package_cert_fingerprint"]
    }
}]

Якщо Google Play паўтарная падпісвае вашы выпускі, выкарыстоўвайце відбліск ключа падпісу Play, а не вашаг ключа завантажэння, іначы перакананне не будзе успехам толькі у працоўным режыме.

Для iOS дадаць файл пад назвай /.well-known/apple-app-site-association (без расшырэння). У яму пераказаны ідентыфікатор вашага дапрынтку, який складаецца з ID каманды і ID пакета, а таксама URL-шляхі, якія дапрынток павінен перехопляць:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "appId",
                "paths": [ "/paths-you-want-to-support", "/messenger"]
            }
        ]
    }
}

Падаўваць оба файлы через HTTPS з точна таго ж домэна, без перенаправленняў. Це класычны формат applinks; Apple пазней дадала новыя форматы, таму пераканайцеся ў актуальной документацыі.

Увядзенне асоцыяваных домэнаў у iOS

iOS таксама патрабуе права, які адказваюць, калькі домены належаць даэплікацыі. У Xcode ачыніте Capabilities, увялічыце Associated Domains і дадзіце кожны домен, які хочацее падключыць, зазвычай у формате applinks:yourdomain.com.

Адзявленне фільтраў намеру ў Android

У Android глыбокія лінкіі прызначаюцца за дапамою фільтраў намеру ў файле AndroidManifest.xml. Чыба з’явіцца лінкіі у формате /messenger/*, галоўная актывнасць павінна маты фільтр намеру для дзеяння VIEW з катэгорыямі DEFAULT і BROWSABLE, а таксама элемент data, які вказвае схему https, ваш хост і прыфікс шляху /messenger. Дадзенне android:autoVerify="true" прыказвае системе пераканацца ў файле assetlinks.json, каб аплікацыя могла ачыняць гэтыя лінкіі без показу дыалога з выборам.

Аблокаванне лінкіў у корэнтным компоненте

Основны элемент прытку павінен выканаць два заведамы: прачытаць URL, які запускае прытак пасля першага старту, і слухаць за URL-амі, які прыходзяць пад час його ўжо роботы. Модуль Linking у React Native адказвае за гэта за дапамою функцыі getInitialURL() і адчувальніка змены url. І адна, і другая должны вызваць аднаковы функцыю-обрабавальнік, якай паказна можа проста запісваць URL:

const handleDeepLink = (url: string) => console.log(url);

Апробавайце лінкі перад дадзенням паведамленняў

Пераканаецеся, што функцыя глэбокага лінкавання працуе сама, перш чым дадзіваць да яе паведамленні типу push. Адным з простых спосабоў є аправаць лінк сабе самаму через прыстрой для перадачы паведамленняў, такі як Slack, на кожным прыстрое для тэставання і атрыбувань яго. Якщо настройкі правыя, лінк ачынае ваш прытак, а не браузер, і запісаны URL падабяецца на той, які вы атрыбавалі. Ізоляцыя гэтага слоя значыць, што пазнейшая неправильна дастаўленая паведамленне можа быць толькі проблемай з push-паведамленнямі.

Дадзенне Pusher Beams у аплікацыю

Пярэшкоднія умовы і спраменная супрацоўка

Вам патрэбны адзынак Pusher Beams, і вы должны завершыць крокі налажоўкі для службы push ад Apple і Google Firebase.

Згадайце, што калі пісаўся гэты інтеграцыйны матэрыял, Pusher не запрошваў афіцыйны пакет для React Native. Спраменная супрацоўка, якая вжываецца тут, — это спраменны пакет react-native-pusher-push-notifications, які з’яўляе звязак между натыўнымі SDK-амі Beams і JavaScript, але не падтрымваны Pusher. Ён патрабаваў незначных корэктыв, каб працаваць у гэй налажоўцы. На Android ключовай змянай была форк SDK Pusher push-notifications-android, якая ператварае нажыманне на спавешчэнні ў ачыненне глыбокага лінку. Неафіцыйная спраменная супрацоўка плюс форкаваны SDK — это абавязак з адтрымкай: трэба фіксаваць версіі і пераглядаць выбор, калі змянююцца афіцыйныя SDK-ы.

Інсталюйце Swift SDK на iOS

Сярон iOS завісіць ад SDK Pusher на мове Swift, які інсталюецца тут за дапамою Carthage. Дадзіце следуючыя лінію ў /ios/Cartfile, а пасля запусціце carthage bootstrap, каб яго загрузіць і запрацавіць:

github "pusher/push-notifications-swift" ~> 1.3.0

Гэтыя версіі былі актуальныя для гэтай інтеграцыі; новейшыя проекты, верагацельна, будуць викорыстоўваць апошнейшае SDK і, можабыт, іншы менеджар залежнасцей.

Пасля таго следавайце кроках ручнай інсталляціі пакета-моста для обох платформ, адколькі натыўныя часткі ўнівэрсалізаваны.

Адправка тэстовай прыемлі

Прыемлі на iOS прыходзяць толькі на фізычныя прыстроі, а не на сімулятары, таму трэба маты рэальны iPhone пад рукой.

Ёнколі хочаце адправіць тэставы пуш-уведамленне, выкорыстайце або Кансоль дыягналу на панелі керавання Pusher, або HTTP-кліент, такі як Postman, які выкарыстоўвае API Beams publish. Дастатнека тэлу запытку з раздзеламі для iOS і Android; у гэтым режыме частка для iOS задае колькасць значака 5, а частка для Android містіць URL веб-сайта, які трэба ачынуць.

Калі все налажана правільна, iOS сама обрабоцуе тэло уведамлення, а Android ачыніць дапрыгу через інтэнт View, які містіць URL вашага веб-сайта. На обох платформах ваш працоўнік кансольвання должен запісаць ў формате https://yourdomain/messenger/abcde. На iOS іконка дапрыгу таксама должна паказваць значак з цыфрамю 5.

Ператварэнне URL-адрас у маршруты React Navigation

Пасёлковым крокам ёсць замена фальшывага элемента для логавання на рэальную систему маршрутацыі. Часта наладка выкорыстоўвае React Router у веб-сайце і React Navigation у дапытку React Native. Невялікая прамычнае програма, якая супароўвае веб-маршруты з маршрутамі натыўнага дапытуку, дазволяе яму паводлівацца адной логікай і запобегае таму, каб перэназваны веб-адрес таямна нарабляў проблемы з навігацыяй у дапытку.

Аднароджэнне сталярых маршрутаў між веб-версіяй і натыўнай версіяй

У обох базах коду маршруты выклікаюцца як сталыя. У веб-версіі кампанент для будавання маршрута вяртае або конкрэтны шлях, або шаблон, які React Router супароўнае; у натыўнай версіі адпаведным элементам ёсць назва экрана, пры чым ідэнтыфікатор размовы перадаецца окрема як параметр навігацыі:

// Web:
ROUTE = {
    MESSENGER_CONVERSATION: (conversationId?: string) =>
        conversationId
            ? `/messenger/${conversationId}`
            : "/messenger/:conversationId"
}// Native:
APP_STACK_ROUTE: {
    MESSENGER_CONVERSATION_SCREEN:
        "app_stack_routes/messenger_conversation"
}
// native then has a params object with conversationId included

Калі як веб-шляхі, так і натыўныя экраны выражаюцца як сталыя, можна ў адной табелі паказаць, які веб-шлях адпавядае якому натыўнаму экрану:

const ROUTE_MATCHES: IRouteMatches = [
    {
        webPath: ROUTE.MESSENGER_CONVERSATION(),
        rnPath: APP_STACK_ROUTES.MESSENGER_CONVERSATION_SCREEN
    }
];

Калі вызваць ROUTE.MESSENGER_CONVERSATION() без жадных аргументаў, будзе вярнуцца шаблон /messenger/:conversationId; таму таблица зберагае той самы шаблон, які викорыстоўвае рутэр веб-сайта. Перейменаванне веб-руту автоматычна адкорэгуе це супараднаванне. Чырвоныя інструкцыі па тым, як працуюць гэтыя веб-шаблоны, можна знайсці ў основах React Router.

Дэбаунс вхідных URL

Обработчык інодзе запускаецца больш чым раз у раз пры натыканні, напрыклад, калі як пераканальванне пачатковага URL, так і адчувальнік абавешчаюць пра наяўнасць лінку, што прыводзіць да падаўлення дублікатных экраноў. Перадача кожнага URL через Subject у RxJS і застосаванне debounceTime(100) спрыяе зліквідаванню такіх падаўленняў у адны вызов, які потым прайшоў да processUrl:

export const handleDeepLink = (url: string): void => {
    if (!url) return;
    onChangeUrl$.next(url);
};
const onChangeUrl$: Subject<string> = new Subject<string>();
const urlSubscription: Observable<string> = onChangeUrl$.pipe(debounceTime(100));
urlSubscription.subscribe(processUrl);

Адаптаванне: два разныя лінкі за 100 мс злучаюцца ў апошні, што яўляецца прыемным для натыскання на спавешчэння.

Разбіце URL на частыны

processUrl спачатку разбівае URL на протакол, хост, шлях і рэквейз-строку за дапамою регулярнага выраза (інструменты на кшталт RegExr дапамагаюць пад час налагоджэння). Процес деструктурырацыі ігноруе цэлы результат падзьемкі і групу рэквейза, якая ўсё ще містіць ?:

const REGEX_DECONSTRUCT_URL = /^(.*?):\/\/(.*?)(\/.*?)(\?(.*))?$/;const deconstructedUrl = REGEX_DECONSTRUCT_URL.exec(url);
    if (!deconstructedUrl) return;
    const [originalUrl, protocol, tld, path, ignore, querystring] = deconstructedUrl;

Заўважыце, што гэты шаблон выкарыстоўвае шлях: простае https://yourdomain без заканчоўкавага слэша не будзе падходзіць, і функцыя вярнёцца раней. Гэта прыемна для лінкаў спавешчэння, але важна знаты, якшо вы будзеце вжываць гэты функцыянал у іншых месцах.

Пораўняйце шлях з таблой маршрутаў

Пасля выявлення неабыходных частакоў, працоўнік пераходзіць толькі да хоўсэф-сайтаў на вашым домене, а пасля праходзіць праз ROUTE_MATCHES пакуль адна з ентры не прыме цей шлях:

if (protocol === "https" && tld.includes("yourdomain")) {
    for (let i = 0; i < ROUTE_MATCHES.length; i++) {
        if (matchPath(ROUTE_MATCHES[i], path, querystring)) {
            // loop until one matches
            break;
        }
    }
}

Перакананне tld.includes("yourdomain") ёсць зручным, але недастатковым: яно таксама прыме хост у формате yourdomain.attacker.example. Аператыўная сістэма пераканваецца ў універсальных і спецыяльных хоўсэф-сайтах, таму рызык є мерыджаны, але точны список дазволеных хостаў ёсць простым спосабам павышэння безпекі, калі працоўнік аднародны для іншых джэраў URL.

У функцыі matchPath шаблон webPath перапрацоўваецца з прыйнятым шляхам за дапамою path-to-regexp — той самай бібліятэкі, якая викорыстоўваецца у React Router. Калі адбываецца падпаданне, выкарыстоўваныя параметры, такія як conversationId, стаюць параметрамі для відпаведнага экрана rnPath, і прыклад запускаецца там. Паколькі гэта выконваецца паўнаста параду компанентаў, маленькі сервіс навігацыі, який зберагае кансэкт роутера-родніка, запускае гэта дзеянне, як описана ў документацыі React Navigation для навігацыі без атрыбута navigation.

Заключэнне

Калі всі этыя элементы ўстановлены, прыклад выкаанавляе два заведамення чераз адну траекторыю коду:

  • Лінкі на ваш веб-сайт, незалежна ад таго, чы роўна ўзьятыя з электранай пошты, SMS чы чату, ачынаюць відпаведны экран у натыўнам прыкладзе.
  • У спам-паведамленнях знова викорыстоўваецца той самы механізм обробкі глыбокіх паўтароў, таму проста нажатыя на елементы ведуць корыстніка адразу да вяліканай розмовы.

    • Тое, што дапамагае падтрымваць гэта рашэння, — это тратаванне URL веб-сайту як ўнікальнага опису пункта прызначэння, пры чым адна табліца перакладае URL у внутршнія маршруты. Тэставаць кожны слой окрема, падкрепіць пераканальвання хоста і стежыце за офіцыйнымі SDK-амі Beams: якщо яны перадаюць даныя ў JavaScript, можна адмовіцца ад форка і застаўці слой маршрутацыі.

    Супаўзяныя матэрыялы

    Усе артыкулыДаслаць брыф