请教LinkedIn邮件跳转APP的快速无浏览器中转原理及Cordova适配方案

Hey there! Let me break down exactly how to pull off that instant, no-browser detour link behavior you see in LinkedIn emails—perfect for your Cordova hybrid app.

First, Why LinkedIn's Links Are So Fast #

LinkedIn doesn’t use any fancy middleman pages. Instead, it leverages platform-native deep linking protocols that let the operating system directly check if the app is installed and jump straight to it:

• On iOS: They use Universal Links (Apple’s system-level standard that skips Safari entirely if the app exists)
• On Android: They use App Links (Google’s equivalent, which lets the OS open the app without prompting the user)

These protocols work at the system level, so there’s no waiting for a browser to load a redirect page—hence that lightning-fast jump.

Step-by-Step Implementation for Cordova #

1. Grab the Right Cordova Plugin #

First, you’ll need a plugin to handle cross-platform deep link logic. The most reliable option is cordova-plugin-universal-links—it supports both Universal Links and App Links out of the box. Install it with:

cordova plugin add cordova-plugin-universal-links --save

2. Set Up iOS Universal Links #

This part requires linking your app to your website domain:

• Create the Apple App Site Association File:
  Make a file named apple-app-site-association (no file extension!) with this structure:

  {
    "applinks": {
      "apps": [],
      "details": [
        {
          "appID": "YOUR_TEAM_ID.YOUR_BUNDLE_ID",
          "paths": ["*", "/your-app-paths/*"]
        }
      ]
    }
  }
  

  Replace YOUR_TEAM_ID (from your Apple Developer account) and YOUR_BUNDLE_ID (your app’s iOS bundle ID) with your actual values. The paths array lets you specify which URLs should trigger the app—use "*" to cover all, or narrow it down to specific routes.
  Host this file at the root of your HTTPS website (e.g., https://yourdomain.com/apple-app-site-association).
• Update Cordova Config:
  Add these lines to your config.xml under the iOS platform section:

  <platform name="ios">
    <universal-links>
      <host name="yourdomain.com" scheme="https" />
    </universal-links>
  </platform>
  

• Enable Associated Domains in Xcode:
  Open your Cordova-generated iOS project in Xcode, go to your app’s target > Signing & Capabilities > Add Capability > Associated Domains. Add applinks:yourdomain.com to the list.

3. Configure Android App Links #

Similar to iOS, link your app to your domain using Google’s Digital Asset Links:

• Create the Asset Links File:
  Make a file named assetlinks.json with this structure:

  [
    {
      "relation": ["delegate_permission/common.handle_all_urls"],
      "target": {
        "namespace": "android_app",
        "package_name": "com.your.app.package",
        "sha256_cert_fingerprints": ["YOUR_APP_SHA256_FINGERPRINT"]
      }
    }
  ]
  

  Replace com.your.app.package with your Android app’s package name, and YOUR_APP_SHA256_FINGERPRINT with the SHA-256 hash of your app’s signing certificate (you can get this from Google Play Console or using keytool).
  Host this file at https://yourdomain.com/.well-known/assetlinks.json (must be HTTPS).
• Update Cordova Config:
  Add these lines to your config.xml under the Android platform section:

  <platform name="android">
    <universal-links>
      <host name="yourdomain.com" scheme="https" />
    </universal-links>
  </platform>
  

  The plugin will automatically add the necessary intent filters to your AndroidManifest.xml, so you don’t have to edit it manually.

4. Handle Deep Links in Your App #

Once the links are set up, you need to listen for incoming links and route users to the right screen. Add this code to your main JS file (like www/js/index.js) inside the deviceready event:

document.addEventListener('deviceready', function() {
  // Listen for when a deep link opens the app
  universalLinks.subscribe('opened', function(eventData) {
    console.log('Deep link received:', eventData);
    // Example: Navigate to a specific screen based on the URL path
    const path = eventData.path;
    if (path.includes('/user-profile')) {
      // Load your app's user profile screen here
    } else if (path.includes('/dashboard')) {
      // Load the dashboard
    }
  });
}, false);

5. Craft the Email Link #

Here’s the easy part: Just use your website’s URL (the one linked to your app) in the email. For example, https://yourdomain.com/user-profile/123.

• If the user has your app installed, the OS will skip the browser entirely and open your app directly, triggering the link handler you set up.
• If they don’t have the app, the URL will open in their default browser—so make sure that URL points to a web version of the content (or a download page for your app!).

Quick Troubleshooting Tips #

• Test on real devices: Emulators often don’t handle Universal/App Links correctly, so always test on a physical iOS or Android device.
• Validate your configuration files: Use Apple’s official Universal Links validator and Google’s Digital Asset Links tool to make sure your files are set up correctly.
• Clear cache if testing: If links aren’t working, try uninstalling/reinstalling the app or clearing your browser’s cache—sometimes old settings stick around.

内容的提问来源于stack exchange，提问作者Borja