Сценарий

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

Шаг 1. Конфигурация Opengraph на сервере nodejs для предварительного просмотра ссылки:

Open Graph — это протокол, используемый веб-разработчиками для управления представлением URL-адресов при их совместном использовании на платформах социальных сетей, таких как Facebook, Twitter, LinkedIn и других. Используя теги Open Graph в HTML-коде веб-страницы, вы можете указать, какой контент будет отображаться в предварительном просмотре, когда пользователь поделится ссылкой.

Чтобы использовать эти теги OpenGraph в приложении React Native, вы должны обрабатывать ссылки на свой сервер (например, https://ShopEasy.com/${type}/${id}), используя глубокие ссылки или универсальные ссылки. Когда пользователи делятся этими ссылками, такие платформы, как Facebook, Twitter или iMessage, автоматически отображают предварительный просмотр контента на основе определенных вами тегов OpenGraph.

/routes/share.js

const express = require('express');
const app = express();
const path = require('path');

// Serve static files (e.g., images, CSS, JavaScript)
app.use(express.static(path.join(__dirname, 'public')));

// Route to serve the OpenGraph meta tags
app.get('/:type/:id', (req, res) => { // type: product/category
    const productId = req.params.id;

    // Fetch product details from a database or API (placeholder data for this example)
    const product = {
        id: productId,
        name: 'Sample Product',
        description: "'This is a sample product description.',"
        imageUrl: 'https://ShopEasy.com/images/sample-product.jpg',
        price: '$19.99',
    };

    // Serve HTML with OpenGraph meta tags
    res.send(`
        
        
        
            
${product.name}
            
${product.description}
            
Price: ${product.price}
        
        
    `);
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Шаг 2. Настройка и настройка iOS:

a) (Для рабочей среды) Подготовьте файл apple-app-site-association

Файл apple-app-site-association (AASA) — это файл JSON, который сообщает iOS, по каким URL-адресам следует открывать ваше приложение. Вот как вы можете настроить его для своего приложения электронной коммерции:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appIDs": ["ABCDE12345.com.shopeasy.app"],
                "paths": [
                    "/product/*",
                    "/category/*",
                    "/cart",
                    "/checkout"
                ]
            }
        ]
    }
}

• appIDs: . Идентификатор вашего приложения, объединяющий ваш Apple Team ID (ABCDE12345) с идентификатором пакета вашего приложения (com.shopeasy.app).
• Пути: пути на вашем веб-сайте, которые должны открываться в вашем приложении.
• /product/*: в приложении должна открыться любая страница продукта (например, https://www.shopeasy.com/product/123).
• /category/*: страница любой категории (например, https://www.shopeasy.com/category/shoes).
• /cart и /checkout: в приложении также должны открыться страницы корзины и оформления заказа пользователя.

б) (Для производства) Разместите файл apple-app-site-association

После создания файла ассоциации поместите его в каталог .well-known вашего сайта. URL-адрес файла должен соответствовать следующему формату:

https:///.well-known/apple-app-site-association (например: https://www.shopeasy.com/.well-known/apple-app-site-association )
Вы должны разместить файл по протоколу https:// с действительным сертификатом и без перенаправлений.

в) Включить связанные домены в Xcode

i) Откройте Xcode:
Откройте проект ShopEasy в Xcode.

ii) Добавление возможности связанных доменов:
Перейдите на вкладку «Подписание и возможности».
Нажмите кнопку « » и добавьте «Связанные домены».

iii) Добавьте свой домен:
В разделе «Связанные домены» добавьте свой домен с префиксом applinks:.
Например:
:
i) Ссылки на сервисные приложения: используются для глубоких ссылок и взаимодействия приложений с веб-сайтами, позволяя вашему приложению напрямую обрабатывать определенные URL-адреса.
ii) Веб-учетные данные службы: используются для включения автозаполнения учетных данных, что позволяет пользователям беспрепятственно использовать сохраненные пароли в вашем приложении и на веб-сайте.

Для разработчиков:

applinks:shopeasy
webcredentials:shopeasy

Для производства:

applinks:shopeasy.com
webcredentials:shopeasy.com

d) (ссылка) В Info.plist настройка схем URL-адресов: (Схемы URL-адресов полезны, когда вы хотите открыть свое приложение по ссылке, которая не обязательно является веб-URL-адресом, что позволяет создавать глубокие ссылки внутри вашего приложения или запускать его из другого приложения.)

где:
CFBundleURLName: удобочитаемое имя схемы URL-адресов. Это может быть любая описательная строка.
CFBundleURLSchemes: фактическая схема URL-адресов, которую поддерживает ваше приложение. Это должна быть уникальная строка, например shopeasy/showeasy.com(если производственная версия).

    
...
        CFBundleTypeRoleEditorCFBundleURLNameshopeasyCFBundleURLSchemesshopeasy

г) В AppDelegate.mm:

#import 

// ...
// Add Below Code for DeepLinks

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}


- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}

//DEEP LINKS TILL HERE

@end

д) Тестирование устройства глубокой связи:

Приложение должно открыться.

npx uri-scheme open "shopeasy://product/mobile" --ios

или

xcrun simctl openurl booted "shopeasy://product/mobile"

Шаг 3. Установка и настройка Android:

i) В AndroidManifest.xml:

    />

ii) Зарегистрируйтесь в Android:
оболочка adb am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
или
Нажмите на эту ссылку в эмуляторе, если маршрут работает:
http://localhost:3000/share/product/iphone

Шаг 3. Использование в приложении React Native:

Навигация.jsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './MainNavigator';
import { navigationRef } from '../utils/NavigationUtil';

const config = {
  screens: {
    ProductScreen: '/product/:id',
    CategoryScreen: '/category/:name',
  },
};

const linking = {
  prefixes: ['shopeasy://', 'https://shopeasy.com', 'http://localhost:3000'], 
  config,
};

const Navigation: React.FC = () => {
  return (
    
  );
};

export default Navigation;

App.jsx

  useEffect(() => {
    // Retrieve the initial URL that opened the app (if any) and handle it as a deep link.
    Linking.getInitialURL().then(url => {
      handleDeepLink({ url }, 'CLOSE'); // Pass the URL and an action ('CLOSE') to handleDeepLink function.
    });

    // Add an event listener to handle URLs opened while the app is already running.
    Linking.addEventListener('url', event => handleDeepLink(event, 'RESUME'));
    // When the app is resumed with a URL, handle it as a deep link with the action ('RESUME').

    // Cleanup function to remove the event listener when the component unmounts.
    return () => {
      Linking.removeEventListener('url', event => handleDeepLink(event, 'RESUME'));
    };
  }, []);

CLOSE/RESUME не является обязательным и передается в соответствии с требованиями.