Search code examples
javascriptreactjscachingservice-workerworkbox

ServiceWorker Offline - No classNames in HTML

I've been trying to implement caching in my React 16 project, using Workbox. It seems to be caching something, as the page is still being rendered in offline mode. But I can't seem to figure out, why my cached version doesn't contain any classNames on the elements.

Normal version: example with internet connection

Cached Version Cached version of website

Also, the prefetching seems to work correctly too: prefetching tab

I've implemented Workbox through Webpack with the following code block:

new workboxPlugin({
  globDirectory: 'build/client',
  globPatterns: ['**/*.{html,js,css,png,jpeg}'],
  swDest: './build/client/sw.js',
}),

What could be the cause of this? Images are also not being loaded, even though the should be cached too.

EDIT:

It seems like the .js files are not being loaded. The main & vendor .js files contain the content required to assign classNames.

.js files can't be found

As you can see, the .js files can't be found. This is in a preload, but removing them just transfers the error to the <script /> including the files. Also the location of the service worker registration doesn't seem to matter.

Side note: My classnames are generated by using import styles from './index.scss' => <div className={styles.container} />

Solution

  • It seems like my SSR (server.webpack.config) failed on the CSS loading. I had to modify my server config to match the client config regarding the css loader.

    Because I didn't have this at first, it would read the scss files as a normal txt files, which he couldn't recognize, and therefor couldn't use the styles.container method.

    Putting in proper loaders for the scss files fixed the problem.