workbox-webpack-plugin doesn't respect publicPath

Created on 19 Jul 2017  路  6Comments  路  Source: GoogleChrome/workbox

Library Affected:
workbox-webpack-plugin

Browser & Platform:
Webpack 3.3.0, Node 6.9.1

Issue or Feature Request Description:
The manifest generated by the plugin lists the file names only, not including any public path specified. Ideally, if the file is "vendor.js" and the public path is "dist/", the manifest entry should be for "dist/vendor.js". I'm unable to get the precache working using the plugin because of this; the requests are never picked up by the service worker and they're always brought down from the server.

Just as an example, this is what's currently being generated by the plugin for me:

workboxSw.precache([
  {
    "url": "app.css",
    "revision": "7c6c1b5bc61102d9cdb3a3a64da0631f"
  },
  {
    "url": "app.js",
    "revision": "c49639a282ff7fc2b163f17fe7c8dd5a"
  },
  {
    "url": "immediate.css",
    "revision": "77fc2e53176fd54a733738ea9521c87c"
  },
  {
    "url": "styles.css",
    "revision": "11c6be3e42073db7cefae03c5b1cecf5"
  },
  {
    "url": "vendor.js",
    "revision": "52dd3b366cf368edc9be68234514dc5d"
  },
  {
    "url": "workbox-sw.js",
    "revision": "df86dfc69c6d017722ecb8a16d34c849"
  }
]);

And this is what I'd expect (and does work as expected):

workboxSw.precache([
  {
    "url": "dist/app.css",
    "revision": "7c6c1b5bc61102d9cdb3a3a64da0631f"
  },
  {
    "url": "dist/app.js",
    "revision": "c49639a282ff7fc2b163f17fe7c8dd5a"
  },
  {
    "url": "dist/immediate.css",
    "revision": "77fc2e53176fd54a733738ea9521c87c"
  },
  {
    "url": "dist/styles.css",
    "revision": "11c6be3e42073db7cefae03c5b1cecf5"
  },
  {
    "url": "dist/vendor.js",
    "revision": "52dd3b366cf368edc9be68234514dc5d"
  },
  {
    "url": "dist/workbox-sw.js",
    "revision": "df86dfc69c6d017722ecb8a16d34c849"
  }
]);

Most helpful comment

I'm assuming there's some way of checking whether a given URL is in the list of URLs which Webpack manages, and you'd want to only prepend the publicPath value for those.

Yes there is. I'll bake this as a feature request soon.

All 6 comments

Thanks for the feedback.
A quick fix would be adding modifyUrlPrefix key in your plugins options

e.g.

new WorkboxWebpackPlugin({
  . //your options
  .
  .
  modifyUrlPrefix: {
    '/': '/public/'
  },
})

Ohhh, didn't even know that was a thing. No reference to it in the documentation. That does do what I need, though. thanks!

Update: just noticed something that'd cause headaches with your suggestion. If I use templatedUrls, then those get the url prefix as well, which doesn't exactly work. As a workaround for the workaround, though, I can just set up a separate precache section in my service worker for the dynamic urls

@gauntface @jeffposnick do we have a way where modifyUrlPrefix does not apply to template URLs?

This should be doable with the new manifestTransforms functionality.

When you call one of workbox-build's methods, you can pass in:

manifestTrasnforms: [
  (manifestEntries) => manifestEntries.map((entry) => {
    if (entry.url in <some list of Webpack-managed URLs>) {
      entry.url = <publicPathVariable> + entry.url;
    }
    return entry;
  })
],

I'm assuming there's some way of checking whether a given URL is in the list of URLs which Webpack manages, and you'd want to only prepend the publicPath value for those. Alternatively, you could try an opposite approach, where you check to see if a URL is in templatedUrls and prepend publicPath only if that's not true.

I'm assuming there's some way of checking whether a given URL is in the list of URLs which Webpack manages, and you'd want to only prepend the publicPath value for those.

Yes there is. I'll bake this as a feature request soon.

Was this page helpful?
0 / 5 - 0 ratings