Перейти к основному содержимому

Глубокие и динамические ссылки

Поддержка динамических ссылок

25 августа 2025 года Firebase Dynamic Links будет отключен. Подробнее об этом в объявлении. Рекомендуется начать изучать альтернативные решения, такие как Branch.io, для управления ссылками и глубоких ссылок.

Добавление глубоких и динамических ссылок позволяет делиться специальным типом ссылки, которая сразу открывает конкретную страницу в вашем приложении. Вы также можете передавать пользовательские данные вместе со ссылкой, чтобы загрузить содержимое страницы на основе этих данных.

Например, вы можете поделиться интересным постом в социальной сети с друзьями, и они смогут сразу получить доступ к его содержимому, не проводя ручной поиск поста в приложении. Это работает так же, как любая ссылка на веб-сайт.

На рисунке ниже показано, как это работает:

img.png

Поток глубоких и динамических ссылок

При клике на ссылку сначала проверяется, установлено ли приложение. Если нет, ссылка открывает Play Store или App Store (в зависимости от вашего устройства) для установки приложения. После установки, если для страницы требуется аутентификация, вы увидите страницу входа. После успешного входа вы сможете получить доступ к переданному содержимому.

Важно отметить, что даже если в приложении для доступа к содержимому страницы предусмотрен другой поток (например, Главная страница → Все посты → Один пост), вы можете обойти этот поток и сразу открыть конкретную страницу (например, Один пост).

Глубокие ссылки

Глубокая ссылка позволяет создать URL, который откроет конкретную страницу в вашем приложении. Для работы глубоких ссылок приложение должно быть установлено на устройстве.

Схема URL (структура)

Глубокая ссылка состоит из трех частей. Она начинается со схемы, за которой следует хост и имя страницы, например designersapp://designersapp.com/profile.

img_1.png

