Vue.js Vue js+；获取服务人员注册对象时遇到问题

我有一个vue js pwa项目，我希望能够访问不同组件中的service worker注册对象。在我的主组件App.vue中，我注册service worker，如下所示：

  created(){
    if ("serviceWorker" in navigator && "PushManager" in window) {
  console.log("Service Worker and Push is supported");

  navigator.serviceWorker
    .register("/service-worker.js")
    .then(function(swReg) {
      console.log("Service Worker is registered");
      console.log(swReg)
    })
    .catch(function(error) {
      console.error("Service Worker Error", error);
    });
} else {
  console.warn("Push messaging is not supported");
}
}

成功执行注册后，在子组件中，我得到如下寄存器对象：

    created(){
navigator.serviceWorker.getRegistrations().then(registrations => {
      registrations.pushManager.getSubscription()
  .then(function(subscription) {
    this.isSubscribed = !(subscription === null);

    if (this.isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }
  });
  console.log(registrations);
});

但这只会返回一个错误：

未捕获（承诺中）TypeError:无法读取未定义的属性“getSubscription”

奇怪的部分是我在创建的方法末尾的控制台日志记录了一个普通的注册服务工作者，并且不是“未定义的”。

---

如何正确获取注册表对象？

使用navigator.serviceWorker.GetRegistration（）而不是.GetRegistrations（）

后者返回所有注册服务工作人员的数组，每个工作人员都与pushManager API关联

created(){
  navigator.serviceWorker.getRegistration().then(registration => {
    registration.pushManager.getSubscription()
     .then(function(subscription) {
  ...
}