Vue js + 获取服务工作者注册对象的麻烦

Posted 2023-02-22

【中文标题】Vue js + 获取服务工作者注册对象的麻烦

【英文标题】：Vue js + trouble getting the service worker registration object

【发布时间】：2020-07-24 04:24:04

【问题描述】：

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

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

【参考方案1】：

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

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

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