Configure the sw-precache WebPack plugin to load a

Question

consider the following scenario:

My express server dynamically generates HTML for the "/" route of my single page application.

I would like to re-serve this same generated HTML as the service worker navigateFallback when the user is offline.

I'm using https://www.npmjs.com/package/sw-precache-webpack-plugin in my webpack configuration.

If I generate an index.html via html-webpack-plugin, say, and set index.html as my navigateFallback file, that generated file gets served correctly by the service worker.

However, I can see no way to cause the on-the-fly rendered index html (what the live server returns for the "/" path) to be cached and used as the offline html.

Answer 1

Use dynamicUrlToDependencies option of Service Worker Precache to cache your route url and its dependencies. Then set navigateFallback to '/' and navigateFallbackWhitelist to a regex matching your sublinks logic.

Take this configuration : (Add const glob = require('glob') atop of your webpack config)

new SWPrecacheWebpackPlugin({
    cacheId: 'my-project',
    filename: 'offline.js',
    maximumFileSizeToCacheInBytes: 4194304,
    dynamicUrlToDependencies: {
      '/': [
        ...glob.sync(`[name].js`),
        ...glob.sync(`[name].css`)
      ]
    },
    navigateFallback: '/',
    navigateFallbackWhitelist: [/^\/page\//],
    staticFileGlobsIgnorePatterns: [/\.map$/],
    minify: false, //set to "true" when going on production
    runtimeCaching: [{
      urlPattern: /^http:\/\/localhost:2000\/api/,
      // Use network first and cache as a fallback
      handler: 'networkFirst'
    }],
})

Answer 2

That use case should be supported. I have an example of something similar using the underlying sw-precache library, and I believe the syntax should be equivalent when using the Webpack wrapper.

In this case, /shell is the URL used for dynamically generated content from the server, constituting the App Shell, but it sounds like your use case is similar, with / instead of /shell.

{
  // Define the dependencies for the server-rendered /shell URL,
  // so that it's kept up to date.
  dynamicUrlToDependencies: {
    '/shell': [
      ...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`),
      ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`),
      `${SRC_DIR}/views/index.handlebars`
    ]
  },

  // Brute force server worker routing:
  // Tell the service worker to use /shell for all navigations.
  // E.g. A request for /guides/12345 will be fulfilled with /shell
  navigateFallback: '/shell',

  // Other config goes here...
}