Can't install service worker of workbox-webpack-plugin in root url for React app, it's installing at...












0















I have been following a lot of tutorials of how to install workbox-webpack-plugin but I haven't succesfully managed to install it correctly. The service worker appears to be installing but its installing in the dist folder of my app (This is my webpacks output path). I think there's nothing wrong with this but when I run my app, there are no errors but the service worker is not functioning and I notice that it is being installed at localhost:8080/dist (The output path) and even if I try to run it in a heroku free server it gets installed at the url "https://myherokuapp.com/dist" (The same output path) I can't find a way to fix and think this might be related with another webpack module?



Here's my webpack config:



module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
}, {
test: /.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}]
},
plugins: [
CSSExtract,
new webpack.DefinePlugin({
'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
}),
new CopyWebpackPlugin([
{
from: './public/index.html',
to: 'index.html'
}
]),
new WorkboxPlugin.InjectManifest({
swSrc: './public/sw.js',
swDest: 'service-worker.js'
})
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist/'
}
};
};


The service worker I am providing to workbox at swSrc:



workbox.routing.registerNavigationRoute('https://my-app123.herokuapp.com/dashboard');

workbox.skipWaiting();

workbox.precaching.precacheAndRoute(self.__precacheManifest);


And my manifest:



{
"dir": "ltr",
"lang": "ES",
"name": "PWAPRB",
"icons": [
{
"src": "/images/icons/app-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/images/icons/app-icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/images/icons/app-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons/app-icon-256x256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/images/icons/app-icon-384x384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/images/icons/app-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"display": "standalone",
"start_url": "https://my-app123.herokuapp.com/dashboard",
"scope": ".",
"short_name": "PRBW",
"theme_color": "#204080",
"orientation": "any",
"background_color": "#204080",
"related_applications": ,
"prefer_related_applications": false
}


And here is the registration from the SW where I see that its installed in the /dist url



enter image description here



I really appreciate any help since I'm very new to webpack and workbox and I'm completely stuck. Thank you all!!.










share|improve this question



























    0















    I have been following a lot of tutorials of how to install workbox-webpack-plugin but I haven't succesfully managed to install it correctly. The service worker appears to be installing but its installing in the dist folder of my app (This is my webpacks output path). I think there's nothing wrong with this but when I run my app, there are no errors but the service worker is not functioning and I notice that it is being installed at localhost:8080/dist (The output path) and even if I try to run it in a heroku free server it gets installed at the url "https://myherokuapp.com/dist" (The same output path) I can't find a way to fix and think this might be related with another webpack module?



    Here's my webpack config:



    module.exports = (env) => {
    const isProduction = env === 'production';
    const CSSExtract = new ExtractTextPlugin('styles.css');

    return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
    path: path.join(__dirname, 'public', 'dist'),
    filename: 'bundle.js'
    },
    module: {
    rules: [{
    loader: 'babel-loader',
    test: /.js$/,
    exclude: /node_modules/
    }, {
    test: /.s?css$/,
    use: CSSExtract.extract({
    use: [
    {
    loader: 'css-loader',
    options: {
    sourceMap: true
    }
    },
    {
    loader: 'sass-loader',
    options: {
    sourceMap: true
    }
    }
    ]
    })
    }]
    },
    plugins: [
    CSSExtract,
    new webpack.DefinePlugin({
    'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
    'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
    'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
    'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
    'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
    'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
    }),
    new CopyWebpackPlugin([
    {
    from: './public/index.html',
    to: 'index.html'
    }
    ]),
    new WorkboxPlugin.InjectManifest({
    swSrc: './public/sw.js',
    swDest: 'service-worker.js'
    })
    ],
    devtool: isProduction ? 'source-map' : 'inline-source-map',
    devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true,
    publicPath: '/dist/'
    }
    };
    };


    The service worker I am providing to workbox at swSrc:



    workbox.routing.registerNavigationRoute('https://my-app123.herokuapp.com/dashboard');

    workbox.skipWaiting();

    workbox.precaching.precacheAndRoute(self.__precacheManifest);


    And my manifest:



    {
    "dir": "ltr",
    "lang": "ES",
    "name": "PWAPRB",
    "icons": [
    {
    "src": "/images/icons/app-icon-48x48.png",
    "type": "image/png",
    "sizes": "48x48"
    },
    {
    "src": "/images/icons/app-icon-96x96.png",
    "type": "image/png",
    "sizes": "96x96"
    },
    {
    "src": "/images/icons/app-icon-144x144.png",
    "type": "image/png",
    "sizes": "144x144"
    },
    {
    "src": "/images/icons/app-icon-192x192.png",
    "type": "image/png",
    "sizes": "192x192"
    },
    {
    "src": "/images/icons/app-icon-256x256.png",
    "type": "image/png",
    "sizes": "256x256"
    },
    {
    "src": "/images/icons/app-icon-384x384.png",
    "type": "image/png",
    "sizes": "384x384"
    },
    {
    "src": "/images/icons/app-icon-512x512.png",
    "type": "image/png",
    "sizes": "512x512"
    }
    ],
    "display": "standalone",
    "start_url": "https://my-app123.herokuapp.com/dashboard",
    "scope": ".",
    "short_name": "PRBW",
    "theme_color": "#204080",
    "orientation": "any",
    "background_color": "#204080",
    "related_applications": ,
    "prefer_related_applications": false
    }


    And here is the registration from the SW where I see that its installed in the /dist url



    enter image description here



    I really appreciate any help since I'm very new to webpack and workbox and I'm completely stuck. Thank you all!!.










    share|improve this question

























      0












      0








      0








      I have been following a lot of tutorials of how to install workbox-webpack-plugin but I haven't succesfully managed to install it correctly. The service worker appears to be installing but its installing in the dist folder of my app (This is my webpacks output path). I think there's nothing wrong with this but when I run my app, there are no errors but the service worker is not functioning and I notice that it is being installed at localhost:8080/dist (The output path) and even if I try to run it in a heroku free server it gets installed at the url "https://myherokuapp.com/dist" (The same output path) I can't find a way to fix and think this might be related with another webpack module?



      Here's my webpack config:



      module.exports = (env) => {
      const isProduction = env === 'production';
      const CSSExtract = new ExtractTextPlugin('styles.css');

      return {
      entry: ['babel-polyfill', './src/app.js'],
      output: {
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
      },
      module: {
      rules: [{
      loader: 'babel-loader',
      test: /.js$/,
      exclude: /node_modules/
      }, {
      test: /.s?css$/,
      use: CSSExtract.extract({
      use: [
      {
      loader: 'css-loader',
      options: {
      sourceMap: true
      }
      },
      {
      loader: 'sass-loader',
      options: {
      sourceMap: true
      }
      }
      ]
      })
      }]
      },
      plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
      'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
      'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
      'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
      'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
      'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
      'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      }),
      new CopyWebpackPlugin([
      {
      from: './public/index.html',
      to: 'index.html'
      }
      ]),
      new WorkboxPlugin.InjectManifest({
      swSrc: './public/sw.js',
      swDest: 'service-worker.js'
      })
      ],
      devtool: isProduction ? 'source-map' : 'inline-source-map',
      devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
      }
      };
      };


      The service worker I am providing to workbox at swSrc:



      workbox.routing.registerNavigationRoute('https://my-app123.herokuapp.com/dashboard');

      workbox.skipWaiting();

      workbox.precaching.precacheAndRoute(self.__precacheManifest);


      And my manifest:



      {
      "dir": "ltr",
      "lang": "ES",
      "name": "PWAPRB",
      "icons": [
      {
      "src": "/images/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
      },
      {
      "src": "/images/icons/app-icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
      },
      {
      "src": "/images/icons/app-icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
      },
      {
      "src": "/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
      },
      {
      "src": "/images/icons/app-icon-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
      },
      {
      "src": "/images/icons/app-icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
      },
      {
      "src": "/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
      }
      ],
      "display": "standalone",
      "start_url": "https://my-app123.herokuapp.com/dashboard",
      "scope": ".",
      "short_name": "PRBW",
      "theme_color": "#204080",
      "orientation": "any",
      "background_color": "#204080",
      "related_applications": ,
      "prefer_related_applications": false
      }


      And here is the registration from the SW where I see that its installed in the /dist url



      enter image description here



      I really appreciate any help since I'm very new to webpack and workbox and I'm completely stuck. Thank you all!!.










      share|improve this question














      I have been following a lot of tutorials of how to install workbox-webpack-plugin but I haven't succesfully managed to install it correctly. The service worker appears to be installing but its installing in the dist folder of my app (This is my webpacks output path). I think there's nothing wrong with this but when I run my app, there are no errors but the service worker is not functioning and I notice that it is being installed at localhost:8080/dist (The output path) and even if I try to run it in a heroku free server it gets installed at the url "https://myherokuapp.com/dist" (The same output path) I can't find a way to fix and think this might be related with another webpack module?



      Here's my webpack config:



      module.exports = (env) => {
      const isProduction = env === 'production';
      const CSSExtract = new ExtractTextPlugin('styles.css');

      return {
      entry: ['babel-polyfill', './src/app.js'],
      output: {
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
      },
      module: {
      rules: [{
      loader: 'babel-loader',
      test: /.js$/,
      exclude: /node_modules/
      }, {
      test: /.s?css$/,
      use: CSSExtract.extract({
      use: [
      {
      loader: 'css-loader',
      options: {
      sourceMap: true
      }
      },
      {
      loader: 'sass-loader',
      options: {
      sourceMap: true
      }
      }
      ]
      })
      }]
      },
      plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
      'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
      'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
      'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
      'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
      'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
      'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      }),
      new CopyWebpackPlugin([
      {
      from: './public/index.html',
      to: 'index.html'
      }
      ]),
      new WorkboxPlugin.InjectManifest({
      swSrc: './public/sw.js',
      swDest: 'service-worker.js'
      })
      ],
      devtool: isProduction ? 'source-map' : 'inline-source-map',
      devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
      }
      };
      };


      The service worker I am providing to workbox at swSrc:



      workbox.routing.registerNavigationRoute('https://my-app123.herokuapp.com/dashboard');

      workbox.skipWaiting();

      workbox.precaching.precacheAndRoute(self.__precacheManifest);


      And my manifest:



      {
      "dir": "ltr",
      "lang": "ES",
      "name": "PWAPRB",
      "icons": [
      {
      "src": "/images/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
      },
      {
      "src": "/images/icons/app-icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
      },
      {
      "src": "/images/icons/app-icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
      },
      {
      "src": "/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
      },
      {
      "src": "/images/icons/app-icon-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
      },
      {
      "src": "/images/icons/app-icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
      },
      {
      "src": "/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
      }
      ],
      "display": "standalone",
      "start_url": "https://my-app123.herokuapp.com/dashboard",
      "scope": ".",
      "short_name": "PRBW",
      "theme_color": "#204080",
      "orientation": "any",
      "background_color": "#204080",
      "related_applications": ,
      "prefer_related_applications": false
      }


      And here is the registration from the SW where I see that its installed in the /dist url



      enter image description here



      I really appreciate any help since I'm very new to webpack and workbox and I'm completely stuck. Thank you all!!.







      reactjs webpack redux workbox workbox-webpack-plugin






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 22 '18 at 3:43









      FaridFarid

      345




      345
























          1 Answer
          1






          active

          oldest

          votes


















          1














          The problem is the scope of your Service Worker. Because the sw is inside dist/, it can only control requests to resources inside the /dist/` folder.



          I'd recommend using HTMLWebpackPlugin for your index.html which would then be processed by Webpack and ends up in the dist/, and then you'd deploy your dist/ folder






          share|improve this answer
























          • Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

            – Farid
            Nov 22 '18 at 14:51











          • Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

            – Jad Joubran
            Nov 22 '18 at 18:09











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423574%2fcant-install-service-worker-of-workbox-webpack-plugin-in-root-url-for-react-app%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          The problem is the scope of your Service Worker. Because the sw is inside dist/, it can only control requests to resources inside the /dist/` folder.



          I'd recommend using HTMLWebpackPlugin for your index.html which would then be processed by Webpack and ends up in the dist/, and then you'd deploy your dist/ folder






          share|improve this answer
























          • Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

            – Farid
            Nov 22 '18 at 14:51











          • Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

            – Jad Joubran
            Nov 22 '18 at 18:09
















          1














          The problem is the scope of your Service Worker. Because the sw is inside dist/, it can only control requests to resources inside the /dist/` folder.



          I'd recommend using HTMLWebpackPlugin for your index.html which would then be processed by Webpack and ends up in the dist/, and then you'd deploy your dist/ folder






          share|improve this answer
























          • Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

            – Farid
            Nov 22 '18 at 14:51











          • Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

            – Jad Joubran
            Nov 22 '18 at 18:09














          1












          1








          1







          The problem is the scope of your Service Worker. Because the sw is inside dist/, it can only control requests to resources inside the /dist/` folder.



          I'd recommend using HTMLWebpackPlugin for your index.html which would then be processed by Webpack and ends up in the dist/, and then you'd deploy your dist/ folder






          share|improve this answer













          The problem is the scope of your Service Worker. Because the sw is inside dist/, it can only control requests to resources inside the /dist/` folder.



          I'd recommend using HTMLWebpackPlugin for your index.html which would then be processed by Webpack and ends up in the dist/, and then you'd deploy your dist/ folder







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 22 '18 at 13:06









          Jad JoubranJad Joubran

          1,55711749




          1,55711749













          • Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

            – Farid
            Nov 22 '18 at 14:51











          • Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

            – Jad Joubran
            Nov 22 '18 at 18:09



















          • Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

            – Farid
            Nov 22 '18 at 14:51











          • Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

            – Jad Joubran
            Nov 22 '18 at 18:09

















          Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

          – Farid
          Nov 22 '18 at 14:51





          Thank you for your answer Jad! I thought that the CopyWebpackPlugin was making that happen, I already tried with HTMLWebpackPlugin but the index.html that is being read is the one in the /public folder, not the one in the /public/dist folder, I know this because the title of the index.html file created at /public/dist is different. I tryied also to change the scope when registering the service worker to .register('dist/service-worker.js', { scope: '/' }) but It says that it's not possible since the globalScope is at /dist and I cant find how to use Service-Worker-Allowed http header from JS

          – Farid
          Nov 22 '18 at 14:51













          Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

          – Jad Joubran
          Nov 22 '18 at 18:09





          Sure thing! Yeah you won't be able to make the scope go 1 level higher The thing with webpack is that all the files/assets that go through it will be in the dist folder after compilation, so you have to either copy your index.html or pass it through HTMLWebpackPlugin

          – Jad Joubran
          Nov 22 '18 at 18:09




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423574%2fcant-install-service-worker-of-workbox-webpack-plugin-in-root-url-for-react-app%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

          SQL update select statement

          'app-layout' is not a known element: how to share Component with different Modules