PushManager 订阅在 Firefox for Android 上失败

Question

我正在努力将网络推送通知集成到我的网络应用程序中。对于桌面版 Chrome 和 Firefox 以及 Android 版 Chrome，一切正常，但对于 Android 版 Firefox 则不然。 This question 似乎在讨论同样的问题，但没有任何回应。

我使用this tutorial 作为服务工作者注册脚本的基础。我添加了更多的打印/检查，但基本相同。

因此，当在 FF Android 上通过按下按钮调用 registerServiceWorker 方法时，会安装 serviceWorker，调用 subscribeUser 函数，但 pushManager.subscribe 方法将失败并显示以下错误消息：

DOMException: User denied permission to use the Push API.

这是不正确的，即使在错误打印行暂停时Notification.permission 将返回"granted"。

在 nightly build 上做同样的事情会导致略有不同，但仍然是不正确的行为。 pushManager.subscribe 方法不会引发错误。而是运行回调，但 subscription 参数的 null 值。因此，该过程仍然失败。

Service Worker 注册脚本：

'use strict';

function updateSubscriptionOnServer(subscription, apiEndpoint) {
  return fetch(apiEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      subscription_json: JSON.stringify(subscription)
    })
  });

}

function subscribeUser(swRegistration, applicationServerPublicKey, apiEndpoint) {
  // It seems browsers can take the base64 string directly.
  // const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  console.log(`Subscribing pushManager with appkey ${applicationServerPublicKey}`);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerPublicKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');
    console.log(`Sending subscription data to server (${apiEndpoint})`, subscription);

    return updateSubscriptionOnServer(subscription, apiEndpoint);

  })
  .then(function(response) {
    if (!response.ok) {
      throw new Error('Bad status code from server.');
    }
    return response.json();
  })
  .then(function(responseData) {
    console.log(responseData);
    if (responseData.status!=="success") {
      throw new Error('Bad response from server.');
    }
  })
  .catch(function(err) {
    // FF Android says "User denied permission to use the Push API."
    console.log('Failed to subscribe the user: ', err);
    console.log(err.stack);
  });
}

function registerServiceWorker(serviceWorkerUrl, applicationServerPublicKey, apiEndpoint){
  let swRegistration = null;
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    console.log('Service Worker and Push is supported');
    console.log(`Current Notification.permission = ${Notification.permission}`);

    swRegistration = navigator.serviceWorker.register(serviceWorkerUrl)
    .then(function(swReg) {
      console.log('Service Worker is registered', swReg);
      console.log(`Current Notification.permission = ${Notification.permission}`); // Will give "granted"
      subscribeUser(swReg, applicationServerPublicKey, apiEndpoint);
    })
    .catch(function(error) {
      console.error('Service Worker Error', error);
    });
  } else {
    console.warn('Push messaging is not supported');
    return false;
  }
  return swRegistration;
}

我不知道如何获得有效的推送订阅。如前所述，我尝试过的所有其他浏览器都可以正常工作。我希望有人能指出我正确的方向。这是 Firefox Android 还是我的代码中的错误？

使用手动显示通知

new Notification("Hi there!");

确实有效，原则上证明权限不是问题。

Answer 1

更新： FF Fenix 团队在显示通知时确认了一个错误

随时关注here

对 Firefox 移动浏览器的 Service Worker 支持感到好奇。 努力寻找 Mobile Firefox 的调试工具作为插件或第三方工具，但没有成功。

但是，我已经在 Mobile Firefox 上测试了我的网络推送应用程序，并且可以完全确认 Service Worker 注册状态存在问题。

为了消除代码中的任何问题，我使用了Matt Gaunt's Webpush Book

我可以告诉马特的服务工作者返回注册就像这样简单：

 async function registerSW() {
  await navigator.serviceWorker.register('/demos/notification-examples/service-worker.js');
}

function getSW() {
  return navigator.serviceWorker.getRegistration('/demos/notification-examples/service-worker.js');
}

Firefox for Android 成功请求通知权限，但在您启动 .showNotification 函数时不显示推送。

这是 Matt 网站的 Badge 示例中的 showNotification 方法示例：

 async function onBadgeClick() {
            const reg = await getSW();
            /**** START badgeNotification ****/
            const title = 'Badge Notification';
            const options = {
                badge: '/demos/notification-examples/images/badge-128x128.png'
            };
            reg.showNotification(title, options);
            /**** END badgeNotification ****/
        }

看起来不错，应该可以正常工作，但对于 Firefox Mobile，它根本不工作。 我想这个问题应该上报给 Mozilla。

更新 在 Github 上创建了新的错误报告：