Если имя страницы не указано (т. е. designersapp://mydesignersapp.com/)), откроется начальная страница приложения.

img_2.png

Добавление глубокой ссылки

Давайте создадим пример обмена и открытия страницы профиля с помощью глубокой ссылки. Пример выглядит так:

Обмен и открытие глубокой ссылки

Шаги для добавления глубокой ссылки следующие:

  1. Установка схемы URL
  2. Настройка URL страницы
  3. Обмен глубокой ссылкой
  4. Тестирование глубокой ссылки

1. Установка схемы URL

На этом шаге вы установите схему URL. Для этого:

  1. Перейдите в Settings & Integrations > General > App Details.

  2. Если вы хотите добавить глубокие ссылки на несколько страниц и все они требуют входа пользователя, включите Pages Requires Authentication by Default.

  3. В полях URL scheme по умолчанию добавляются значения на основе имени вашего проекта. Чтобы изменить их, введите имя схемы (до "://") и имя хоста (после "://").

  4. Если вы хотите, чтобы пользователи возвращались на главную страницу вместо закрытия приложения при нажатии кнопки "Назад" со страницы глубокой ссылки, включите опцию Pages Are Subroutes of Root Page.

img_3.png

подсказка

Мы рекомендуем включить эту опцию, чтобы повысить вовлеченность пользователей в ваше приложение.

2. Настройка URL страницы

URL страницы указывает на конкретную страницу в вашем приложении, которая используется на веб-сайте и для глубоких ссылок на мобильных устройствах.

Чтобы настроить URL страницы:

  1. Выберите страницу, которую вы хотите открывать через глубокую ссылку.

  2. Откройте панель свойств справа и раздел Route Settings.

  3. По умолчанию маршрут — это имя текущей страницы. Измените его, если вы хотите другое имя в URL страницы.

  4. По умолчанию страница не требует аутентификации при открытии через глубокую ссылку. Однако поставьте галочку Requires Authentication, если ваше приложение работает только после входа.

Настройка URL страницы

3. Обмен глубокой ссылкой

Вы можете поделиться глубокой ссылкой текущей страницы, добавив действие обмена.

Чтобы поделиться глубокой ссылкой текущей страницы:

  1. Выберите страницу, которую вы хотите открывать через глубокую ссылку.

  2. На этой странице выберите любой виджет (например, кнопку обмена) из дерева виджетов или области холста.

  3. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет Action flow Editor в новом всплывающем окне.

    1. Нажмите + Add Action.
    2. Справа найдите и выберите действие Share.
    3. Установите Value Source в From Variable.
    4. Установите Source в Global Properties.
    5. Установите Available Options в Link To Current Page и нажмите Close.
Обмен глубокой ссылкой

4. Тестирование глубокой ссылки

Глубокие ссылки нельзя тестировать в режиме Run. Вместо этого вам нужно тестировать глубокие ссылки на реальном устройстве/эмуляторе.

Перед тестированием глубокой ссылки сначала получите ее. Самый простой способ — запустить приложение на устройстве/эмуляторе, нажать кнопку обмена и скопировать глубокую ссылку.

Теперь вы можете протестировать глубокую ссылку двумя способами:

С помощью инструментов CLI

Если у вас установлен Android Studio с платформенными инструментами SDK, вы можете выполнить следующую команду в терминале, заменив ее на вашу глубокую ссылку.

Copy

adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d "designersapp://designersapp.com/profile"
С помощью мобильного браузера Firefox

Вы также можете протестировать глубокую ссылку в мобильном браузере Firefox. Для этого откройте браузер, вставьте URL в строку поиска, откройте меню опций и нажмите Open in app.

Вот как это сделать:

Использование мобильного браузера Firefox для открытия глубокой ссылки

Динамическая ссылка открывает конкретную страницу в вашем приложении. В отличие от глубокой ссылки, динамическая ссылка сохраняется после установки приложения. Это значит, что если пользователь не установил приложение, его можно перенаправить в соответствующий магазин для установки. После установки приложения пользователь может сразу перейти на целевую страницу.

Для работы динамической ссылки необходимо включить глубокую ссылку. Динамическую ссылку можно рассматривать как дополнительное преимущество глубокой ссылки.

примечание

FlutterFlow использует Firebase Dynamic Link (продукт от Firebase) для создания динамических ссылок.

Давайте разберем пример обмена и открытия страницы профиля с помощью динамической ссылки. Пример будет выглядеть так:

Пример динамической ссылки

Шаги для добавления динамической ссылки следующие:

  1. Настройка домена
  2. Настройка iOS
  3. Установка схемы URL
  4. Настройка URL страницы
  5. Обмен динамической ссылкой
  6. Тестирование динамической ссылки

1. Настройка домена

Для динамической ссылки требуется доменное имя, которое будет использоваться как префикс URL в ссылке.

Чтобы настроить доменное имя, выполните следующие шаги:

  1. Откройте консоль Firebase и нажмите Dynamic Link (в левом меню).

  2. Нажмите кнопку Get Started. Откроется всплывающее окно.

  3. Введите доменное имя. Если у вас нет собственного домена, вы можете выбрать бесплатный Google Provided Domain, который заканчивается на page.link. Чтобы настроить собственный домен, следуйте руководству.

  4. Если вы выбрали Google Provided Domain, настройку можно завершить.

>

Настройка домена для динамической ссылки

2. Настройка iOS

Для работы динамической ссылки на устройствах iOS необходимо выполнить дополнительную конфигурацию.

Настройка iOS включает:

2.1 Добавление App Store ID и Team ID в проект Firebase

Чтобы добавить App Store ID и Team ID в проект Firebase:

  1. Откройте консоль Firebase и нажмите Project Overview (в левом меню).

  2. Выберите проект iOS и нажмите на иконку настроек (шестеренка) внутри.

  3. Прокрутите вниз, чтобы увидеть выбранный проект iOS.

  4. Найдите поле App Store ID, нажмите на иконку редактирования (карандаш), введите ID и нажмите Save. Чтобы узнать, где находится ваш App Store ID, нажмите на иконку вопросительного знака рядом с меткой.

  5. Аналогично найдите поле Team ID, нажмите на иконку редактирования (карандаш), введите ID и нажмите Save. Чтобы узнать, где находится ваш Team ID, нажмите на иконку вопросительного знака рядом с меткой.

Добавление App Store ID и Team ID в проект Firebase

2.2 Добавление возможности Associated Domain в App Store

Чтобы добавить возможность Associated Domain в App Store:

  1. Откройте домашнюю страницу Apple Developer и выберите Certificates, IDs & Profiles.

  2. Выберите Identifiers (крайнее левое меню) и затем нажмите на идентификатор вашего приложения.

  3. Поставьте галочку Associated Domains и нажмите Save.

Добавление возможности Associated Domain в App Store

3. Установка схемы URL

На этом шаге вы установите схему URL. Для этого:

  1. Перейдите в Settings & Integrations > General > App Details.

  2. Если вы хотите добавить глубокие ссылки на несколько страниц и все они требуют входа пользователя, включите Pages Requires Authentication by Default.

  3. Также включите Use Firebase Dynamic Links.

  4. В полях URL scheme по умолчанию добавляются значения на основе имени вашего проекта. Чтобы изменить их, введите имя схемы (до ://) и имя хоста (после ://).

  5. Если вы хотите, чтобы пользователи возвращались на главную страницу вместо закрытия приложения при нажатии кнопки "Назад" со страницы глубокой ссылки, включите опцию Pages Are Subroutes of Root Page. Совет: мы рекомендуем включить эту опцию, чтобы повысить вовлеченность пользователей в ваше приложение.

img_4.png

4. Настройка URL страницы

URL страницы указывает на конкретную страницу в вашем приложении, которая используется на веб-сайте и для глубоких ссылок на мобильных устройствах.

Чтобы настроить URL страницы:

  1. Выберите страницу, которую вы хотите открывать через динамическую ссылку.

  2. Откройте панель свойств справа и раздел Route Settings.

  3. По умолчанию маршрут — это имя текущей страницы. Измените его, если вы хотите другое имя в URL страницы.

  4. По умолчанию страница не требует аутентификации при открытии через динамическую ссылку. Однако поставьте галочку Requires Authentication, если ваше приложение работает только после входа.

Настройка URL страницы

5. Обмен динамической ссылкой

Вы можете поделиться динамической ссылкой текущей страницы, добавив действие Generate Current Page Link и затем поделившись ею с помощью Share Action.

Чтобы поделиться динамической ссылкой страницы:

  1. Выберите страницу, которую вы хотите открывать через глубокую ссылку.

  2. Выберите любой виджет (например, кнопку обмена) из дерева виджетов или области холста.

  3. Сначала добавьте действие для Generate Current Page Link.

  4. Теперь добавьте следующее действие для обмена динамической ссылкой.

  5. Для этого нажмите кнопку + внизу блока и выберите Add Action.

  6. Справа найдите и выберите действие Share.

  7. Установите Value Source в From Variable.

  8. Установите Source в Widget State.

  9. Установите Available Options в Current Page Link и нажмите Close.

Обмен динамической ссылкой

6. Тестирование динамической ссылки

Динамические ссылки нельзя тестировать в режиме Run. Вместо этого вам нужно тестировать ссылки на реальном устройстве/эмуляторе.

Перед тестированием динамической ссылки сначала получите ее. Самый простой способ — запустить приложение на устройстве/эмуляторе. Нажмите кнопку обмена и скопируйте динамическую ссылку.

Теперь вы можете протестировать ссылку в мобильном браузере Firefox. Для этого откройте браузер и вставьте URL в строку поиска.

Вот как это сделать:

Тестирование динамической ссылки

Передача данных со ссылкой

В большинстве случаев вы можете захотеть передать пользовательские данные со ссылкой. Например, отправить ссылку на страницу продукта с кодом скидки или поделиться страницей профиля с его ID профиля. Передача пользовательских данных со ссылкой может использоваться для получения информации, необходимой для отображения на странице.

Передача ID профиля в ссылке

Чтобы передать пользовательские данные со ссылкой, вам нужно следующее:

  1. Убедитесь, что на странице, которую вы хотите передать в динамической ссылке, определен параметр.

img_5.png

Добавление параметра на странице

  1. В Route Settings включите параметр как часть маршрута, добавив перед ним двоеточие (:), например profilePage/:profileId.

img_6.png

Включение параметра в маршрут

Вот и все, что нужно для передачи пользовательских данных с помощью глубокой ссылки или динамической ссылки.

Глубокие ссылки с Branch.io

Поскольку Firebase Dynamic Links устарели и больше не могут использоваться для новых проектов Firebase, мы можем интегрировать мощную альтернативу: Branch.io — кроссплатформенное решение для глубоких ссылок и отложенных ссылок.

С Branch мы можем поддерживать надежные глубокие ссылки внутри приложений FlutterFlow без написания бэкенда с нуля.

Конфигурация Branch.io

Начните с настройки вашего проекта в панели Branch Dashboard. После создания проекта:

1. Запишите ваш Branch Key

После создания проекта первым делом запишите ваш Branch Key.

Этот ключ уникально идентифицирует ваше приложение и потребуется позже при настройке конфигурации FlutterFlow.

2. Настройка перенаправлений

В панели Branch вы найдете настройки для определения резервных URL — они определяют, куда направляются пользователи, если приложение не установлено. Обычно вы перенаправляете пользователей в App Store, Play Store или на пользовательскую целевую страницу.

Настройка перенаправлений важна, поскольку она гарантирует, что ваши ссылки не прервутся, и пользователи всегда получат бесперебойный опыт, даже если им нужно сначала установить приложение.

3. Создание Smart Link

После настройки проекта и перенаправлений вы можете создать новую Smart Link из вкладки Quick Links в панели Branch. Здесь вы сможете установить заголовок ссылки, псевдоним, добавить теги аналитики и настроить предварительный просмотр в социальных сетях (например, изображение, заголовок и описание).

После сохранения Branch сгенерирует Smart Link, готовый к использованию в ваших кампаниях и потоках приложения.

Вот короткая демонстрация:

Настройка конфигурации FlutterFlow

Чтобы Branch Smart Links работали в вашем приложении FlutterFlow, вам нужно обновить файлы нативной конфигурации через вкладку Custom Code в вашем проекте.

  1. Сначала создайте переменные окружения для:

    • branchHostUrl (например, brnch4.app.link)
    • branchKey (ваш ключ Branch, используйте его для production и опционально branchKeyTest для dev-среды. Вы можете переключать режимы через панель Branch и также через переключение окружений в FlutterFlow).
  2. Затем перейдите в FlutterFlow > Custom Code > Configuration Files.

🔧 Настройка Android

  1. Создайте две переменные в файле AndroidManifest.xml с именами branchKey и branchHostUrl и свяжите их с переменными окружения, созданными ранее.

  2. Добавьте блок intent-filter в вашу Main Activity через хук Activity Tags:

<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:scheme="https" android:host="{{branchHostUrl}}"/>
</intent-filter>
  1. Добавьте блок App Component для meta-data:
<meta-data android:name="io.branch.sdk.BranchKey" android:value="{{branchKey}}"/>
<meta-data android:name="io.branch.sdk.TestMode" android:value="false"/>

🍎 Настройка iOS

  1. В Info.plist добавьте новую переменную с именем branchKey и свяжите ее с переменной окружения.

  2. В Info.plist добавьте следующий фрагмент кода.

<key>branch_key</key>
<string>{{branchKey}}</string>
  1. В Runner.entitlements добавьте новую переменную с именем branchHostUrl и свяжите ее с переменной окружения.

  2. В Runner.entitlements добавьте следующий фрагмент кода.

<key>com.apple.developer.associated-domains</key>
<array>
<string>applinks:{{branchHostUrl}}</string>
</array>

Branch автоматически размещает и обслуживает файл apple-app-site-association, необходимый для Universal Links. Вам не нужно вручную загружать его на ваш домен.

Настройка маршрутизации FlutterFlow

FlutterFlow также определяет Custom URI Scheme (например myapp://) по умолчанию. Даже если вы используете Branch для веб-ориентированных Smart Links, полезно держать это в синхронизации.

  1. Перейдите в: Settings & Integrations > App Settings > App Details

  2. Прокрутите до раздела Routing & Deep Linking.

  3. В разделе Custom URI Scheme установите хост/домен URI в соответствии с тем, что определено в вашей панели Branch (например, brnch4:// или dreambrush://).

custom-uri.png

Даже если ваши ссылки в основном используют https://, движок маршрутизации FlutterFlow может все равно использовать пользовательский URI внутри. Сохранение этого поля последовательным предотвращает путаницу или несоответствия маршрутов.

Теперь вы готовы использовать Branch Smart Links в приложении FlutterFlow с бесперебойной отложенной глубокой привязкой, проверкой App/Universal Link и конфигурацией на основе окружения.

Интеграция Flutter Branch SDK

Чтобы интегрировать Branch с вашим приложением FlutterFlow, вы используете пакет Dart flutter_branch_sdk. Это позволит вашему приложению слушать ссылки Branch и реагировать соответственно.

  1. Перейдите в FlutterFlow project > Settings and Integrations > Pubspec Dependencies и добавьте следующую зависимость.
flutter_branch_sdk: ^5.0.1

Убедитесь, что вы используете последнюю версию, доступную на pub.dev

  1. Создайте пользовательское действие для инициализации Branch SDK. Это гарантирует, что сессия Branch настроена при запуске приложения.
import 'package:flutter_branch_sdk/flutter_branch_sdk.dart';

Future initBranch() async {
// Add your function code here!
await FlutterBranchSdk.init();
}

Вызовите это действие внутри Final Actions вашего main.dart.

  1. Создайте еще одно пользовательское действие для прослушивания кликов по ссылкам Branch и опциональной маршрутизации пользователя:

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:async';
import 'package:flutter_branch_sdk/flutter_branch_sdk.dart';
import 'package:flutter/services.dart';

StreamSubscription<Map>? _branchSubscription; // stream subscription that listens for branch links
final Set<String> _handledBranchLinks = {};

Future handleBranchDeeplink(Future Function(dynamic data) onLinkOpened) async {
// Add your function code here!

if (_branchSubscription != null) return; // If already listening, ignore link

_branchSubscription = FlutterBranchSdk.listSession().listen(
(data) async {
final clicked = data['+clicked_branch_link'] == true;
if (!clicked) return;

final uniqueId = data['~referring_link'] ?? data['deeplink_path'] ?? '';

if (_handledBranchLinks.contains(uniqueId)) return;
_handledBranchLinks.add(uniqueId);

await onLinkOpened(Map<String, dynamic>.from(data)); // call action defined by user & pass the link data.
},
onError: (error) {
if (error is PlatformException) {
print('[Branch] PlatformException: ${error.code} - ${error.message}');
} else {
print('[Branch] Unknown error: $error');
}
},
);
}

Вы можете передавать пользовательские пары ключ-значение, такие как "page": "paywall" или "navigation_type": "bottom_sheet", при создании ссылки Branch и извлекать их здесь, чтобы решить, на какой экран перейти в FlutterFlow.

Обязательно протестируйте как свежие установки (отложенные глубокие ссылки), так и существующие сессии приложения, чтобы убедиться, что ваши действия выполняются как ожидается.

подсказка

Для полного обзора посмотрите видеоурокок:

Библиотека Branch Deeplinking

Если вы предпочитаете не интегрировать Branch.io с нуля, мы ввели Branch Deep Linking Library, которую вы можете импортировать из Marketplace бесплатно.

Эта библиотека настраивает все необходимое для маршрутизации пользователей в ваше приложение с помощью умных ссылок Branch — с нативной конфигурацией, обработкой ссылок и помощниками глубоких ссылок, уже подключенными.

Установка библиотеки

Вы можете установить Branch Deeplinking Library из Marketplace. Обратитесь к инструкциям Add Library Item, чтобы узнать, как добавить ее в ваш аккаунт.

Настройка Branch

Вам понадобятся три значения из вашей панели Branch:

  • Branch Key: Ваш ключ production или test из панели Branch.

  • Custom Link Domain: Ваш основной домен ссылок Branch (например, yourapp.app.link). Это используется для генерации и обработки умных ссылок.

  • Alternate Link Domain: Дополнительный домен Branch (например, yourapp-alternate.app.link), который указывает на те же данные и поведение ссылки. Это рекомендуется для обеспечения лучшей доставляемости по платформам и каналам и должно быть включено в конфигурацию вашей платформы.

Мы рекомендуем хранить эти значения в переменных окружения, чтобы вы могли:

  • Управлять ими для каждого окружения (например, dev vs prod ключи Branch).
  • Легко назначать их конфигурации библиотеки при добавлении в проект.

Добавление значений библиотеки

При добавлении Branch Deep Linking Library в ваш проект (убедитесь, что версия +0.0.7 и выше), она попросит предоставить четыре значения:

  • branchApiKey
  • branchLinkDomain
  • branchAlternateLinkDomain
  • isTestMode

Используйте переменные окружения, которые вы создали, чтобы заполнить эти значения.

к сведению

isTestMode должно быть установлено в false при запуске приложения в production.

Вот быстрая демонстрация, показывающая, как настроить эти значения в панели библиотеки.

Инициализация Branch SDK

Откройте файл main.dart в FlutterFlow и добавьте пользовательское действие initBranch в раздел Final Actions. Это гарантирует, что Branch SDK инициализируется при запуске приложения.

Чтобы получать и обрабатывать данные глубокой ссылки, перейдите на вашу Entry Page или Logged-In Page и добавьте действие handleBranchDeeplink как первое действие в потоке страницы.

Это действие handleBranchDeeplink слушает входящие Branch Deeplinks и обрабатывает логику маршрутизации. Это действие должно быть добавлено на вашу Entry Page или Logged-In Page под триггером onPageLoad. Оно инициализирует слушатель потока, который ждет открытия ссылок Branch (отложенных или прямых). Убедитесь, что это первое действие вашего триггера on Page Load.

onLinkOpened Action Callback

При получении ссылки вызывается обратный вызов onLinkOpened с данными ссылки, позволяя выполнить пользовательскую навигацию или логику. Вы можете выполнить логику навигации в этом обратном вызове действия.

linkData Action Parameter

Действие handleBranchDeeplink получает объект linkData, который содержит все метаданные, переданные со ссылкой. Параметр linkData — это Map, содержащий полезную информацию из ссылки Branch.

В примере приложения Dreambrush мы получаем следующие данные ссылки:

{
"$og_title": "Check out my Ai Image on DreamBrush!",
"$publicly_indexable": true,
"imageId": "QiC94EaGNoonEKzln07A",
"~creation_source": 4,
"$og_description": "This image was created with DreamBrush app. You can check it out here.",
"+click_timestamp": 1750099254,
"$match_duration": 100000,
"~feature": "Ai Image Creation",
"$tags[0]": "generation",
"+match_guaranteed": true,
"$alias": "",
"$canonical_identifier": "/imageDetails/QiC94EaGNoonEKzln07A",
"+clicked_branch_link": true,
"~id": "1461141612502859827",
"+is_first_session": false,
"~campaign": "Image Generation",
"~referring_link": "https://dreambrush.app.link/DZ9liDTc6Tb",
"~channel": "Share"
}

Структура ссылки

Ваши данные ссылки могут не выглядеть точно как в показанном примере. Однако они будут следовать похожей структуре с сопоставимыми ключами и значениями.

Некоторые важные ключи, о которых стоит знать:

  • $canonical_identifier: Исходный путь маршрута, использованный при генерации ссылки (например, /imageDetails/:id). Вы можете явно установить это значение при создании ссылки через действие Generate Link. Если вы не установите его, Branch выведет его на основе назначения ссылки или метаданных содержимого.

  • ~referring_link: Полный URL Branch, который был кликнут.

  • $og_title: Это заголовок, который появится в предварительном просмотре ссылки. Он устанавливается пользователем через действие Generate Link.

  • $og_description: Это текст описания, показываемый под заголовком в предварительном просмотре ссылки. Он устанавливается пользователем через действие Generate Link.

  • ~channel, ~feature, ~campaign и $tags[0] являются частью пользовательской аналитики и атрибуции Branch. Эти поля явно устанавливаются пользователями при создании ссылки (например, через действие Generate Link) и помогают организовывать и анализировать производительность ваших ссылок по платформам и кампаниям.

  • page: Это предлагаемый пользовательский ключ, который может быть установлен пользователем при генерации ссылки. Обычно он определяет целевую страницу или экран, на который приложение должно перейти при открытии ссылки (например, "paywall", "productPage", "onboardingStep2"). Хотя это не зарезервированный ключ Branch, это распространенная конвенция именования для обработки глубоких ссылок и логики маршрутизации внутри приложения.

  • Любые другие пользовательские параметры, добавленные при создании ссылки (например, productId, referrer и т. д.). Убедитесь, что ключ и значение оба String.

Это позволяет писать гибкую условную логику навигации на основе того, что было поделено. Например, в следующем примере мы можем даже показать нижнюю панель на основе значения страницы.

Используйте данные ссылки из этого обратного вызова для:

  • Навигации на страницу.
  • Показ нижней панели.
  • Загрузки содержимого из Firestore с использованием ссылочного ID.

Использование глобального контекста для навигации

В определенных структурах приложения, особенно когда главная страница удаляется из стека навигации рано, стандартная навигация с использованием локального контекста может не сработать. Чтобы обеспечить надежную работу глубоких ссылок и маршрутизации в этих сценариях, вы можете переопределить локальный контекст глобальным контекстом навигатора.

Этот подход гарантирует, что логика навигации не привязана к иерархии виджетов на момент выполнения, делая ее более надежной и гибкой.

См. подробный пример с использованием приложения DreamBrush.

Тестирование Deeplinks

Рекомендуется тестировать глубокие ссылки на физическом устройстве, поскольку проверка ссылок (особенно для Universal Links или App Links) может работать нестабильно на эмуляторах или симуляторах. Мы рекомендуем использовать Local Run для запуска приложений на физических устройствах.

Действие generateLink позволяет создавать пользовательскую Branch Smart Link прямо из вашего приложения FlutterFlow.

Это особенно полезно, когда вы хотите позволить пользователям:

  • Делиться содержимым приложения (например, постом, продуктом или изображением).
  • Приглашать других с реферальными кодами.
  • Запускать глубокие ссылки, которые переносят получателей на конкретные экраны приложения.

Действие принимает следующие параметры:

  • canonicalIdentifier – Уникальный путь для содержимого (например, /imageDetails/:id). Это становится ключевой ссылкой, используемой при маршрутизации пользователя обратно в приложение.

  • title – Заголовок ссылки (используется в предварительных просмотрах социальных сетей или аналитике).

  • description – (Опционально) Краткое описание содержимого.

  • metadata – Динамическая карта пользовательских параметров для включения в ссылку (например, page: "imageDetails", imageRef: "abc123" и т. д.)

  • linkProperties – Динамическая карта для настройки поведения ссылки (например, установите feature, channel, campaign или stage для аналитики).

JSON maps

Из-за ограничения, если вы планируете оставить переменные типа map (например metadata или linkProperties) пустыми, вы все равно должны передавать их как пустые карты, а не null.
Убедитесь, что все ключи и значения — обычные строки, избегайте вложенного JSON или нестроковых типов.
Неправильная структура может привести к тихому сбою действия генерации ссылки.

Функции-помощники Branch

Эти функции помогают безопасно работать с данными глубокой ссылки, извлекать значения и условно навигировать на основе метаданных ссылки.

  • isTargetingPage(linkData, targetPage) - Проверяет, соответствует ли значение страницы в данных ссылки конкретному имени экрана. Параметр page устанавливается пользователем при генерации ссылки из панели Branch или FlutterFlow. Например, если целевое значение страницы в вашей глубокой ссылке — "paywall", вы можете использовать эту функцию для проверки этого значения и соответствующей навигации.

  • getCanonicalIdentifierFromLink(linkData): Функция-помощник, которая возвращает канонический путь (например, /imageDetails/abc123), изначально прикрепленный к умной ссылке. Полезна для извлечения базового маршрута или ссылки на содержимое, связанного с общей ссылкой.

  • getReferringLinkFromLink(linkData): Функция-помощник, которая извлекает полный URL умной ссылки Branch из данных (обычно под ключом ~referring_link). Полезна для отслеживания, аналитики или проверки источника ссылки.

  • getLastPathSegmentFromMap(linkData, key): Извлекает последний сегмент пути (например, abc123) из URI, хранящегося в поле данных ссылки (например, /imageDetails/abc123). Это особенно полезно, когда ваша глубокая ссылка содержит структурированный путь, такой как /imageDetails/abc123, и вы хотите извлечь только ID (abc123).

  • getLinkValue(linkData, key): Безопасно извлекает любое одиночное значение из Map данных ссылки. Возвращает null, если не найдено. (например, извлечение значения атрибута showPromo из linkData).

warning

Если вы пытаетесь извлечь стандартные ключи Branch, такие как ~channel или $canonical_identifier, убедитесь, что включаете специальный символ (например, ~ или $) как часть строки ключа.

  • createLinkProperties(...): Возвращает карту свойств Branch Link, используемую при генерации умной ссылки. Вы можете определить значения, такие как: feature, campaign, stage, channel, alias или tags или пользовательские резервные URL. Полезно для организации и отслеживания сгенерированных ссылок для маркетинга или рефералов.

Пример DreamBrush

В приложении DreamBrush мы можем использовать generateLink после того, как пользователь завершит генерацию изображения. Ссылка может включать:

  • canonicalIdentifier: Текущий маршрут страницы, который /imageDetails/:imageRef.
  • page: Имя целевой страницы imageDetails.
  • title: "Check out my AI image!"

Эта ссылка затем может быть поделена через WhatsApp, email или социальные сети — и при клике она приведет получателя прямо к этому содержимому внутри приложения.

Вот быстрый пример генерации ссылки Branch со страницы, которая использует Firebase Document ID как параметр маршрута.

Теперь в обратном вызове действия handleBranchDeeplink добавьте дополнительную логику для обработки таких пользовательских ссылок:

Чтобы продемонстрировать, как использовать глобальный контекст для навигации, добавьте новое действие Execute Custom Code непосредственно перед действием Navigate To и вставьте следующий код.

final context = appNavigatorKey.currentContext!;

Это гарантирует, что логика навигации использует глобальный контекст навигатора, что необходимо, если структура вашего приложения удаляет главную страницу рано в жизненном цикле. В таких случаях зависимость от локального контекста может привести к сбою глубокой ссылки — использование глобального контекста гарантирует, что навигация все равно работает надежно.

Платные планы

Примечание: Действие Execute Custom Code доступно только в платных планах.

Часто задаваемые вопросы

Почему моя глубокая ссылка не работает, когда я перехожу на другую страницу с главной страницы?

Это часто происходит потому, что Главная страница удаляется из стека навигации, особенно когда Allow Navigate Back отключено в действии Navigate To.

Поскольку обработчик глубокой ссылки обычно определяется на Главной странице, он уничтожается, как только страница удаляется, что приводит к тому, что глубокие ссылки перестают работать при последующем срабатывании.

✅ Предпочтительное решение: Использование глобального контекста для навигации

Вместо зависимости от присутствия Главной страницы для обработки глубоких ссылок настройте логику навигации на использование глобального контекста навигатора. Это гарантирует, что навигация будет работать, даже если Главная страница удалена из стека.

Вы можете сделать это, добавив действие Execute Custom Code перед действием Navigate To.

См. полный пример.

✅ Альтернативное (но ограниченное) решение: Сохранение Главной страницы в стеке

Если вы не используете глобальный контекст, вы можете предотвратить эту проблему, сохраняя Главную страницу в памяти:

Включите "Allow Navigate Back" для любых действий навигации с вашей Главной страницы, даже если навигация не запускается напрямую из глубоких ссылок.

Это сохраняет Главную страницу активной, чтобы она могла продолжать слушать события глубоких ссылок.

Почему генерация моей ссылки Branch не работает?

Это часто происходит потому, что один или несколько входных данных, переданных в действие (например metadata или linkProperties или customParams при использовании функции-помощника createLinkProperties), содержат неверное форматирование JSON.

Branch ожидает, что эти значения будут переданы как карта простых пар ключ-значение String, а не как вложенный JSON, объекты или динамические типы.

Убедитесь, что ожидаемый тип Ключа и ЗначенияString и String, и попробуйте снова.

Почему глубокая привязка не работает при тестировании из симулятора?

Глубокая привязка, особенно Universal Links и отложенная глубокая привязка, может работать ненадежно на симуляторах/эмуляторах iOS или Android из-за ограничений платформы.

Ограничения симуляторов:

  • iOS: Симуляторы не могут правильно проверять Universal Links (нет App Store, ограниченная поддержка домена AASA).

  • Android: Некоторые версии не могут автоматически проверять App Links или обрабатывать отложенные глубокие ссылки без Play Services.

✅ Рекомендуется:

Всегда тестируйте глубокую привязку на физическом устройстве для точного поведения.