Question

我在create-react-app应用程序中无法设置推送通知。看来我订阅推送管理器的电话没有做任何事情（或根本没有被调用）。该应用程序从未设法获得许可以发出通知。

由于我在CRA中，因此按照说明here

将此行添加到webpack.config.proj.js

new SWPrecacheWebpackPlugin({
    ...
    importScripts: [publicUrl + ‘/custom-service-worker.js’],
    ...
}),

我的index.js的相关部分看起来像这样

navigator.serviceWorker.register('custom-service-worker.js').then(() => {
  console.log("Service worker registered");
});

navigator.serviceWorker.ready
.then(function(registration) {
  console.log(Object.keys(registration));

  return registration.pushManager.getSubscription();
}).then(function(subscription) {
  if (subscription) {
    console.log('Already subscribed', subscription.endpoint);
  } else {
    subscribe();
  }
});

function subscribe() {
  navigator.serviceWorker.ready
  .then(async function(registration) {
    // Get the server's public key
    const response = await fetch(`${serverAddress}/vapid_public_key`);
    const responsetext = await response.text();
    const vapidPublicKey = JSON.parse(responsetext).msg;
    console.log(vapidPublicKey);
    // Chrome doesn't accept the base64-encoded (string) vapidPublicKey yet
    // urlBase64ToUint8Array() is defined in /tools.js
    const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
    // Subscribe the user
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: convertedVapidKey
    });
  }).then(function(subscription) {
    console.log('Subscribed', subscription.endpoint);
    return fetch(`${serverAddress}/register_subscriber`, {
      method: 'post',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({
        subscription: subscription
      })
    });
  });
}

运行我的应用程序时，第二console.log秒中的.then永远不会运行。使用调试器单步执行代码还显示registration.pushManager.subscribe函数永远不会完成或永远不会被调用。

服务人员已注册，公钥已获取并进行了很好的转换。但是我的应用程序不会产生对推送管理器的订阅。任何人都有使它起作用的提示吗？

CRA无法订阅推送管理器

0 个答案: