Workbox能否协助将分页接口数据拆解后存入缓存？

Absolutely! Workbox gives you the flexibility to intercept paginated API responses, extract individual blog posts, and cache them under their respective single-post endpoints (like /api/post/13). Here's how to implement this smoothly:

Step 1: Intercept Paginated Requests & Cache Individual Posts #

First, we'll set up a route to catch both of your paginated blog request formats (/api/blogs?from=*&to=* and /api/blogs/page/*). When these requests return a response, we'll parse the list of posts, create individual responses for each entry, and store them in a dedicated cache.

import { registerRoute } from 'workbox-routing';

// Handle paginated blog requests and cache individual posts
registerRoute(
  // Match both paginated URL patterns
  ({ url }) => {
    const isBlogEndpoint = url.pathname.startsWith('/api/blogs');
    const hasPagination = url.searchParams.has('from') || url.pathname.includes('/page/');
    return isBlogEndpoint && hasPagination;
  },
  async ({ event }) => {
    // Fetch the original paginated response
    const networkResponse = await fetch(event.request);
    // Clone the response—response bodies can only be read once, so cloning lets us reuse the data
    const clonedResponse = networkResponse.clone();
    
    try {
      // Parse the JSON list of blog posts
      const blogPosts = await clonedResponse.json();
      // Open a cache specifically for individual blog posts
      const postCache = await caches.open('individual-blog-posts');

      // Loop through each post and cache it under its single-post URL
      for (const post of blogPosts) {
        const postUrl = new URL(`/api/post/${post.id}`, self.location.origin);
        // Create a valid response object for the individual post
        const postResponse = new Response(JSON.stringify(post), {
          headers: { 'Content-Type': 'application/json' },
        });
        // Store the post in the cache
        await postCache.put(postUrl, postResponse);
      }
    } catch (err) {
      // Gracefully handle parsing errors—don't break the original response flow
      console.error('Failed to parse and cache paginated posts:', err);
    }

    // Return the original paginated response to the page as normal
    return networkResponse;
  },
  'GET'
);

Step 2: Serve Individual Posts from Cache #

Next, set up a route to handle requests for single posts (like /api/post/13). We'll use a CacheFirst strategy here to prioritize cached content for faster load times, falling back to the network only if the post isn't cached yet.

import { CacheFirst } from 'workbox-strategies';

// Serve individual blog posts from cache first
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/post/'),
  new CacheFirst({
    cacheName: 'individual-blog-posts',
    // Optional: Add plugins to manage cache lifespan or size
    // plugins: [
    //   new ExpirationPlugin({
    //     maxAgeSeconds: 7 * 24 * 60 * 60, // Cache posts for 1 week
    //     maxEntries: 100, // Limit cache to 100 posts to save space
    //   }),
    // ],
  }),
  'GET'
);

Key Notes & Optimizations #

• Response Cloning: Never skip cloning the original response—response streams are consumed once, so cloning ensures we can still return the full paginated data to the page while processing individual posts.
• Structure Consistency: Double-check that post objects from your paginated endpoint match the structure returned by /api/post/:id. This ensures your frontend can use cached posts interchangeably with network-fetched ones without issues.
• Duplicate Handling: If your pagination overlaps (e.g., page 1 and page 2 share some posts), cache.put() will overwrite existing entries with the latest data—this is usually desired for freshness, but you can add a check if you want to avoid unnecessary updates.
• Error Safety: The try/catch block ensures that even if parsing fails (e.g., malformed JSON), the original paginated response still reaches the page, so your app doesn't break.

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