在Android版Firefox上PushManager订阅失败 [英] PushManager subscription fails on Firefox for Android
问题描述
我正在将Web推送通知集成到我的Web应用程序中.一切对于台式机上的Chrome和Firefox以及Android上的Chrome都可以正常运行，但对于 Android上的Firefox 而言则无法正常工作.这个问题似乎在讨论相同的问题，但没有回应
I'm working on integrating web-push notifications in my web-application. Everything works fine for Chrome and Firefox on desktop and Chrome on Android, but not for Firefox for Android. This question seems to discuss the same issue but has no responses.
I used this tutorial as a base for the service worker registration script. I have added some more prints/checks but it is mostly the same.
因此，当在FF Android上通过按按钮调用 registerServiceWorker 方法时，会安装 serviceWorker ，并调用 subscribeUser 函数，但是 pushManager.subscribe 方法将失败，并显示以下错误消息:
So, when calling the registerServiceWorker method from a button press on FF Android, the serviceWorker is installed, the subscribeUser function is called, but the pushManager.subscribe method will fail with the following error message:
DOMException: User denied permission to use the Push API.
这是不正确的，即使暂停在错误打印行 Notification.permission 上也会返回"granted" .
This is not correct, even while paused on the error print line Notification.permission will return "granted".
在每晚构建上执行相同的操作会导致稍有不同，但行为仍然不正确. pushManager.subscribe 方法不会引发错误.而是运行了回调，但对 subscription 参数使用了 null 值.因此，该过程仍然失败.
Doing the same thing on the nightly build results in slightly different, but still incorrect behaviour. The pushManager.subscribe method does not throw an error. Instead the callback is ran but with a null value for the subscription argument. Therefore, the process still fails.
服务人员注册脚本:
'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还是我的代码中的错误?
I cannot figure out how to get a working push-subscription. As said before, all other browsers that I have tried work fine. I hope someone can point me in the right direction. Is this a bug in Firefox Android or in my code?
使用手动显示通知
new Notification("Hi there!");
可以工作，原则上证明权限不是问题.
does work, proving in principle that permissions are not the issue.
推荐答案
更新:FF Fenix团队在显示通知时确认了 bug
UPDATE: FF Fenix team confirmed a bug while displaying the notifications
可以随时在此处
对服务人员对Firefox移动浏览器的支持感到好奇.试图找到作为插件的Mobile Firefox调试工具或没有运气的第三方工具.
Got curious regarding service worker support for Firefox mobile browser. Tried hard to find a debug tool for Mobile Firefox as plugin or a 3rd party tool with no luck.
但是，我已经在Mobile Firefox上测试了我的Web推送应用程序，并且可能会完全确认服务人员注册状态存在问题.
However, I've tested my web push application on Mobile Firefox and may totally confirm there is an issue with Service Worker Registration state.
为了丢弃代码中的任何问题，我使用了马特·冈特(Matt Gaunt)的Webpush书
In order to discard any issues within my code, I've used Matt Gaunt's Webpush Book
我可以告诉Matt的服务人员返回注册很简单:
And I can tell Matt's service worker returns registration as simply as that:
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');
}
Android版Firefox成功请求了通知权限，，但是每次启动.showNotification函数时，它都不会显示推送.
Firefox for Android successfully requests permission for notification, but it doesn't display push whenever you launch the .showNotification function.
以下是Matt网站上的Badge示例中的showNotification方法示例:
Here's an example of showNotification method within the Badge example in Matt's website:
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.
Looks fine and should be working fine, but for Firefox Mobile it doesn't work at all. I guess this issue should be escalated to Mozilla.
更新在Github上创建了新的错误报告:
UPDATE New bug report was created on Github:
这篇关于在Android版Firefox上PushManager订阅失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
