超越网页的超链接

Avatar of Atishay Jain
Atishay Jain 发表

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

超链接是网络上最古老、最受欢迎的功能。 超文本(即 http/s 中的 ht)一词指的是包含超链接的文本。 链接到其他人的超文本的能力使网络成为一个网络——一个相互连接的页面集合。 这一基本功能使网络成为一个非常强大的平台,很明显,应用程序世界需要此功能。 所有现代平台都支持应用程序注册 URI(自定义协议)的方式,并且还具有通用链接(在应用程序中处理 Web 链接)。

让我们看看为什么我们想要利用此功能以及如何做到这一点。

为什么要使用应用程序链接?

创建应用程序可以打开的 URI 提供了一组独特的好处。 一个 URL 封装了网页的整个状态(在单页面应用程序(SPA)大量使用 JavaScript 之前是这样,即使在 SPA 中,维护此功能也是最佳实践),建议在应用程序中进行路由,以便 URL 导航永远不会中断。 URL 使浏览器拥有一致的“后退”和“前进”按钮以及重新加载和书签页面。 并且像 Google 搜索这样的功能依赖于网页地址和 Web 应用程序来将用户导航到正确的位置。 允许应用程序打开 URL 提供了一种方式,可以从其他应用程序、网站甚至应用程序内部(例如帮助/教程页面)链接应用程序中的内容和功能。

琐事! 桌面应用程序在万维网出现之前就已经有了超链接,例如 1987 年的 Mac 上的 Hypercard 和 1990 年的 Windows 帮助。 网络中超链接的革命性之处在于,您可以链接到其他人创建和拥有的内容。 在智能手机出现之前,这种跨应用程序链接的概念在传统平台上并不流行。

命令行上的应用程序链接

命令行界面已经有一个 shell,它支持传递参数、将来自一个应用程序的结果重定向到另一个应用程序,甚至支持脚本编写。 尽管如此,出于各种原因,仍然需要对超链接的支持。

  • 安全性: 命令行脚本过于复杂,难以正确使用。 期望技术用户(非开发人员)理解如何清理命令行脚本并确保脚本不会意外调用某些内容(例如 rm -rf ~/Documents)存在很大风险。 命令行不受沙箱保护,虽然它提供了强大的功能,但也将责任赋予用户,并且容易受到攻击。
  • 浏览器支持: 浏览器无法提供命令行界面。 它是为了在沙箱中运行不受信任的第三方代码而构建的,无法打破这个沙箱。 而且,如果我们不遵守 Web 技术的规则,应用程序将把自己隔离在互联网之外。 这将是巨大的损失。
  • 移动设备: 在移动设备的世界中,触摸键盘不如桌面上的实体键盘好用和直观。 因此,即使命令行存在,使用起来也很困难。 重定向和链式操作的所有功能不如基于键盘的命令行有效。 在这种情况下,更简单的解决方案(如 URL)更可取。
  • 状态: 从理论上讲,命令行界面可以提供一种方法,使应用程序处于任何状态。 但是,实际上,它最初的目的是启动应用程序执行任务,然后返回代码。 此外,Windows 和 Mac 中的 GUI 降低了它的优先级。 许多应用程序(例如 Microsoft Word 和 Adobe Photoshop)从未提供过完整的命令行支持。 它们甚至不存在于环境 PATH 中,需要使用完整路径才能启动。 URI 提供了一种全新的方式来查看应用程序之间连接信息和功能。 它们是一种安全、现代的应用程序间通信方式,用户无需思考。

链接术语

深层链接

深层链接是指可以链接到网站/应用程序中特定页面/功能的概念。 例如,https://css-tricks.org.cn/link/to/this/page 是更广泛的 https://css-tricks.org.cn 链接中此页面的深层链接。 与打开应用程序的浅层链接不同,深层链接在特定状态下打开应用程序,并传递数据,以便应用程序使用。 自定义 URI(下面介绍)是应用程序内实现深层链接的第一种方式,在许多情况下,“深层链接”现在是自定义 URI 的同义词,但它也可以指通用链接。

自定义 URI

