Code intended for the service worker is run on web page in dev mode

[jeffposnick]

The code in https://github.com/vuejs-templates/pwa/blob/development/template/build/service-worker-dev.js is meant to be the content of a service worker file, and will only run as expected if inside of the ServiceWorkerGlobalScope.

However, as part of the dev webpack build, it ends up being inlined inside of index.html, meaning that it will run (and do nothing) inside the WindowClient (i.e. web page) scope.

https://github.com/vuejs-templates/pwa/blob/694af84add46655c6c82e9893ba19b7029279f81/template/build/webpack.dev.conf.js#L36-L38

Instead of taking service-worker-dev.js and inlining it inside of index.html, the same service worker registration code can be used in both dev and prod, with the difference between to the two environments being the actual contents of the service-worker.js file.

• In dev, the service-worker.js file should contain what's currently in [service-worker-dev.js](https://github.com/vuejs-templates/pwa/blob/development/template/build/service-worker-dev.js).

• In prod, the service-worker.js file should contain the generated output of SWPrecachePlugin.