iOS 11.3中PWA默认在WebView打开外部链接的实现方案

我之前在做iOS PWA的第三方登录时也踩过这个坑，iOS的PWA对跨域链接的默认处理确实会跳转到Safari，导致登录后没法回到PWA。试过你说的那个方案没生效很正常，因为它主要针对同域链接的场景。给你两个实际有效的解决思路：

方案一：用window.open在PWA内打开登录窗口 #

iOS 11.3+的PWA支持通过window.open在应用沙盒内打开新窗口，而不是跳转到Safari。你可以拦截登录按钮的点击事件，用这个方法打开Facebook登录链接，然后监听窗口关闭来处理登录回调：

// 给Facebook登录按钮绑定点击事件
document.querySelector('.facebook-login-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  
  // 打开登录窗口，指定窗口大小
  const loginWindow = window.open('你的Facebook授权跳转链接', '_blank', 'width=600,height=700');
  
  // 定时检查登录窗口是否关闭
  const checkLoginStatus = setInterval(() => {
    if (loginWindow.closed) {
      clearInterval(checkLoginStatus);
      // 窗口关闭后，调用你的后端接口检查用户是否登录成功
      verifyLoginStatus();
    }
  }, 1000);
});

需要注意的是，你的Facebook回调页面需要在登录完成后直接关闭窗口（比如用window.close()），这样主PWA窗口就能检测到并触发后续的登录状态验证。

方案二：使用Facebook JavaScript SDK的弹窗登录 #

这是更推荐的方式，直接用Facebook官方的SDK在PWA内弹出登录窗口，全程不会离开PWA的WebView：

首先初始化SDK：

window.fbAsyncInit = function() {
  FB.init({
    appId      : '你的Facebook App ID',
    cookie     : true, // 启用cookie以便服务器访问会话
    xfbml      : true,
    version    : 'v18.0' // 使用最新版本的SDK
  });
};

// 加载SDK脚本
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "https://connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

然后处理登录按钮点击：

document.querySelector('.facebook-login-btn').addEventListener('click', function() {
  FB.login(function(response) {
    if (response.authResponse) {
      // 登录成功，获取用户基本信息
      FB.api('/me', {fields: 'name,email'}, function(userData) {
        // 把用户信息发送到你的后端完成登录流程
        completeLogin(userData);
      });
    } else {
      console.log('用户取消登录或授权失败');
    }
  }, {scope: 'public_profile,email'}); // 请求需要的权限
});

这种方式完全在PWA内部完成登录，不会跳转到Safari，体验更流畅，也避免了跳转后无法返回的问题。

额外注意事项 #

• 确保你的PWA manifest文件配置了display: standalone或display: fullscreen，这是PWA能以独立应用模式运行的前提。
• 如果你用方案一，要确认Facebook的授权回调页面允许被嵌入到新窗口中（大部分第三方登录平台都支持）。

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