网络一直都有某些自定义 URI,它们链接到默认应用程序,例如 mailto:[email protected]tel:1234567890 分别用于电子邮件和电话。 扩展此功能是一个显而易见的选择,所有主要平台都提供了一种方式,让应用程序注册 URI 协议(例如 css-tricks://<link details>),该协议可以打开深层链接的本机应用程序。 它应该封装整个状态,并在系统上提供所有路由功能以打开应用程序(如果可用)。 当应用程序已安装并且希望打开用户首选的实现所需协议的应用程序(例如浏览器或电子邮件客户端)时,它们提供了一种良好的应用程序间通信界面。

自定义 URI 非常适合用户希望选择一个应用程序来执行特定选择的应用程序类别,但对于将网站链接到本机应用程序的任务来说,它们并不是很适合,原因如下:

  • 安装: 与 Web 不同,本机应用程序需要安装,如果没有安装,您有两个选择:将用户发送到应用商店(它也提供自定义 URI)或适当地回退。 这两项任务都需要额外的代码,而 URI 无法封装这些代码。 应用商店 URI 将是另一个需要存储的单独 URI。 此外,我们必须检测应用程序是否已安装,这需要导航到 URI 并处理导航错误,类似于 404,因为协议未注册。 这不像锚标记(<a href="{URL}"></a>)那样简单,因此是开发人员抱怨的常见来源。
  • 缺乏中央注册中心: 即使一切操作都完全正确,用户仍然可能被引导到不应该链接到的应用程序。 与 DNS 系统(它保证域名唯一性)不同,应用程序平台没有中央存储库。 因此,多个应用程序可以注册 csstricks 作为自定义 URI。 现在,其他人也可以将同一个 URI 注册为一个应用程序,如果系统上安装了另一个应用程序而不是所需的应用程序,则该应用程序可能会启动。 自定义 URI 用于应用程序选择的自由度与我们始终希望打开特定应用程序的情况背道而驰。
  • 第三方链接: 出于上述原因,将自定义 URI 提供给第三方很麻烦,验证它们也很痛苦。 它也是一个新协议。 每个网站都包含指向 Web 内容的链接,更新整个互联网是不可能的。 出于 SEO 目的,它甚至可能不受欢迎。

因此,如果我们想让用户体验到应用程序是查看内容的首选方式,则自定义 URI 并不是完美的解决方案。 这可以在一定程度上通过智能应用程序横幅得到缓解,应用程序横幅会在浏览器获取自定义 URI 和应用商店链接以识别应用程序时显示。 但这将不是无缝的。

琐事! URI 和 URL 从定义上略有不同,尽管它们可以互换使用。 URI 代表统一资源标识符,这意味着它封装了获取资源所需的一切。 URL(统一资源定位器)是 URI 的一种特殊类型,它标识 Web 上的资源。 因此,从技术上讲,Web 地址是 URL,但像 csstricks:// 这样的内容只是一个 URI。

以下是自定义 URI 可能有意义的所有可能的用例:

  • 您需要提供一个 URI,许多第三方客户端应用程序可以注册。 假设您的应用程序中有一个 git://,而用户最喜欢的 git 客户端可以注册该 URI,并在单击链接时克隆存储库。
  • 您没有一个功能齐全的网站。
  • 您需要一个便于用户记忆的 URI。
  • 您愿意处理与导航相关的所有边缘情况。

除了我们将在下一节中介绍的通用链接,您还可以使用自定义 URI 来实现并行处理。自定义 URI 有助于公开自定义 URL 以进行应用程序间通信,同时保留通用链接用于 Web 到应用程序导航的特殊情况。Android 正式将自定义 URI 称为深度链接

自定义 URI、通用链接和即时应用的控制流程
通用链接、应用程序链接或应用程序 URI

解决 Web 到应用程序重定向问题的方案可以使用通用链接(在 Mac 和 iOS 中称为通用链接)、应用程序链接(在 Android 中称为应用程序链接)或应用程序 URI(在 Windows UWP 中称为应用程序 URI),这些都是同一个概念的不同名称。这封装了每个网站都需要编写的逻辑,以便检测已安装的应用程序、启动正确的页面并在自定义 URL 出现导航失败时进行处理。它与智能应用程序横幅非常相似,因为您需要在网站上提供应用程序商店链接到您的应用程序以进行验证,但这消除了所有冗余。由于现有的 http(s) URL 已经包含整个状态,因此注册自定义 URI 是冗余的。原始 URL 本身就可以导航到应用程序,如果应用程序未安装,网站将提供备用体验。

注册应用程序使用通用链接后,安装应用程序后,操作系统将访问互联网以确定应用程序支持的链接集。当点击这些链接中的任何一个时,将启动本机应用程序而不是浏览器。应用程序现在可以使用完整的寻址支持,提供更个性化的体验,如果应用程序未安装,则可以回退到浏览器。与通用链接的一个重要区别在于它们会影响常规浏览,因此操作系统提供商会严格控制它们。

通用链接的一些良好用例包括:

  • 您有一个功能齐全的网站作为备用方案。
  • 用户的预期流程是从网站到应用程序。
  • 您已经通过网站内容在网络上的链接积累了大量知名度。

即时链接或延迟深度链接

如果用户在打开链接后继续安装应用程序,则延迟深度链接为深度链接提供了缺失的部分。用户可以被转发到应用程序商店,应用程序商店负责在应用程序最终安装后启动应用程序时维护上下文。这在安装应用程序时提供了连续性。目前,此方法仅受 Android 支持(作为 Google Play 即时应用),如果您希望用户从应用程序中进行操作以获得所需的功能,则可以使用此方法。Web 上的超链接系统是无缝的,点击链接几乎可以立即到达目的地(尽管幕后发生了很多事情)。延迟深度链接为应用程序提供了相同的功能,用户点击链接可以下载应用程序并启动它,并显示正确的页面,使应用程序安装时的所有任务尽可能无缝。

您可能考虑使用即时链接,如果:

  • 您需要用户使用应用程序而不是网站,即使他们来自浏览器(除了少数情况下,例如磁盘空间不足或已关闭此功能以节省带宽)。
  • 您的关键页面始终在应用程序中保持最新。
  • 好的,始终使用它们。有了 Google 为即时应用提供的额外 SEO 优势,没有理由不对具有通用链接的应用程序启用“即时”应用。

现在我们已经总结了每个术语的含义,让我们看看如何在特定平台上创建这些链接。

设置应用程序超链接

MacOS 和 iOS

自定义 URI

在 MacOS 和 iOS 中注册自定义 URI 非常容易。在 Xcode 中,转到项目的Info.plist文件,然后选择URL Types选项。在文件中创建类型为URL Schemes的项目,您可以在其中添加要支持的所有 URL 方案。

注意:Xcode 在 URL 类型中填充的默认URL Identifier是可选的。

Xcode 中的 URL 方案
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>css-tricks</string>
    </array>
  </dict>
</array>

对于MacOS,您将收到对AppDelegate的调用,您可以在其中覆盖该函数

func application(_ application: NSApplication, open urls: [URL]) {
  // Select the first URL in the list of URL to open
  let url = urls[0]; 
  // Log the entire URL
  NSLog("%@", url.absoluteString)
}
-(void)application:(NSApplication *)application openURLs:(NSArray<NSURL *> *)urls {
  NSLog(@"%@", urls[0].absoluteString);
}

iOS 中,在AppDelegate中接收相同调用的函数是

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
  NSLog("%@", url.absoluteString)
  return true
}
-(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options: (NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  NSLog(@"%@", url.absoluteString);
  return true;
}

在所有这些情况下,URL类型都包含通常的 URL 部分,例如路径、查询和搜索参数。

通用链接

MacOS 不支持通用链接。要在 iOS 上获得通用链接,您需要注册 Apple 开发者计划或成为 Apple 开发者企业计划成员。iOS 上的通用链接是关联域更广泛概念的一部分,其中网站的机密信息(例如存储的凭据)可以从应用程序内部访问,并且 Apple 不允许常规 Xcode 用户使用通用链接(如果您不小心为您的 App ID 启用了此功能,但未将其置于授权文件中,请准备好收到验证错误:ERROR ITMS-90046:“无效的代码签名授权”)。

琐事!通用链接是一个新概念,许多 Mac 和 Windows 桌面应用程序使用自己的网络堆栈构建,不使用应用程序商店,并且可能是在几年前发布的。因此,操作系统没有强制所有应用程序遵循通用链接概念并打开应用程序所需的控制。Apple 选择暂不将通用链接实现到 MacOS 中,而在 Windows 上,它们仅适用于 Microsoft Edge 浏览器和其他 UWP 应用程序(使用相同技术)。

要在 iOS 上注册通用链接,您需要执行以下操作:

  1. 在 Apple 开发者网站上启用 App ID 以获取关联域功能。
  2. 将关联域添加到授权文件中。
  3. apple-app-site-association文件添加到 Web 域以提供应用程序的所有权验证。
  4. 添加代码来处理通用链接的点击。

步骤 1 和 2 可以一起在 Xcode 的功能选项卡中执行,前提是您已登录并选择了正确的配置文件(来自 Apple 开发者或企业帐户)。Xcode UI 将指示这两个项目都已完成。

Xcode 功能部分中的关联域

在上图中,步骤 2 已成功完成,而步骤 1 正在等待。您可以单击感叹号以查找问题。重要的是在域名前缀为applinks:(表示您需要应用程序链接功能;与共享凭据相同)。这表示已启用应用程序链接功能。

以上步骤也可以单独完成。

对于步骤 1,在开发者网站的App ID部分启用Associated Domains(如图像底部所示)。

启用关联域的 Apple 开发者网站

对于步骤 2,将以下内容添加到授权文件中:

授权 plist
<key>com.apple.developer.associated-domains</key>
<array>
  <string>applinks:css-tricks.com</string>
</array>

现在,对于步骤 3,托管一个名为apple-app-site-association的关联文件,例如https://css-tricks.org.cn/apple-app-site-association,其 MIME 类型为application/json,包含来自网站根目录的以下 JSON 数据:

{
  "applinks": {
    "apps": [],
    "details": {
      "ABCDEFGHIJ.com.ccs-tricks.mobile": {
        "paths": [
          "*"
        ]
      }
    }
  }
}

以上代码段授予 ID 为ABCDEFGHIJ.com.ccs-tricks.mobile的应用程序,并允许它访问https://css-tricks.org.cn域上的所有请求。请注意,这适用于https,但不支持http。您也可以使用备用位置,例如https://css-tricks.org.cn/.well-known/apple-app-site-association。此 URL 是首选的,因为它可以将 Android、iOS 和 UWP 关联文件保存在安全的单独文件夹中,以防止意外删除。

琐事!通用链接不能保证应用程序会被打开。如果用户从 iOS 中的标题返回网站,操作系统将决定从那时起默认使用网站,直到用户通过再次点击 Safari 中的标题来决定使用应用程序。

对于步骤 4,将以下代码添加到应用程序中:

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
  if userActivity.activityType == NSUserActivityTypeBrowsingWeb {
    let url = userActivity.webpageURL!
    print(url.absoluteString)
  }
  return true
}
-(BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {
  if(userActivity.activityType == NSUserActivityTypeBrowsingWeb) {
    NSLog(@"%@", userActivity.webpageURL.absoluteString);
  }
  return true;
}

iOS 上的智能应用程序横幅更简单,可以通过在标题部分添加简单的元 HTML 标记来添加,如下所示:

<meta name="apple-itunes-app" content="app-id=123456789, app-argument=https://css-tricks.org.cn/linkto/this/article, affiliate-data=optionalAffiliateData">

它们调用与我们之前介绍的自定义 URI 相同的方法。

Windows(传统)

在传统的 Windows 平台 (Win32/.NET) 上,仅支持自定义 URI(称为 `Custom Pluggable Protocol Handler`)。在 Windows 中添加自定义 URI 涉及在 `HKEY_CLASSES_ROOT` 中添加注册表项。以下操作将在点击 `css-tricks://<text>` 链接时,使用提供的绝对路径打开应用程序。由于使用命令行,这总是会打开应用程序的新实例,而不是将 URL 发送到正在运行的应用程序。

提供应用程序名称的注册表项
打开命令的注册表项
Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\css-tricks]
"URL Protocol"=""
@="CSS Tricks (Application name)"

