respect publicPath about offline-plugin

[NekR]

The scope should do exactly what you want, however, I agree that having it as a separate settings might not be always good and that it may introduce some confusing like here. I am going to mark this for v2, but in mean time, this should work:

// webpack.config.js

module.exports = {
  output: {
    publicPath: '/myApp/'
  },
  plugins: [
   new OfflinePlugin({
     scope: '/myApp/'
   })
  ]
};

Also it should support __webpack_public_path__ in future, I think.

[NekR]

Hi @Pajn,

Yes, offline-plugin does not uses publicPath option from webpack config, however, it has scope option which allows to specify scope for both AppCache and ServiceWorker. Key difference here is that publicPath could be an absolute URL prefix, e.g. http://example.com/test/, but offline-plugin needs only path part from the URL for the scope. It of course can use publicPath in some way, but scope should work at the moment.

P.S. I do not see publicPath in your code here https://github.com/Pajn/Culinam/blob/master/webpack.config.js, so you probably can just specify scope for offline-plugin. Your scope at the moment is /, just change it to what ever you want. If this doesn't work for you, then it's really a bug.

P.S.2. Or you mean runtime global variable __webpack_public_path__?

[NekR]

@Pajn Does it works for you?

[Pajn]

It seemed to me that the path it installs from did not update with scope but I will need to check again

[Pajn]

Sorry for not getting to this earlier. Scope does work as I wanted, don't know why I dismissed it earlier.
Personally I have no need for publicPath support, just that I misunderstood scope.
Thank you for this great plugin!

[NekR]

@Pajn Great! You are welcome.

Anyway, it seems to be a good idea to support publicPath. Not so important, but possible.

[AsaAyers]

I have an app that, in different environments/configurations might mount under different URLs. Webpack just builds a folder and I can drop that folder into the root of my webserver, or under /beta/, or whatever is needed. I'd really like to see support for __webpack_public_path__ because scope isn't know by webpack at compile time.

[NekR]

@AsaAyers Yes, this will be very useful.

One thing here is that we cannot have dynamic public path for AppCache, so it will be done then only for ServiceWorker and only when AppCache is disabled (for consistency). Probably should be fine to have anyway.

[NekR]

Hmm, might be possible for AppCache too with this way:

For path /public/path/appcache/manifest.appcache part /public/path/ will be treated as public path of the app, e.g. in manifest all paths will be generated relatively to it.

[AsaAyers]

I've been looking over the code trying to figure it out and thought "If we didn't have this leading / it would work". Then I figured out that it's coming from the default context of /.

This workaround seems to work for me. Now I have a new set of problems to solve that aren't related to this plugin

        new OfflinePlugin({
            scope: '',
            updateStrategy: 'hash',
            AppCache: false,
        }),

[NekR]

Hey @AsaAyers, I just added relativePaths options to the plugin. Just pass relativePaths: true or scope: '' to the options and plugin will generate relative paths for the files for both ServiceWorker and AppCache.

Can you try it with you case? It's not npm yet since I need to be sure first that it works, so you can install with npm install NekR/offline-plugin.

Thanks!

[NekR]

Okay, so I assume that it's fixed. Feel free to open another issues if it's not.

[amiuhle]

My webpack setup is generated by /generator-react-webpack-redux (example output here).

Basically, index.html is served from /, and webpack generated assets are served from /assets.

When I set scope: /assets, then there's now way to add / to the cache. When I leave scope at / or set it to an ampty string, then sw.js will not be found.

I've tried a lot of different setups but couldn't get it to work. Do you see a way to configure this correctly without supporting publicPath?

[AsaAyers]

From: http://www.html5rocks.com/en/tutorials/service-worker/introduction/

One subtlety with the register method is the location of the service worker file. You'll notice in this case that the service worker file is at the root of the domain. This means that the service worker's scope will be the entire origin. In other words, this service worker will receive fetch events for everything on this domain. If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

[NekR]

First of all, yes, SW has to be in a root, e.g. /sw.js to be able to capture / request (there is other way though, but requires proper server configuration).

@amiuhle what you need, is generate everything relative to your root, e.g. webpack.config.output.path is your root and webpack.config.output.chunkFilename should be something like this assets/[name].js.
With such config, sw.js will be places directly in your webpack.config.output.path and assets will be placed in assets/ subfolder.

If this doesn't work for you, then it would be good to see example of your config so I could suggest fixes to it.

Hope this helps :)

[developdeez]

@amiuhle Did you solve this issue? It's preventing webpack from even including my assests