自定义ServiceWorker中接收推送后分发Redux Action的问题求助

Great question! Since Service Workers run in a separate, isolated context from your main app thread, they can't directly import or access your Redux store. The solution here is to bridge the communication between the Service Worker and your main app, so the main thread (which has access to the store) can dispatch the Redux action on behalf of the Service Worker.

Here are two reliable approaches to make this work:

Approach 1: Use postMessage to Communicate with the Main Thread #

This is the most common method—your Service Worker sends a message to all open app clients, and the main thread listens for this message to dispatch the Redux action.

Step 1: Update your Service Worker's Push Listener #

Modify your push event handler to send a message to active app clients, or show a notification if no clients are open:

self.addEventListener('push', (event) => {
  const payload = event.data?.json() || {};

  event.waitUntil(
    // Get all open window clients controlled by this Service Worker
    self.clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then((clients) => {
        if (clients.length > 0) {
          // Send the push data to every open app tab
          clients.forEach(client => {
            client.postMessage({
              type: 'PUSH_NOTIFICATION_RECEIVED',
              data: payload
            });
          });
        } else {
          // No open tabs? Show a notification for the user to interact with
          return self.registration.showNotification(payload.title, {
            body: payload.body,
            icon: '/icons/icon-192x192.png',
            data: payload // Store payload for later use when notification is clicked
          });
        }
      })
  );
});

Step 2: Add a notificationclick Handler (For Offline/Closed Tabs) #

If the user clicks the notification when no app tabs are open, open the app and send the message then:

self.addEventListener('notificationclick', (event) => {
  event.notification.close();

  event.waitUntil(
    self.clients.openWindow('/') // Open your app's root URL
      .then((client) => {
        if (client) {
          client.postMessage({
            type: 'PUSH_NOTIFICATION_RECEIVED',
            data: event.notification.data
          });
        }
      })
  );
});

Step 3: Listen for Messages in Your Main App #

In your main app (where you have access to the Redux store), add a listener for messages from the Service Worker:

// Assuming you have your Redux store initialized as `store`
if ('serviceWorker' in navigator) {
  // Listen for messages from the Service Worker
  navigator.serviceWorker.addEventListener('message', (event) => {
    if (event.data.type === 'PUSH_NOTIFICATION_RECEIVED') {
      // Dispatch your Redux action here
      store.dispatch({
        type: 'PROCESS_PUSH_NOTIFICATION',
        payload: event.data.data
      });
    }
  });

  // Ensure the Service Worker is registered (you might already have this code)
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered:', registration);
    });
}

Approach 2: Use the Broadcast Channel API #

If you need to communicate across multiple tabs or contexts easily, the Broadcast Channel API is a cleaner alternative to manually iterating over clients.

Step 1: Update the Service Worker #

Create a broadcast channel and send the push data through it:

// Create a named broadcast channel
const pushChannel = new BroadcastChannel('push-notifications');

self.addEventListener('push', (event) => {
  const payload = event.data?.json() || {};
  
  // Broadcast the message to all listeners
  pushChannel.postMessage({
    type: 'PUSH_NOTIFICATION_RECEIVED',
    data: payload
  });

  // Fallback to notification if needed
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      data: payload
    })
  );
});

Step 2: Listen for Broadcasts in the Main App #

In your main app, listen to the same broadcast channel and dispatch the Redux action:

const pushChannel = new BroadcastChannel('push-notifications');

pushChannel.addEventListener('message', (event) => {
  if (event.data.type === 'PUSH_NOTIFICATION_RECEIVED') {
    store.dispatch({
      type: 'PROCESS_PUSH_NOTIFICATION',
      payload: event.data.data
    });
  }
});

Key Notes #

• Service Worker Scope: Ensure your Service Worker is registered with a scope that covers your entire app (the default / should work if it's in the public directory).
• Client Control: The Service Worker can only communicate with clients it actively controls—make sure your app has registered and activated the Service Worker before expecting messages.
• Payload Validation: Always validate the incoming payload data in both the Service Worker and main thread to avoid errors.

内容的提问来源于stack exchange，提问作者Harshit Agarwal