访问没有扩展名的静态文件时阻止 Angular 运行

Question

我有一个用于项目的 Ionic/Angular PWA，它还有一个适用于移动设备的本机 (Ionic Cordova) 应用程序。在应用程序上，我们需要接受与 PWA 具有相同 URL 的深层链接（以便您可以使用相同的链接从 PC 和移动设备进行访问）。

apple-app-site-association为了使 iOS 深层链接（他们称之为“通用链接”）发挥作用，TLD 需要在根文件夹或路径内提供一些名为（不带扩展名）的文件.well-known。Android 也是如此，但有一个名为的文件assetlinks.json（尽管在这种情况下，它并不是真正需要工作，它只是为了遵守一些 Android 指南）。

问题是，当我尝试访问 iOS 文件时，我的 PWA 打开并将其捕获为路由并重定向到主页。对于 Android 文件，它工作得很好，因为它有一个扩展名，并且 Angular（或托管服务器）可以识别浏览器想要访问某些静态文件。

我在互联网上查找了这个问题，但找不到任何解决方案......

该网站托管在 IIS 服务器上，我尝试了对该web.config文件的一些设置修复，例如重写具有扩展名的相同文件的路径.json以及另一个我现在似乎不记得的文件。

我也尝试了文件中路径的所有我能想到的组合src/app-routing.module.ts。如果存在通配符路由，它将被匹配并重定向到指定的位置。如果没有，我会得到一个Error: Cannot match any routes. URL Segment: '.well-known/apple-app-site-association'.

Answer 1

如果您阅读了通用链接，您将了解到这个概念是：应用程序的托管站点提供apple-app-site-association服务，将 url 连接到您的 iOS 应用程序。静态网站的设置非常简单。但对于 Spa 应用程序来说，这可能相当困难。例如，使用 Angular，可以轻松地通过 angular.json 配置静态内容。但是，当该静态内容没有文件扩展名时，它就不再起作用（转发到 Angular 路由，这不是您想要的）。

因此，就 Spa 而言，您真正需要做的是在应用程序前面设置一些额外的基础设施。这个额外的通用链接基础设施只是一个使用与应用程序网址不同的网址访问的最小网站。

通用链接 URL 是您向用户群推广的内容。当访问通用链接站点时，如果用户使用移动设备，则 apple-app-site-associations 文件将返回到设备并用于打开关联的本机应用程序。如果用户不在移动设备上，则会打开为通用链接配置的 Web 应用程序。

我在这里提供了一个简单的说明。这个解释并不是详尽无遗的，而是为您（已经陷入困境的人）指出正确的方向。图中的用例是通用链接的 Firebase 实现——动态链接

一些通用链接的好资源：

• 关于深层链接的一个很好的讨论
• 通用链接的 AWS 概念
• 如何为 AWS 托管应用程序配置通用链接
• Firebase 动态链接（我喜欢他在 Firebase 控制台中配置动态链接的解释 - 适用于 iOS 和 Android）
• Firebase 动态链接——这是配置 iOS 应用程序的一个很好的资源，但在我看来，之前配置动态链接的解释更好。