[HKEY_CLASSES_ROOT\css-tricks\shell]

[HKEY_CLASSES_ROOT\css-tricks\shell\open]

[HKEY_CLASSES_ROOT\css-tricks\shell\open\command]
@=""C:\\Windows\\notepad.exe" "%1""

以上操作将使用与提供的 URL 相对应的命令行参数启动 `notepad`。请注意,记事本不支持自定义 URI,并且不知道如何处理 URL。

这种行为类似于在控制台中传递参数,应用程序需要确保它能正确区分参数是常规 CLI 还是自定义 URI,如下所示:

namespace ConsoleApplication1 {
  class Program {
    static void Main(string[] args) {
      if (args.Length > 0 && args[0].IndexOf("css-tricks:") == 0) {
        Console.Write(args[0]);
      }
    }
  }
}
int main(int argc, char*argv[]) {
  if (argc > 1) { // argv[0] is the file name.
    std::string word(argv[1]);
    if (word.compare(0, 11, "css-tricks:") == 0) {
      std::cout<<word;
    }
  }
  return 0;
}

通用 Windows 平台 (UWP)

在通用 Windows 平台上,您可以使用包清单注册自定义 URI 和通用链接(称为 `App URI Handler`)。

自定义 URI

在 `package.appxmanifest` 中添加协议声明

