在 Android 上点击 Firefox 中的通知打开“about:blank”？

Question

在我的网络工作者中，我尝试描述当我们单击通知时会发生什么：

self.addEventListener('notificationclick', (event) => {
  event.notification.close();

  const link = event.notification.data?.link || self.location.origin

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
      for(const client of clientList)
        if(client.url === link && "focus" in client) return client.focus();

      try
      {
        if(clients.openWindow) return clients.openWindow(link);
      }
      catch (error) {
        console.error('catch', err);
      }
    })
  );
});

它可以在我的 ubuntu 上的 firefox 中工作，也可以在 ubuntu 和 android 上的 chrome 中工作，但在 android 上的 firefox 中可以打开新选项卡“about:blank”。

我不明白为什么以及如何解决它？

Answer 1

您在 Android 上的 Firefox 中遇到的问题是，在单击通知时使用

about:blank

而不是预期的 URL 打开新选项卡，这可能源于 Firefox 在 Service Worker 中处理

clients.openWindow()

的方式。以下是调试并可能解决问题的几个步骤：

验证网址

确保链接变量包含有效且绝对的 URL。格式错误或缺失的 URL 可能会默认为

about:blank

。

您可以记录链接变量以检查其值：

console.log('Notification link:', link);

使用绝对 URL

Android 上的 Firefox 可能无法在这种情况下很好地处理相对 URL。始终确保 URL 完全合格（例如，https://example.com）。

您可以像这样规范化 URL：

const link = new URL(event.notification.data?.link || self.location.origin, self.location.origin).href;

正确的错误处理

在您的代码中，catch 块中有一个小拼写错误。您应该记录变量错误，而不是错误：

catch (error) {
    console.error('Error in notification click handler:', error);
}

这可能不是直接原因，但修复它对于准确调试很重要。

检查 Service Worker 范围

Service Worker 的范围必须包含您尝试打开的 URL。例如，如果您的 Service Worker 注册了类似

/sw.js

的范围，请确保您的目标 URL 位于此范围内。

像这样注册 Service Worker：

navigator.serviceWorker.register('/sw.js', { scope: '/' });

检查

clients.openWindow

支持

在使用

clients.openWindow()

之前，请确认当前上下文支持它。如果不受支持，可能会导致意外行为。

if (!clients.openWindow) {
    console.error('clients.openWindow is not supported in this environment.');
}

在私人模式下测试

有时扩展或缓存数据会干扰预期的行为。在私人浏览会话中测试功能以排除这种情况。

更新火狐浏览器

确保您在 Android 上运行最新版本的 Firefox。浏览器更新通常包括针对此类问题的错误修复。

Android 版 Firefox 的后备

如果问题仍然存在，请检测 Android 上的 Firefox 并实施解决方法：

const isFirefoxAndroid = navigator.userAgent.includes('Firefox') && navigator.userAgent.includes('Android');

if (isFirefoxAndroid) {
    console.log('Applying workaround for Firefox on Android.');
    // Implement alternate behavior here if needed
}

最后注意事项

如果上述解决方案均不起作用，这可能是 Android 版 Firefox 特有的错误。您可以考虑在 Mozilla 的 Bugzilla 上提交一份错误报告，其中包含有关您的设置和代码的详细信息。