Vue js + проблема с получением объекта регистрации сервисного работника

Question

У меня есть vue js pwa проект, и я хочу иметь доступ к объекту регистрации сервисного работника в разных компонентах. В моем основном компоненте App. vue я регистрирую сервисного работника так, как :

  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);
});

, но это только возвращает ошибку:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'getSubscription' из неопределенного

странная часть - это консольный журнал, который у меня есть в конце созданного метода, регистрирует нормального работника службы регистрации и не является "неопределенным". как мне правильно получить регистр obj?

Answer 1

Используйте navigator.serviceWorker.getRegisteration () вместо .getRegisterations ().

Последний возвращает массив всех зарегистрированных сервисных работников, каждый из которых связан с pushManager API.

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