`package.appxmanifest` 中的协议声明

同样可以在代码中实现

<Extensions>
  <uap:Extension Category="windows.protocol">
    <uap:Protocol Name="css-tricks" DesiredView="default">
      <uap:DisplayName>CSS Tricks</uap:DisplayName>
    </uap:Protocol>
  </uap:Extension>
</Extensions>

…现在可以在应用程序中处理。

protected override void OnActivated(IActivatedEventArgs args) {
  base.OnActivated(args);
  if (args.Kind == ActivationKind.Protocol) {
    var e = args as ProtocolActivatedEventArgs;
    System.Diagnostics.Debug.WriteLine(e.Uri.AbsoluteUri);
  }
}
// In App.xaml.h
virtual void OnActivated(Windows::ApplicationModel::Activation::IActivatedEventArgs^ e) override;

// In App.xaml.cpp
void App::OnActivated(Windows::ApplicationModel::Activation::IActivatedEventArgs ^ e) {
  if (e->Kind == Windows::ApplicationModel::Activation::ActivationKind::Protocol) {
    auto args = (ProtocolActivatedEventArgs^)e;
    auto url = args->Uri->AbsoluteUri;
  }
}
通用链接(App URI)

App URI 仅在 `Microsoft Edge` 浏览器中受支持。它们在 Internet Explorer、Chrome 或 Firefox 中不起作用。App URI 还具有类似于自定义 URI 的包条目。它在 Visual Studio Code 2017 的 UI 中不可用。`package.appxmanifest` 条目几乎相同

