sw-precache-webpack-plugin webpack service worker default template

Question

I'm using the sw-precache-webpack-plugin to generate a service worker for my project, I can see all my fonts, js and css files in the cache storage but not the index / html file and its not working when i go offline. I also get a 'site cannot be installed: no matching service worker detected.' when i try and add to homepage on the App manifest.

My stack is a universal React + redux app, with Express + ejs for index file. I'm not sure if its because I'm using ejs rather than a default html file, but it doesnt seem to find the file. Is there a way I can specify a template? My sw-precache-webpack-plugin webpack setting is:

new SWPrecacheWebpackPlugin({
 cacheId: 'tester',
 filename: 'my-service-worker.js',
 directoryIndex: '/',
}),

Any advice would be appreciated

Answer 1

You are missing a specification of a caching strategy in the plugin config.

plugins: [
    new SWPrecacheWebpackPlugin({
        cacheId: 'tester',
        filename: 'my-service-worker.js',
        runtimeCaching: [
        {
            urlPattern: '/',
            handler: 'cacheFirst',
        }
        ]
    })
]

Documentation: https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject