vue.js - Vue js + 获取service worker注册对象的麻烦

Question

我有一个 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);
});

但这只会返回一个错误:

Uncaught (in promise) TypeError: Cannot read property 'getSubscription' of undefined

奇怪的部分是我在创建方法末尾的控制台日志记录了一个正常的注册服务 worker ，而不是“未定义”。
我应该如何正确获取寄存器 obj？

Answer 1

使用 navigator.serviceWorker.getRegisteration() 而不是 .getRegisterations()。

后者返回 一个数组 在所有注册的 Service Worker 中，每一个都与 pushManager API 相关联。

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