如何关闭 PWA 中打开的另一个窗口并返回主框架

Question

当我打开一个新窗口（使用 window.open）时，我无法关闭它。我尝试 window.close、history.back 没有发生任何事情。

请注意，在浏览器 (Firefox) 中运行相同的代码可以完美运行。

我正在使用 Firefox 在 Android 平板电脑上渲染 PWA。就我而言，必须使用 Firefox。

我想关闭打开的选项卡并返回我的 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()
    }
  }

我只想要一个新窗口并在几秒钟后关闭它。它可以在浏览器上运行，但不能在 PWA 模式下运行

Answer 1

要处理关闭 PWA 中由

window.open

打开的窗口，您可以使用 Service Workers 和窗口间消息传递。

1.更新 Service Worker 以侦听消息：

// In your service-worker.js
self.addEventListener('message', function(event) {
  if (event.data === 'close-tab') {
    self.clients.matchAll().then(clients => {
      clients.forEach(client => {
        client.postMessage('close-window');
      });
    });
  }
});

2.修改处理打开和关闭窗口的函数：

function handle() {
  if(this.mobileStore.isMobile && this.mobileStore.getOnline()) {
    var tab = window.open(useEnvStore().getUrl, '_blank');

    if (navigator.serviceWorker.controller) {
      setTimeout(() => {
        navigator.serviceWorker.controller.postMessage('close-tab');
        window.location.reload();
      }, 1000);
    }
  } else {
    window.location.reload();
  }
}

3.在主窗口中添加消息处理程序以关闭选项卡：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', function(event) {
    if (event.data === 'close-window') {
      window.close();
    }
  });
}

说明：

1. Service Worker：监听

   close-tab

   消息并向所有客户端发送

   close-window

   消息。
2. 主窗口（句柄函数）：打开一个新选项卡，向 Service Worker 发送

   close-tab

   消息，并在 1 秒后重新加载主窗口。
3. 主窗口消息处理程序：在主窗口（PWA）中，处理消息

   close-window

   ，触发

   window.close()

   。

此解决方案确保您的 PWA 可以通过利用 Service Worker 消息传递来关闭打开的选项卡。请记住，在某些设备和浏览器上，关闭脚本打开的选项卡可能仍然受到限制。