Service worker using sw-precache, webpack and react

Question

I have some troubles trying to add a cache system with a service working using the sw-precache-webpack-plugin v.0.11.4. My idea is that the people can use the app offline.

My app is in React v.15.5.4 and Node v.6.9.5, but there are some parts in handlebars (old platform that are we are migrating to React), and both live together at this moment. The part that is in React, the html is served by a Node endpoint, and is not the root of the project, for example:

• localhost:3000/this_is_the_part_with_react

The only part that I want to use offline is the part of the project that is done with React. And for this part, I'm using webpack v.2.6.1 to create all the project files:

const OUTPUT_DIR = 'public/assets';
const runtimeCaching = [
  {
     urlPattern: '/some/url/to/cache',
     handler: 'cacheFirst'
  }
];

export default () => ({ 
  entry: {
     'react_part': path.join(__dirname, 'src/example.jsx'),
  },
  output: {
     path: path.join(__dirname, OUTPUT_DIR),
     filename: 'js/[name].js',
  },
  resolve: {
     extensions: ['.js', '.jsx'],
  },
  plugins: [
     new CleanWebpackPlugin([
       OUTPUT_DIR,
     ]),
     new SWPrecacheWebpackPlugin({
       cacheId: 'my-project',
       filename: 'service-worker.js',
       directoryIndex: false,
       minify: true,
       runtimeCaching,
     }),
   ],
});

Problem:

Using a configuration like this, when the React app is compiled with webpack, the service worker is created inside /public/assets/service-worker.js.

The problem that I have, is that I need to do this to register it:

if ('serviceWorker' in navigator) {
    navigator
      .serviceWorker
      .register('/assets/service-worker.js'); // Adding /assets/ ...
 }

And inspecting with DevTools, I can see how service worker is registered without problems but in:

localhost:3000/assets

Trying to solve, first try:

If I try in the service worker register to add this option: { scope: './' }, this error message is appearing:

DOMException: Failed to register a ServiceWorker: The path of the provided scope ('/this_is_the_part_with_react') is not under the max scope allowed ('/assets/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

Trying to solve, second try:

If I try to change the webpack configuration to:

new SWPrecacheWebpackPlugin({
   cacheId: 'my-project',
   filename: '../service-worker.js', // Adding ../ on front
   directoryIndex: false,
   minify: true,
   runtimeCaching,
}),

Now I can register directly without the /assets on front the file, because is created inside /public:

navigator.serviceWorker
  .register('/service-worker.js', { scope: './' });

And now, inspecting with the DevTools, I can see how the scope now is correct:

localhost:3000/this_is_the_part_with_react

But, the service worker is getting this error:

And all the assets in network are failing with a 404 error because is missing the /assets on front.

Problem 2

Under the service worker in localhost:3000/assets, it's not caching the requests (runtimeCaching config) and the app is not working offline.

Maybe is the same problem related with the first problem with the scope...

But I add a console.log inside the fetch event that is inside the created service-worker.js file, and this is never executed.

Conclusion

Well, will be great if someone can help me with some idea to fix this two issues that I explained (that maybe is the same issue):

• Problem with scope
• Problem with caching requests and use the app in offline mode.

Thank you so much!