Create React App PWA service worker 中缓存大小限制的解决方法

Question

I'm developing a PWA starting from a blank CRA template. The application needs to fully work offline after the installation, so I'm exploiting Workbox's methods to precache all static content.

Unfortunately I have severals contents between 5 and 10 MB (audio files) and in the Create React App Service Worker the limit is set to 5MB (previosly 2MB - see here ).

Those files are not precached and indeed i get warnings during the build process: /static/media/song.10e30995.mp3 is 5.7 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit. /static/media/song.10e30995.mp3 is 5.7 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit. .

Pity that maximumFileSizeToCacheInBytes seems not to be configurable in CRA SW :(

I cannot decrese the files size because of audio quality requirements.

I also wrote a custom SW logic to precache external resources from the internet and I thought of adding the audio files there. but the React build process adds an hashcode to the filenames based on their content, so I would need to change the SW code every time I update the audio content, and that's not ideal.

So my questions are:

• is there any way to force the maximumFileSizeToCacheInBytes limit to a custom value, within a CRA application?
• I was thinking of trying to get the hashcodes after the build process and automatically update the SW code, but is not very convincing to me.
• is there any other solution or method to achieve what I need?

Here's my SW code (the default CRA code + my custom logic at the end)

import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

import packageJson from '../package.json';


clientsClaim();

// Precache all of the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,
// even if you decide not to use precaching. See https://cra.link/PWA
precacheAndRoute(self.__WB_MANIFEST);

// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  // Return false to exempt requests from being fulfilled by index.html.
  ({ request, url }) => {
    // If this isn't a navigation, skip.
    if (request.mode !== 'navigate') {
      return false;
    } // If this is a URL that starts with /_, skip.

    if (url.pathname.startsWith('/_')) {
      return false;
    } // If this looks like a URL for a resource, because it contains // a file extension, skip.

    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    } // Return true to signal that we want to use the handler.

    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

// An example runtime caching route for requests that aren't handled by the
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

// Any other custom service worker logic can go here.
const CUSTOM_PRECACHE_NAME = `custom-precache-v${packageJson.version}`;

const CUSTOM_PRECACHE_URLS = [
 // ... external resources URLs here
];

self.addEventListener('install', event => {
  const now = new Date();
  console.log(`PWA Service Worker adding ${CUSTOM_PRECACHE_NAME} - :: ${now} ::`);
  event.waitUntil(caches.open(CUSTOM_PRECACHE_NAME)
    .then(cache => {
      return cache.addAll(CUSTOM_PRECACHE_URLS)
        .then(() => {
          self.skipWaiting();
        });
    }));
});

// The fetch handler serves responses for same-origin resources from a cache.
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(resp => {

        // @link https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if
        if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
          return;
        }

        return resp || fetch(event.request)
          .then(response => {
            return caches.open(CUSTOM_PRECACHE_NAME)
              .then(cache => {
                cache.put(event.request, response.clone());
                return response;
              });
          });
      })
  );
});

I hope I made myself clear.

Thanks in advance, Francesco

Answer 1

After some research I found two solutions:

• eject from CRA
• use a tool to override the configuration

The first solution is often discouraged because after that you'd need to manage all the configurations yourself. Here's some reads about it:

• Official docs
• Don't eject your Create React App
• L'ineluttabile React Eject (italian)

So, as suggested in those articles, I took a look to the available tools. I found:

• react-app-rewired
• customize-cra
• craco

Long story short, I could NOT make it work with the first two, but I did with craco . I had to customize a plugin to achieve what I needed, but I finally made it.

In particular I forked this package - craco-workbox - adding the possibility to override also the InjectManifest config, where the maximumFileSizeToCacheInBytes is.

This way i raised the limit to 25MB and it works like a charm ;)

If anyone needs this:

• Here's my fork of the plugin
• Here's the PR to the official repo

UPDATE My PR has been merged so now the feature is available and released in craco-workbox plugin under version v0.2.0

Answer 2

It should work with react-app-rewired to override the webpack configs, especially if you upgrade to latest react-scripts that uses webpack 5 you will need others as well. Here's my config override

const webpack = require('webpack');
const WorkBoxPlugin = require('workbox-webpack-plugin');
module.exports = {
  webpack: (config, env) => {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
      assert: require.resolve('assert/'),
      buffer: require.resolve('buffer'),
      path: require.resolve('path-browserify'),
      process: require.resolve("process/browser"),
      stream: require.resolve('stream-browserify'),
      crypto: require.resolve('crypto-browserify'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      fs: false,
      tls: false,
      net: false,
      os: require.resolve('os-browserify/browser'),
      util: require.resolve('util/'),
      zlib: require.resolve('browserify-zlib'),
    });
    config.resolve.fallback = fallback;

    config.plugins.forEach(plugin => {
      if ( plugin instanceof WorkBoxPlugin.InjectManifest) {
        plugin.config.maximumFileSizeToCacheInBytes = 50*1024*1024;
      }
    });

    config.plugins = [
      ...config.plugins,
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser',
      }),
    ];

    config.module.rules.push(
      {
        test: /\.(js|mjs|jsx)$/,
        enforce: 'pre',
        loader: require.resolve('source-map-loader'),
        resolve: {
          fullySpecified: false,
        },
      }
    );
    config.ignoreWarnings = [/Failed to parse source map/];  // gets rid of a billion source map warnings
    return config;
  },
};