Path to appcache/sw.js about offline-plugin

[NekR]

Oh, there seems be a lot of typos in my previous comments. Just fixed them.

Maybe relativePaths should be ignored if there's a publicPath provided (as it can only be intentional since there's no default value) but really, that one is on me :)

Yeah, it was this way in v2 when publicPath was called scope (don't ask why :-)) and I changed behavior in v3, also no idea why, it just happened.

I too think that it makes sense to revert to v2 behavior for relativePaths and publicPath, but I can do it only for v4 because I don't want break people who uses v3. Semver, etc.

[NekR]

As in webpack itself, publicPath isn't related to files output place, there is separate option for that. This plugin has such options too:

ServiceWorker

output: string. Relative (from the webpack's config output.path) output path for emitted script.
Default: 'sw.js'.

AppCache

directory: string. Relative (from the webpack's config output.path) output directly path for the AppCache emmited files.
Default: 'appcache/'.

Example:

new OfflinePlugin({
  ServiceWorker: {
    output: 'something/sw.js'
  },
  AppCache: {
    directory: 'something/appcache'
  }
});

But, to control whole website with SW, it has to be in the root of your website.

[zhouzi]

Yes, I have actually configured AppCache.directory to move it one level up (/assets/appcache instead of /assets/js/appcache). But I can't get the runtime script to load the manifest from /assets/appcache instead of just /appcache. I guess I'll just move it to the root, along with sw.js.

Thank you for your time! 👍

[NekR]

@zhouzi what do you mean cannot? runtime.install() doesn't load it from assets/appcache?

[NekR]

It works for me with any custom URL:

[zhouzi]

That is exactly what I am looking for, what's your configuration? Here's a little reproduction of mine:

var OfflinePlugin = require('offline-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new OfflinePlugin({
      publicPath: '/dist/',
      ServiceWorker: null
    })
  ]
};

Which end up generating:

/dist
  /appcache
  /bundle.js

But the runtime installation tries to fetch /appcache/manifest.html instead of /dist/appcache/manifest.html. What am I missing?

[NekR]

@zhouzi that's weird, it has to work. Just tried setting publicPath and it worked for me too. But I'll check with exact your config a bit later.

This is my config, but not sure if it 'll help you:

new OfflinePlugin({
  caches: {
    main: ['index.html', 'assets/**/main.js', ':rest:'],
    // additional: [':rest:']
  },

  AppCache: {
    caches: [],
    FALLBACK: {
      '/': '/offline/offline.html',
      '/assets/': '/offline/offline-asset',
      '/icons/': '/offline/offline-asset',
    }
  },

  ServiceWorker: {
    events: true
  },

  updateStrategy: 'all',
  version: 'v' + (env.useVersion ? env.version + '_' : '') + (new Date).toLocaleString(),
  relativePaths: false,
  publicPath: '/',
  rewrites: function(asset) {
    if (publicPath && publicPath !== '/' && asset.indexOf('assets/') === 0) {
      return publicPath + asset;
    }

    return asset.replace(/^([\s\S]*?)index.htm(l?)$/, function(match, dir) {
      return dir || '/';
    });
  }
})

[NekR]

@zhouzi btw, do you use latest version from npm, right?

[zhouzi]

I must be missing something, here's what I am trying with:

structure

/dist
  /appcache
    /manifest.appcache
    /manifest.html
  /bundle.js
/index.html
/index.js
/node_modules
/package.json
/webpack.config.js

index.html

<script src="dist/bundle.js"></script>

index.js

var runtime = require('offline-plugin/runtime');
runtime.install();

var msg = 'Hello World';
module.exports = function () {
  return console.log(msg);
};

package.json

{
  "private": true,
  "scripts": {
    "serve": "http-server",
    "build": "webpack"
  },
  "dependencies": {
    "http-server": "^0.9.0",
    "offline-plugin": "3.2.1",
    "webpack": "1.13.1"
  }
}

webpack.config.js

var OfflinePlugin = require('offline-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new OfflinePlugin({
      ServiceWorker: null,
      publicPath: '/dist/'
    })
  ]
};

Run npm run serve, open up the address and there's a 404 not found /appcache/manifest.html which is normal since it's in /dist/appcache/manifest.html.

[NekR]

Have you seen your console when building project? It says about the problem, just set relativePaths to false to make publicPath work.

I am not sure why it's done this way right now, but I suspect there was a reason for that at a time.

var OfflinePlugin = require('offline-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new OfflinePlugin({
      ServiceWorker: null,
      publicPath: '/dist/',
      relativePaths: false
    })
  ]
};

[NekR]

I can change it in v4 if it makes sense, of course.

[zhouzi]

That's totally my fault. There's often so much warnings when building a webpack project that I'm no more reading them. I read the documentation and seen the mention of the incompatibility of publicPath/relativePaths but didn't pay attention to the fact that relativePaths is true by default and therefore disables publicPath. Maybe relativePaths should be ignored if there's a publicPath provided (as it can only be intentional since there's no default value) but really, that one is on me :)

Thanks for your kind support 👍