By default offline-plugin uses relativePaths. In your case, you have to turn them off, like this:

new OfflinePlugin({
  relativePaths: false,
  publicPath: '/'
})

Hope it helps. Let me know if have any other problems with it. Thanks.

Thanks @NekR It's work perfectly. I turn off relativePaths but forgot to mention relativePath :)

@pyadav yeah, it's a bit weird right, could be better :-)

I saw changelog that it's set to true by default in v3.0.0
I was wonderting does it has any benefits on this?
Because enable this realtivePaths, it create this bug and confuse newbie like me a little bit :)

relativePaths being true by default is fine because it's most universal setting. Without it, you always will have to set publicPath, but I want the plugin to work without any params, e.g. this new OfflinePlugin().

However, there is a design mistake related to combination of publicPath and relativePaths. Obviously, setting publicPath should disable relativePaths (e.g. set it to false). But by some reason in was done in an other way and now you have to explicitly disable relativePaths when you use publicPath. Of course, this is a bug. But unfortunately I cannot fix it in v3 because it's breaking change and I'm trying to follow semver here.

Bug with relation of relativePaths and publicPath is fixed in v4. relativePaths is still true by default and publicPath is null. Once publicPath is set to any string either in OfflinePlugin options or in webpack.config.output.publicPath, then relativePaths is automatically turned off (set to false). I hope this behavior is better one.

If you are interested, you can try v4 by installing it with this command:

npm install offline-plugin@next

Hope this helps :-)

Just got this issue on 4.7
publicPath is set in my webpack config:

output: {
  publicPath: 'dist/',
},

dist/ is a relative path, set it to absolute.

@NekR I have added the code you recommend, but it still not working. What should I do?

The error info:

@NekR I'm also having the same problem with v4.8.3. My web app runs inside a folder in production: http://website.tld/appName/...

This is my config:

new OfflinePlugin({
        relativePaths: false,
        publicPath: options.isProduction ? `/${appName}` : '/',
        caches: {
          main: [
            'app.*.css',
            'vendor.*.js',
            'app.*.js',
            'manifest.*.js'
          ],
          additional: [
            ':externals:'
          ],
          optional: [
            ':rest:'
          ]
        },
        externals: [
          options.isProduction ? `/${appName}` : '/'
        ],
        ServiceWorker: {
          navigateFallbackURL: options.isProduction ? `/${appName}` : '/'
        },
        AppCache: {
          FALLBACK: {
            '/': '/offline-page.html'
          }
        }
      })

Your service worker script should have JavaScript mime type and your appcache file should have its own manifest mime type. In your case they both have html's mime type. I van read that in console.

Sorry, I don't get it :-( In the setup, faqs or troubleshooting sections I don't see anything about mime types. Could you explain further what do I need to do? AFAIK, I don't have a service worker script. All I'm doing is loading the NPM package ???? Same thing for the appcache file.

Sorry, but I'm not going to teach web development here.

Right, the issue I'm having with the mime types and the appcache not loading is that all the files (sw.js and the appCache folder) are being created in my webpack output path: dist/, but I need them to be inside dist/appName.

I've tried using scope: 'dist/appName' or outputPath: 'dist/appName' or output: 'dist/appName' in the options but they are always being generated inside dist/.

This is what fixed it for me:

ServiceWorker: {
          output: `${appName}/sw.js`,
          navigateFallbackURL: `/${appName}`
        },
        AppCache: {
          directory: `${appName}/appcache`,
          FALLBACK: {
            '/': '/offline-page.html'
          }
        }

I fix the issue when I set the public path in webpack.config.output rather than in OfflinePlugin, but don't know why.

@yelynn2015 you need it in webpack config, otherwise webpack itself won't work. offline-plugin options are just override, by default it takes what you specify in webpack config.

Thank you! @NekR