<Extensions>
  <uap3:Extension Category="windows.appUriHandler">
    <uap3:AppUriHandler>
      <uap3:Host Name="css-tricks.com" />
    </uap3:AppUriHandler>
  </uap3:Extension>
</Extensions>

如果 `uap3` 不可用,可以将其添加到 `Package` 标签中,其中也定义了 `uap`

xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3"

App URI 是 Windows 的一个相对较新的功能,许多 UWP 项目将较旧版本的 Windows 作为最低版本。您可能需要将其提升才能支持此功能。

与 iOS 一样,网站需要验证域的所有权才能使此功能正常运行。这可以通过在网站根目录上托管一个 MIME 类型为 `application/json` 的文件来完成,例如 `https://css-tricks.org.cn/windows-app-web-link` 或 `https://css-tricks.org.cn/.well-known/windows-app-web-link`,通过 `https` 协议,内容为

{
  "packageFamilyName": "YourPackageFamilyNameHere",
  "paths": ["*"],
  "excludePaths": ["/none/*", "/robot.txt"]
}

要获取包系列名称,请在 `Powershell` 中运行以下命令,并搜索您的包路径

Get-AppxPackage

处理 App URI 需要与 Windows 上的自定义 URI 相同的代码。在设计上,您只需要查看提供的 URI 中的协议字段并编写相应的逻辑。

与 iOS 一样,Windows 用户可以选择禁用打开应用程序。Windows 提供注册表设置来强制应用程序打开(用于测试),并且还提供一个验证工具(位于 `%windir%\system32\AppHostRegistrationVerifier.exe`)来验证上述设置是否正确。

Android

自定义 URI

Android 从一开始就支持自定义 URI。这可以通过代码来完成。在 `AndroidManifest.xml` 中添加

<activity android:name=".CustomUriActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="css-tricks" />
  </intent-filter>
</activity>

类别 `DEFAULT` 确保无需用户操作即可启用它。`BROWSABLE` 确保自定义 URI 在浏览器中起作用。

然后可以在创建时在 `CustomUriActivity.java` 中处理它

public class CustomUriActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Intent intent = getIntent();
    if (Intent.ACTION_VIEW.equals(intent.getAction())) {
      Uri uri = intent.getData();
    }
  }
} 
通用链接

Android 中的通用链接与 App URI 非常相似。Android Studio 提供了一个 GUI 工具来创建它。转到 `Tools > App Link Assistant`。这将提供创建应用程序链接所需的三个任务

Android 中的 App Link Assistant

