如何在ReactJS中通过Service Worker实现API调用后台同步

Hey Darshan, let's get this Service Worker-powered background API call sorted out for you—here's a step-by-step breakdown to make it work smoothly:

First: Register the Service Worker in Your React App #

Before the Service Worker can handle any requests, you need to register it in your app. Add this code to your index.js (or a dedicated setup file):

// index.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered successfully:', registration.scope);
      })
      .catch(err => {
        console.error('Service Worker registration failed:', err);
      });
  });
}

Second: Create Your Service Worker Script (sw.js) #

This file will handle the actual background API call. We'll set up a message listener so your React component can trigger the request, then send the response back once the fetch completes:

// sw.js
self.addEventListener('message', async (event) => {
  if (event.data.type === 'FETCH_CRYPTO_DATA') {
    try {
      const response = await fetch('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD,JPY,EUR');
      if (!response.ok) throw new Error('Request failed');
      const data = await response.json();
      
      // Send the fetched data back to your React component
      event.source.postMessage({
        type: 'CRYPTO_DATA_RESPONSE',
        data: data,
        error: null
      });
    } catch (err) {
      // Send error details if something goes wrong
      event.source.postMessage({
        type: 'CRYPTO_DATA_RESPONSE',
        data: null,
        error: err.message
      });
    }
  }
});

Third: Update Your getResponse Function in React #

Instead of making the fetch directly, your component will send a message to the Service Worker and wait for its response:

getResponse = () => {
  // Check if Service Worker is active and ready
  if (!navigator.serviceWorker.controller) {
    console.error('Service Worker is not active—can’t trigger background fetch');
    return;
  }

  // Send a message to trigger the background API call
  navigator.serviceWorker.controller.postMessage({
    type: 'FETCH_CRYPTO_DATA'
  });

  // Set up a listener to receive the response from the Service Worker
  const messageListener = (event) => {
    if (event.data.type === 'CRYPTO_DATA_RESPONSE') {
      if (event.data.error) {
        console.error('Fetch failed:', event.data.error);
        navigator.serviceWorker.removeEventListener('message', messageListener);
        return;
      }
      
      // Update component state with the received data
      this.setState({ respo: event.data.data });
      console.log('Data from Service Worker:', event.data.data);
      
      // Clean up the listener once we get the response
      navigator.serviceWorker.removeEventListener('message', messageListener);
    }
  };

  navigator.serviceWorker.addEventListener('message', messageListener);
};

Quick Tips to Avoid Hiccups #

• HTTPS Requirement: Service Workers only work over HTTPS (except localhost, which is allowed for development).
• Service Worker Updates: After modifying sw.js, you may need to refresh your app twice or use Chrome DevTools' Application tab to unregister old Service Workers and register the new one.
• Background Sync (Optional): If you need the request to complete even if the user closes the tab, look into the Background Sync API (it’s a bit more advanced but perfect for offline-first use cases).

内容的提问来源于stack exchange，提问作者Darshan KR