Some files missing in cache on SW first load/install

Hi,

We are currently using Offline-Plugin with react-boilerplate in order to cache JS files on client side and allow offline website access. As described in install section of the documentation, we put OfflinePluginRuntime.install into a JS file which is required in the app.js (entrypoint of the application).

When accessing the website for the first time, SW successfully installed and all main resources downloaded during its installation are cached (ex : images). However, it seems that all optional ressources requested at the same time as SW installation are not cached. The only way to cache these files (ex : main chunk js which is the entrypoint) is to reload the page after SW have been installed on first load.

Are we doing something wrong ? Is this a normal behavior ? Is SW installed too late ? What can we do to cache these files after first SW installation ?

In your documentation you wrote this :

caches: {
  main: [':rest:'],
  additional: [':externals:'],
  optional: ['*.chunk.js']
}

However entrypoint 'main' which contains the offline plugin installation match the chunk pattern.

Here is our OfflinePlugin Webpack conf :

    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      externals: ['/config.js'],

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      // No need to cache map files as they are removed post-build from final dist
      excludes: ['.htaccess', '*.map'],

      // Auto update frontend every 2 minutes
      autoUpdate: 1000 * 60 * 2,

      caches: {
        main: [':rest:'],

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: [':externals:'],
        optional: ['*.chunk.js'],
      },

      ServiceWorker: {
        events: true,
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,
    }),

Thanks in advance for your answer. Yours faithfully, LCDP

EDIT : As the problem described here may be the normal behavior. Optionals is what it means.... Having main chunk matching this pattern is not a good idea. We workaround this by giving a more precise regexp pattern : optional: [/\d+\.\w+\.chunk\.js/],

I have the exact same problem. I'm also using react-boilerplate. When accessing the website for the first time, all assets are cached successfully. But parts of the website is not functioning as expected (without any error in the console), until I refresh the page. The thing is that I get random behaviors. Sometimes it works perfectly, and the other times not so perfect, with no errors whatsoever.

My offline-plugin configurations

    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,

      // these configs were added because of "check for update" functionality
      updateStrategy: 'changed',
      autoUpdate: 1000 * 60 * 15,
      ServiceWorker: {
        events: true,
        navigateFallbackURL: '/',
      },
    })

offline-plugin: 5.0.6

NekR / offline-plugin

Some files missing in cache on SW first load/install #484