CODEWITHSUNDEEP
javascriptwebpackservice-workerwebpack-dev-serverworkbox
ushka1
ushka1

Reputation: 895

How to reload Service-Worker (workbox) without reloading Webpack-Dev-Server?

My question is is this possible to force webpack-dev-server to update the service-worker file without manual reloading the whole server? I'm using workbox-webpack-plugin with injectManifest option. It's looking like this: 

 new InjectManifest({
  swSrc: './sw-base.js',
  swDest: 'sw.js',
}),

This is sw-base.js

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js',
);

workbox.setConfig({ debug: false });

self.skipWaiting();

workbox.routing.registerRoute(
  new RegExp(/\.(png|jpg)/),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'images',
  }),
);

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

When I'm changing the sw-base.js file (for example the cacheName) I have to reload whole webpack-dev-server to apply changes.

So is this possible to make dev-server to auto reload on sw-base.js change?

Thanks from advance :3

Upvotes: 2

Views: 1990

Answers (1)

ushka1
ushka1

Reputation: 895

I'm answering own question but it may help others, who knows. So most probably, that is not possible using webpack-dev-server.

However you can make a quite effective build for working with workbox and webpack.

Steps:

  1. Don't use webpack-dev-server, instead install a third party server package, "http-server" for example.
  2. Run your new server scoped on files in "dist/build" folder.
  3. Run your webpack:build command. Side note: Don't use the --watch flag, it causes some problems with InjectManifest plugin. You have to manually rebuild your app with command on every update.

For faster development you can enable "update on reload" option in ChromeDevTools/application. It automatically unregisters and registers new service worker on reload.

Cheers

Upvotes: 2

Related Questions