Firefox安卓平板PWA中如何关闭新开窗口并返回主框架？

在Firefox普通浏览器中，用window.open新开窗口后能通过tabs.close()正常关闭，但在安卓平板的Firefox PWA模式下，这个逻辑完全失效，没法关闭新标签页返回PWA主界面。示例代码如下：

handle() {
  if(this.mobileStore.isMobile && this.mobileStore.getOnline()){
    var tabs = window.open(useEnvStore().getUrl, '_blank')
    setTimeout(() => {
      tabs.close()
      window.location.reload()
    }, 1000)
  } else {
    window.location.reload()
  }
}

可行解决方案 #

1. 放弃新开标签页，改用当前窗口跳转后返回 #

PWA对跨标签页的权限限制比普通浏览器严格，直接在当前窗口打开链接，再跳转回原页面，绕过关闭标签页的问题：

handle() {
  if(this.mobileStore.isMobile && this.mobileStore.getOnline()){
    const originalUrl = window.location.href;
    // 在当前窗口打开目标链接
    window.location.href = useEnvStore().getUrl;
    setTimeout(() => {
      // 跳转回PWA主页面
      window.location.href = originalUrl;
      window.location.reload();
    }, 1000);
  } else {
    window.location.reload();
  }
}

2. 用iframe模拟新开窗口 #

在PWA内部插入iframe加载目标链接，到时间后移除iframe，完全不需要新开标签页：

handle() {
  if(this.mobileStore.isMobile && this.mobileStore.getOnline()){
    const iframe = document.createElement('iframe');
    iframe.src = useEnvStore().getUrl;
    // 让iframe占满整个屏幕，模拟新开窗口效果
    iframe.style.position = 'fixed';
    iframe.style.top = 0;
    iframe.style.left = 0;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.zIndex = 9999;
    document.body.appendChild(iframe);
    
    setTimeout(() => {
      // 移除iframe，回到主界面
      document.body.removeChild(iframe);
      window.location.reload();
    }, 1000);
  } else {
    window.location.reload();
  }
}

3. 通过Service Worker控制窗口关闭 #

如果PWA注册了Service Worker，可以借助它来管理所有打开的窗口：

主页面代码修改：

async function handle() {
  if(this.mobileStore.isMobile && this.mobileStore.getOnline()){
    window.open(useEnvStore().getUrl, '_blank');
    setTimeout(async () => {
      const swReg = await navigator.serviceWorker.getRegistration();
      if (swReg?.active) {
        // 给Service Worker发消息，通知关闭目标窗口
        swReg.active.postMessage({
          type: 'CLOSE_WINDOW',
          targetUrl: useEnvStore().getUrl
        });
      }
      window.location.reload();
    }, 1000);
  } else {
    window.location.reload();
  }
}

Service Worker代码添加：

self.addEventListener('message', async (event) => {
  if (event.data.type === 'CLOSE_WINDOW') {
    // 获取所有打开的窗口客户端
    const allClients = await self.clients.matchAll({
      type: 'window',
      includeUncontrolled: true
    });
    // 找到目标窗口并关闭
    allClients.forEach(client => {
      if (client.url.includes(event.data.targetUrl)) {
        client.close();
      }
    });
  }
});

4. 检查PWA权限设置 #

打开Firefox的应用设置，找到已安装的PWA，检查是否开启了“窗口控制”相关权限，确保PWA有操作窗口的权限。

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