PWA 在 android 应用关闭时停止接收推送通知

Question

我使用 Service Worker 创建了一个简单的 PWA 应用程序，它在需要时从我的服务器接收推送通知并为用户显示通知。当应用程序在前台运行并且应用程序在后台运行几分钟时，这非常有效，推送通知将按预期接收并显示给用户。但是在后台过了几分钟，或者如果应用程序关闭，PWA 将停止接收这些推送通知。

我目前拥有的：

服务-worker.js

self.addEventListener('push', (e) => {
  let notificationData
  e.waitUntil(
    clients.matchAll({ type: 'window' }).then(function(clientList) {
      const client = clientList && clientList[0]
      if (e.data && client && client.visibilityState !== 'visible') {
        const envelope = e.data.json()
        // Process the notification
        // ...
        e.waitUntil(self.registration.showNotification(data.subject, options))
      }
    })
  )
})

index.js

  async registerPushNotificationToWorker() {
    if ('serviceWorker' in navigator) {
      try {
        const swRegistration = await navigator.serviceWorker.getRegistration()
        let subscription = await swRegistration.pushManager.getSubscription()
        let subscriptionJson
        if (subscription === null) {
          subscriptionJson = await subscribeUser()
        } else {
          subscriptionJson = subscription.toJSON()
        }
        // Save subscriptionJson on server
        // ...
      } catch (e) {
        console.log('Service Worker registration failed: ', e)
      }
    }
  }

  async subscribeUser() {
    if ('serviceWorker' in navigator) {
      const swRegistration = await navigator.serviceWorker.ready
      try {
        const pushSubscription = await swRegistration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey
        })
        return pushSubscription.toJSON()
      } catch (e) {
        console.log('Error', e)
        if (Notification.permission === 'denied') {
          console.warn('Permission for notifications was denied')
        } else {
          console.error('Unable to subscribe to push', e)
        }
      }
    }
    return null
  }

据我了解，即使应用已关闭，android 上的服务人员也应该在收到推送通知时被唤醒。我应该做一个特定的代码来让 service worker 在需要时被唤醒吗？

Answer 1

找到问题了。这里的问题是 service-worker 上的事件监听器正在让客户端验证应用程序是否已经打开，但我假设列表中总会有一个客户端，即使应用程序已关闭。正确的方法应该是这样的：

self.addEventListener('push', (e) => {
  let notificationData
  e.waitUntil(
    clients.matchAll({ type: 'window' }).then(function(clientList) {
      const client = clientList.find(c => c.visibilityState === 'visible') // <- This validation
      if (e.data && !client) {
        const envelope = e.data.json()
        // Process the notification
        // ...
        e.waitUntil(self.registration.showNotification(data.subject, options))
      }
    })
  )
})

PWA 在 android 应用关闭时停止接收推送通知

PWA stop receiving push notification on android app closed

android

push-notification

progressive-web-apps