Szenario

Stellen Sie sich vor, Sie haben eine E-Commerce-App namens ShopEasy und möchten, dass Benutzer, die in E-Mails, Nachrichten oder sozialen Medien auf Produktlinks klicken, direkt zur entsprechenden Produktseite in der App und nicht zur Website weitergeleitet werden.

Schritt 1: Opengraph-Konfiguration im NodeJS-Server für die Linkvorschau:

Open Graph ist ein Protokoll, das von Webentwicklern verwendet wird, um zu steuern, wie URLs dargestellt werden, wenn sie auf Social-Media-Plattformen wie Facebook, Twitter, LinkedIn und anderen geteilt werden. Durch die Verwendung von Open Graph-Tags im HTML einer Webseite können Sie bestimmen, welcher Inhalt in der Vorschau angezeigt wird, wenn ein Benutzer den Link teilt.

Um diese OpenGraph-Tags in einer React Native-App zu verwenden, würden Sie die Links zu Ihrem Server (z. B. https://ShopEasy.com/${type}/${id}) mithilfe von Deep Linking oder universellen Links verarbeiten. Wenn Benutzer diese Links teilen, zeigen Plattformen wie Facebook, Twitter oder iMessage automatisch die Inhaltsvorschau basierend auf den von Ihnen definierten OpenGraph-Tags an.

/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}`);
});

Schritt 2: iOS-Setup und -Konfiguration:

a) (Für die Produktion) Bereiten Sie die Apple-App-Site-Association-Datei vor

Die Apple-App-Site-Association-Datei (AASA) ist eine JSON-Datei, die iOS mitteilt, welche URLs Ihre App öffnen sollen. So können Sie es für Ihre E-Commerce-App einrichten:

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

• AppIDs: . Die Kennung Ihrer App, kombiniert Ihre Apple Team ID (ABCDE12345) mit der Bundle-ID Ihrer App (com.shopeasy.app).
• Pfade: Die Pfade auf Ihrer Website, die in Ihrer App geöffnet werden sollen.
• /product/*: Jede Produktseite (wie https://www.shopeasy.com/product/123) sollte in der App geöffnet werden.
• /category/*: Jede Kategorieseite (wie https://www.shopeasy.com/category/shoes).
• /cart und /checkout: Die Warenkorb- und Checkout-Seiten des Benutzers sollten ebenfalls in der App geöffnet werden.

b) (Für die Produktion) Hosten Sie die Apple-App-Site-Association-Datei

Nachdem Sie die Zuordnungsdatei erstellt haben, legen Sie sie im .well-known-Verzeichnis Ihrer Site ab. Die URL der Datei sollte dem folgenden Format entsprechen:

https:///.well-known/apple-app-site-association(z. B.: https://www.shopeasy.com/.well-known/apple-app-site-association )
Sie müssen die Datei über https:// mit einem gültigen Zertifikat und ohne Weiterleitungen hosten.

c) Aktivieren Sie zugehörige Domänen in Xcode

i) Öffnen Sie Xcode:
Öffnen Sie Ihr ShopEasy-Projekt in Xcode.

ii) Funktion „Zugehörige Domänen hinzufügen“:
Gehen Sie zur Registerkarte „Signatur & Funktionen“.
Klicken Sie auf die Schaltfläche „ “ und fügen Sie „Assoziierte Domänen“ hinzu.

iii) Fügen Sie Ihre Domain hinzu:
Fügen Sie im Abschnitt „Zugeordnete Domänen“ Ihre Domäne mit dem Präfix applinks:.
hinzu. Zum Beispiel:
:
i) Service-Applinks: Wird für Deep-Linking und App-zu-Web-Interaktion verwendet, sodass Ihre App bestimmte URLs direkt verarbeiten kann.
ii) Dienst-Web-Anmeldeinformationen: Wird verwendet, um AutoFill für Anmeldeinformationen zu aktivieren, sodass Benutzer gespeicherte Passwörter nahtlos in Ihrer App und Website verwenden können.

Für Entwickler:

applinks:shopeasy
webcredentials:shopeasy

Für die Produktion:

applinks:shopeasy.com
webcredentials:shopeasy.com

d)(ref) Konfigurieren von URL-Schemata in Info.plist: (URL-Schemata sind nützlich, wenn Sie Ihre App über einen Link öffnen möchten, der nicht unbedingt eine Web-URL ist, um Deep-Linking innerhalb Ihrer App zu ermöglichen oder sie von einer anderen App aus zu starten.)

Wo:
CFBundleURLName: Ein für Menschen lesbarer Name für das URL-Schema. Dies kann eine beliebige beschreibende Zeichenfolge sein.
CFBundleURLSchemes: Das tatsächliche URL-Schema, das Ihre App unterstützt. Es sollte eine eindeutige Zeichenfolge wie shopeasy/showeasy.com sein (falls die Produktion eingestellt ist).

    
...
        CFBundleTypeRoleEditorCFBundleURLNameshopeasyCFBundleURLSchemesshopeasy

d) In 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

e) Deeplink-Gerät testen:

Dies sollte die App öffnen.

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

oder

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

Schritt 3: Android-Setup und -Konfiguration:

i) In AndroidManifest.xml:

    />

ii) Android einchecken:
adb shell am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
oder
Klicken Sie im Emulator auf diesen Link, wenn die Route funktioniert:
http://localhost:3000/share/product/iphone

Schritt 3: Verwendung in der React Native App:

Navigation.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 ist optional und wird je nach Anforderung als Handle übergeben.