12
votes

I'm trying to use service workers inside a web app using Webpack and Docker.

Everything I made for the moment is working well (service worker, webpack config, worker registration...)

Actually my app is running inside a Docker container, in this container I can start my webpack build to create all my JS files.

But now I would like to be able to use webpack dev-server and HMR with my service worker.

To do that I used https://github.com/oliviertassinari/serviceworker-webpack-plugin that correctly made a reference of my service worker inside the manifest.json

Then when I access through my web browser to my application, every built assets are found except my worker.

I run my dev-server using (I use webpack-encore), inside my docker container

encore dev-server --hot --host 0.0.0.0 --port 8080

To load my assets the browser request them on 0.0.0.0:8080 but my worker is registered from localhost:8000 so the request fail with 404 error because the worker is located 0.0.0.0:8080/sw.js instead localhost:8080/sw.js.

I would know if this was possible to fix this behavior and made my service worker working inside the webpack-dev-server on a docker container.

I know service workers are listening only their scope, in my case localhost:8000/* but the webpack-dev-server is 0.0.0.0:8080.

This is why I asking if this is possible to change this behavior to made it work, and if someone already had this problem.

Thanks

1

1 Answers

0
votes

You need to expose port 8000 from your Docker container as well as port 8080. You must expose multiple ports from your Docker container for multiple web services on different ports.

docker run -p 8080:8080 -p 8000:8000

Official documentation