对于步骤 1,输入 URL 映射编辑器,然后单击 `+` 按钮以打开 URL 映射对话框

URL 映射对话框

单击确定后,它将显示本来可以使用 `AndroidManifest.xml` 中的代码。

<activity android:name=".CustomUriActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="css-tricks.com"/>
  </intent-filter>
</activity>

**注意:**这与自定义 URI 相同。在步骤 2 中,选择您分配的活动,它将添加加载操作的代码。代码与上面用于自定义 URI 的代码完全相同。

在步骤 3 中,它将生成需要作为 `application/json` MIME 类型添加到网站的 JSON 文件,位于 `https://css-tricks.org.cn/.well-known/assetlinks.json`。

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "css_tricks",
    "package_name": "com.css-tricks.android",
    "sha256_cert_fingerprints":
    ["17:CC:87:9C:C8:39:B1:89:48:E8:2E:9E:6F:FC:7D:03:69:4D:05:90:2A:84:B8:AE:5D:6B:30:97:F8:1C:2B:BF"]
  }
}]

Android Studio 自动执行指纹生成,以验证应用程序身份。此身份在应用程序的调试版本和发布版本中有所不同。

即时链接

Android 上的即时应用程序需要对我们之前介绍的应用程序链接进行一些小的更改。要启用即时应用程序,请修改上面声明的意图,使其看起来像这样

<activity android:name=".CustomUriActivity">
  <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="http" android:host="css-tricks.com"/>
    <data android:scheme="https"/>
  </intent-filter>
</activity>

这允许 `http` 和 `https` URL 与应用程序相关联,`autoVerify` 告诉 Android(Google Play)商店自动验证清单项。即时应用程序是 Play 商店/Google Chrome 的功能。应用程序上的更改很少,可以支持它。

Electron

Electron 应用程序是具有 Chromium 运行时的传统 MacOS 和 Windows 应用程序。这些平台仅支持自定义 URI,可以启用它们,而无需触及编译后的代码。

对于 MacOS,请编辑 `info.plist`,如 MacOS 部分所述。应用程序对象将接收事件,如下所示

// In main.js
require('electron').app.on('open-url', (event, url) => {
  console.log(url);
});

对于 Windows,请添加 Windows 部分中定义的注册表项。应用程序将在 `process.argv` 中接收自定义 URL

// In main.js
console.log(process.argv[2])

在 Electron 中,您可以加载可以打开 URL 的外部网页。如果希望仅在内部处理这些 URL,则可以通过 Electron API 注册它们

require('electron').protocol.registerHttpProtocol('css-tricks', (req, cb) => {
  console.log(req.url)
});

网页

完成一个完整的循环,网站也可以注册自定义 URI(例如,通过网站处理 `mailto:` 链接)。请注意,这些仅影响其他网站中提供的链接,与其他应用程序中的链接无关。该 API 非常严格,只能用于选定的链接类型:`web+<insert anything here>`。浏览器允许注册预定义的顶级协议列表

  • **Chrome**:mailto、mms、nntp、rtsp、webcal
  • **Firefox**:bitcoin、geo、im、irc、iris、magnet、mailto、mms、news、sip、sms、smite、ssh、tel、urn、webcal、wti、xmpp

要注册协议,您需要提供与注册它的网站相同的域(即,`https://css-tricks.org.cn` 只能注册 `https://css-tricks.org.cn`,不能注册 `https://css-tricks.org.cn`)。

if (navigator.registerProtocolHandler) {
  navigator.registerProtocolHandler("web+csstricks", "https://css-ticks.com/?s=%s", "CSS Tricks custom URI");
}

自定义 URI 不会被搜索引擎索引,因此除了处理诸如 `mailto`、`webcal` 等链接(这些链接已在 web 上的多个地方存在)之外,它们没有太大用处。

总结

向原生应用程序添加超链接是一种简单有效的方式,可以实现用户在应用程序之间无缝切换,并在应用程序未安装的情况下进行优雅处理。借助这些链接,应用程序可以提供遍布互联网的路径,这可以成为一种有效的推广机制。链接还为网站提供了一种方法,可以让用户在特定页面上提供数据并启动应用程序,而无需担心可下载文件或命令行脚本带来的安全问题,从而可以有效地进行教程和错误报告。路由和 URL 为万维网的核心功能提供了支持,例如导航、后退按钮、书签和搜索。应用程序中的超链接将来自万维网近 30 年的经验带入了原生应用程序。