获取PushManager订阅时出错-JavaScript

Question

我得到了以下代码，它注册了一个服务工作者并要求用户允许通知。在用户允许推送通知后，我收到一个错误，其中serviceWorkerRegistration.pushManager.getSubscription()返回的promise是null。当我关闭浏览器并再次强制调用此函数时，它不会出错。我不明白为什么。这是我的代码：

window.vapidPublicKey = new Uint8Array([4, 45, ...]); 
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/serviceworker.js')
.then(function(reg) {
console.log('Service worker change, registered the service worker');
});
}
// Otherwise, no push notifications :(
else {
console.error('Service worker is not supported in this browser');
}
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
console.log("ready");
serviceWorkerRegistration.pushManager
.subscribe({
userVisibleOnly: true,
applicationServerKey: window.vapidPublicKey
});
});

// application.js
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
console.error("This browser does not support notifications.");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
console.log("Permission to receive notifications has been granted");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
console.log("Permission to receive notifications has been granted");
saveSubscriptionToDatabase();
}
});
}
function saveSubscriptionToDatabase(){
navigator.serviceWorker.ready
.then((serviceWorkerRegistration) => {
console.log(serviceWorkerRegistration.pushManager.getSubscription());
serviceWorkerRegistration.pushManager.getSubscription()
.then((subscription) => {
$.post("/users/save_subscription", { subscription: subscription.toJSON() });
});
});
}

错误：

Uncaught (in promise) TypeError: Cannot read property 'toJSON' of null
at serviceWorkerRegistration.pushManager.getSubscription.then

更新：

所以我添加了以下按钮：

<input type="button" onclick="saveSubscriptionToDatabase();" value="test">

只要我从按钮点击调用函数，所有的JS和post请求都能正常工作，但当我从检查权限状态的条件调用它时，它仍然像以前一样失败。

更新2:

我再次尝试编写代码，但角度不同。

function registerServiceWorker() {
return navigator.serviceWorker.register('serviceworker.js')
.then(function(registration) {
console.log('Service worker successfully registered.');
return registration;
})
.catch(function(err) {
console.error('Unable to register service worker.', err);
});
}

function askPermission() {
return new Promise(function(resolve, reject) {
const permissionResult = Notification.requestPermission(function(result) {
resolve(result);
});
if (permissionResult) {
permissionResult.then(resolve, reject);
}
})
.then(function(permissionResult) {
if (permissionResult !== 'granted') {
throw new Error('We weren't granted permission.');
}
});
}

function subscribeUserToPush() {
return navigator.serviceWorker.register('serviceworker.js')
.then(function(registration) {
const subscribeOptions = {
userVisibleOnly: true,
applicationServerKey: new Uint8Array("key goes here")
};
return registration.pushManager.subscribe(subscribeOptions);
})
.then(function(pushSubscription) {
console.log("never called");
console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
return pushSubscription;
});
}
registerServiceWorker();
askPermission();
subscribeUserToPush();

我有console.log("never called");的subscribeUserToPush()中命令链的最后一部分从不执行，也没有错误。我正在Chrome 67中测试这个。我确信registration.pushManager.subscribe(subscribeOptions);被调用了。

Answer 1

因此，经过数小时的尝试，我终于找到了问题，而且它非常简单。因此，每次调用navigator.serviceWorker.register('serviceworker.js')时，都必须在文件名之前加上一个/。如果没有/，服务工作者将很好地注册，但获取订阅将失败。您在文档中找到的示例不包括/。

所以，代码应该是这样的：

navigator.serviceWorker.register('/serviceworker.js')

Tada现在工作了。。。。