navigator.serviceWorker.ready 承诺不会在生产推送通知上得到解决...实际上代码正在开发中

Question

我想运行函数 configurePushSub 每当在我的 create-react-app 的页面上触发一个事件时，我都想运行下面的函数...它在开发模式下一切正常，但是当我在 Netlify 上托管我的应用程序时，承诺 navigator.serviceWorker.ready 没有得到解决，因为我在控制台中看不到消息 navigator has loaded... 我已经尝试了一切可能的工作但一切都不成功

  function configurePushSub() {
    if (!('serviceWorker' in navigator)) {
      return;
    }
    let hasUnsubscribed;
    var reg;
    console.log(
      'running',
      navigator.serviceWorker,
      navigator.serviceWorker.ready
    );
    navigator.serviceWorker.ready
      .then(function (swreg) {
        console.log(swreg, 'navigator has loaded');
        reg = swreg;
        return swreg.pushManager.getSubscription();
      })
      .then((sub) => {
        if (!!sub) {
          return sub.unsubscribe().then(function (s) {
             hasUnsubscribed = true;
            return navigator.serviceWorker.ready;
          });
        }
        return navigator.serviceWorker.ready;
      })
      .then(function (sub) {
        var vapidPublicKey =
          'BOChVD1tKTc0Of3c-0JplT1y5FPOm6oijP_4stWBXwoQe6xI4GGt6cnpdu4JLwt_Znj23bj_hku8OSois1y9fLE';

        var convertedVapidPublicKey = urlBase64ToUint8Array(vapidPublicKey);

        return reg.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: convertedVapidPublicKey,
        });
      })
      .then(async function (newSub) {
        let key;
        let authSecret;
        let endPoint;
        if (newSub) {
          const rawKey = newSub.getKey ? newSub.getKey('p256dh') : '';
          key = rawKey
            ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey)))
            : '';
          var rawAuthSecret = newSub.getKey ? newSub.getKey('auth') : '';
          authSecret = rawAuthSecret
            ? btoa(
                String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))
              )
            : '';

          endPoint = newSub.endpoint;
          const config = {
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`,
            },
          };
          const gpuTier = await getGPUTier();
          const info = getOperatingSystemName(this);
          console.log(info);
          if (hasUnsubscribed) {
            await axios.put(
              `${Config.SERVER_ADDRESS}/api/pushNotifications/id`,
              {
                endpoint: endPoint,
                key,
                auth: authSecret,
                gpu: gpuTier.gpu,
                operating_system: `${info.os} ${info.osVersion}`,
                device: info.mobile ? 'mobile' : 'desktop',
                browser: `${info.browser} ${info.browserMajorVersion}`,
                operating_system_architecture: info.arch,
              },
              config
            );
          } else {
            await axios.post(
              `${Config.SERVER_ADDRESS}/api/pushNotifications/`,
              {
                endpoint: endPoint,
                key,
                auth: authSecret,
                gpu: gpuTier.gpu,
                operating_system: `${info.os} ${info.osVersion}`,
                device: info.mobile ? 'mobile' : 'desktop',
                browser: `${info.browser} ${info.browserMajorVersion}`,
                operating_system_architecture: info.arch,
              },
              config
            );
          }
        }
      })
      .then(function (res) {
        displayConfirmNotification();
      })
      .catch(function (err) {
        console.log(err);
      });
  }

Answer 1

我刚刚设法让它工作... 只是我还没有为生产模式注册服务人员...... 我在开发的时候写过下面的代码，但是后来我转到生产的时候就忘记了。

navigator.serviceWorker.register(`/sw.js`)

navigator.serviceWorker.ready 承诺不会在生产推送通知上得到解决...实际上代码正在开发中

navigator.serviceWorker.ready promise not getting resolved on push notifications on Production... Actually the code is working on development

javascript

push-notification

progressive-web-apps

service-worker

web-push