[GenerateSW] Destination paths setup

Hello,

I have configured a SSR React Application where I’m trying to use a service worker using the webpack plugin. My desired output structure would be something like:

├── assets
│   ├── fonts
│   ├── js
│   ├── precache-manifest.dabf9f8d50f363cf5fd594a1b09ac74a.js
│   └── service-worker.js
└── server
    ├── app.js
    └── index.ejs

But my problem is that there is no independency between swDest and importsDirectory properties. So when I configure the plugin with both, the service-worker does not work.

    new GenerateSW({
      swDest: 'assets/service-worker.js',
      importsDirectory: 'assets',
      runtimeCaching: [...],
    }),

If I use that pattern, I achieve my goal and I have my desired output but the problem is the natural behaviour of service worker, because when I register it the service-worker.js file has an import like this importScripts("assets/precache-manifest.dabf9f8d50f363cf5fd594a1b09ac74a.js"); So once the service worker is loaded in my webpage, it requires for the precache manifest following the same domain pattern, because I want to load it like:

  if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
          navigator.serviceWorker.register('assets/service-worker.js');
      });
  }

Then, it tries to request the file adding an extra asset part in the url http://localhost:8080/assets/assets/precache-manifest.dabf9f8d50f363cf5fd594a1b09ac74a.js

Knowing that I need to maintain that’s structure because of architecture limitation, is there anything I can add to the webpack setup for solving the problem?

Kind regards.

[laisgomes]

Hey, @diemate i have de same architecture of and need of the same solution for this, because without this importScripts() no work. Anyone have any ideia for resolve this for help us please share or even to dribble it this?

Thank’s so much!

[jeffposnick]

In general, serving your service-worker.js file from inside of an assets/ subpath is not going to work—as per the service worker specification, you need to serve your service-worker.js file from your top-level path if you want its scope to include everything on your site. (If you serve it from assets/, then the maximum scope is also going to be assets/, meaning it can’t control any of your pages that exist outside of assets/.)

There’s more info about this at https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope

You should use swDest: 'service-worker.js', I believe, given your setup.

I’m going to close this for now, given those restrictions imposed by the service worker specification, but let me know if that doesn’t solve the issue to your satisfaction and we can revisit.