push-notification - 服务工作者中未触发推送事件

Question

按照本教程直到“处理推送事件”部分在我的应用程序中设置桌面通知系统，我遇到了一个问题：

当我单击“推送”以使用 Chrome 人为推送通知时，不会出现任何通知。控制台中没有消息。

我允许来自网站的通知，并且服务人员已很好地安装在我的浏览器中。

我的服务人员看起来像这样：

self.addEventListener('push', function (event) {
  console.log('[Service Worker] Push Received.')
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`)

  const title = 'My App Name'
  const options = {
    body: event.data.text(),
    icon: 'pwa/icon.png',
    badge: 'pwa/badge.png'
  }

  const notificationPromise = self.registration.showNotification(title, options)
  event.waitUntil(notificationPromise)
})

我的服务工作者注册（使用register-service-worker npm 包）如下所示：

import { register } from 'register-service-worker'

const applicationServerPublicKey = 'BI5qCj0NdNvjDcBYTIXiNccdcP74Egtb3WxuaXrHIVCLdM-MwqPkLplHozlMsM3ioINQ6S_HAexCM0UqKMvaYmg'

function urlB64ToUint8Array (base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4)
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/')

  const rawData = window.atob(base64)
  const outputArray = new Uint8Array(rawData.length)

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i)
  }
  return outputArray
}

async function manageNotificationSubscription (registration) {
  const subscription = await registration.pushManager.getSubscription()
  let isSubscribed: boolean = !(subscription === null)

  if (isSubscribed) {
    console.log('User IS subscribed.')
  } else {
    console.log('User is NOT subscribed.')
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey)
    try {
      await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: applicationServerKey
      })
      console.log('User just subscribed.')
    } catch (e) {
      console.error('Failed to subscribe the user: ', e)
    }
  }
}

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.'
      )
    },
    async registered (registration) {
      console.log('Service worker has been registered.')
      await manageNotificationSubscription(registration)
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

看起来服务工作者中的推送事件甚至没有被触发......我做错了什么吗？

标签： push-notificationservice-worker