基于Firebase Cloud Functions的iOS Universal Link与App Store重定向问题

问题背景 #

通过Firebase Cloud Functions实现亚马逊商品链接跳转逻辑：已安装亚马逊APP则直接跳转至APP内，未安装则引导至App Store下载。安卓端运行正常，但iOS端存在异常：已安装APP时，Universal Link能正确打开APP，却会同时触发App Store的重定向，造成用户困惑。

现有核心代码采用嵌套定时器逻辑：先尝试跳转APP，延迟555ms后执行fallback跳转App Store。安卓Chrome中跳转APP后浏览器失去控制权，后续代码不再执行；但iOS Safari中两个重定向会全部触发。此前尝试过document.hidden、blur、visibilitychange等监听方案，均未解决问题。

问题原因 #

iOS Safari的页面生命周期与安卓Chrome存在差异：通过Universal Link跳转APP后，浏览器页面不会立即销毁或完全失去控制权，原页面的定时器仍会继续执行，导致fallback逻辑被触发。之前的监听方案未正确捕捉到页面因跳转APP进入后台的时机，或监听注册顺序不合理。

解决方案 #

调整逻辑顺序：先注册页面状态监听，设置fallback定时器，再尝试跳转APP；当检测到页面进入后台（说明APP已成功打开），立即清除fallback定时器。

修改后的代码片段：

const htmlResponse = `
<!DOCTYPE HTML>
<html>
     <head>
        <meta charset="utf-8">
        <script>
              function openApp(){
                  let fallbackTimer;

                  // 定义fallback跳转逻辑
                  function triggerFallback() {
                      window.location.href = '${urls.fallbackUrl}';
                  }

                  // 先设置fallback定时器
                  fallbackTimer = setTimeout(triggerFallback, 555);

                  // 监听页面可见性变化：页面隐藏则清除定时器
                  function handleVisibilityChange() {
                      if (document.hidden || document.visibilityState === 'hidden') {
                          clearTimeout(fallbackTimer);
                          document.removeEventListener('visibilitychange', handleVisibilityChange);
                      }
                  }
                  document.addEventListener('visibilitychange', handleVisibilityChange);

                  // 监听pagehide事件：页面被隐藏时清除定时器
                  window.addEventListener('pagehide', () => {
                      clearTimeout(fallbackTimer);
                  });

                  // 尝试跳转至亚马逊APP
                  setTimeout(function () {
                      window.location.href = '${urls.redirectUrl}';
                  }, 10);
              }
              openApp();
        </script>
    </head>
    <body>
    </body>
</html>
`;

res.setHeader('Content-Type', 'text/html');
res.send(htmlResponse);

方案说明 #

1. 调整监听注册顺序：在执行跳转前完成事件监听注册，确保不会错过页面状态变更的信号。
2. 双重事件覆盖：同时监听visibilitychange和pagehide事件，覆盖iOS Safari中页面进入后台的不同触发场景，提升检测可靠性。
3. 精准定时器管理：跳转前设置fallback定时器，一旦检测到页面隐藏（APP跳转成功），立即清除定时器，阻止不必要的App Store跳转。

内容的提问来源于stack exchange，提问作者Muhammad Taimoor Sultani