Generate ServiceWorker using webpack 4.41 and workbox 6

问题

I am using webpack v4.41 and workbox v6 to create my service-worker.js. I am having trouble regitering the service worker in my dev environment. I have set devtools.serviceWorkers.testing.enabled to true

I have followed the instructions for using bundlers with workbox, read the documentation for injectManifest and adding the Workbox webpack plugin.

After building using webpack (generating serviceWorker.js) Firefox reports error:

Service worker error TypeError: ServiceWorker script at http://127.0.0.1:8080/service-worker.js 
for scope http://127.0.0.1:8080/ encountered an error during installation. app.js:220:12
js app.js:220
(Async: promise callback)
js app.js:183
Webpack 5
   __webpack_require__
   1
   __webpack_require__
   <anonymous>
   <anonymous>

The error in Chrome reads:

Service worker error TypeError: Failed to register a ServiceWorker for scope ('http://127.0.0.1:8080/') 
with script ('http://127.0.0.1:8080/service-worker.js'): 
A bad HTTP response code (404) was received when fetching the script. 
react_devtools_backend.js:2430

This puzzles med as my config is correct - as far as I can see.

app.js

if (('serviceWorker' in navigator)) { 
  // Line 183 below
  navigator.serviceWorker.register('/service-worker.js')
  .then(registration => {
    console.log('Service worker registered', registration)
    //...
  })
  .catch(registrationError => { // Line 220
    console.error('Service worker error', registrationError )
  })
}

serviceWorker.js (generated from serviceWroker-base.js)

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

const CACHE_DYNAMIC_NAME = 'DEBUG-002'

workbox.precacheAndRoute(self.__WB_MANIFEST)

registerRoute(
  ({request}) => request.destination === 'image',
  new StaleWhileRevalidate({cacheName: 'images'}),
);

webpack.config.js

const WorkboxPlugin = require('workbox-webpack-plugin')
const {InjectManifest} = require('workbox-webpack-plugin')
const workboxWebpackPlugin = new WorkboxPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: true
})
const workboxWebpackInjectPlugin = new InjectManifest({
  swSrc: './src/service-worker-base.js',
  swDest: './service-worker.js'
})
// build WEBPACK CONFIG
const config = {}
//...
config.plugins = [
  nodeEnvPlugin,
  firebasePlugin,
  cssExtractPlugin,
  workboxWebpackInjectPlugin,
  workboxWebpackPlugin
]
//...
return config

UPDATED webpack-config.js

const {InjectManifest} = require('workbox-webpack-plugin')
const workboxWebpackInjectPlugin = new InjectManifest({
  swSrc: './src/service-worker-base.js',
  swDest: '../service-worker.js'
})
// build WEBPACK CONFIG
const config = {}
//...
config.plugins = [
  nodeEnvPlugin,
  firebasePlugin,
  cssExtractPlugin,
  workboxWebpackInjectPlugin    ]
//...
return config

workbox-config.js

module.exports = {
  "globDirectory": "public\\",
  "globPatterns": [
    "**/*.{pem,js,css,map,py,svg,ico,gif,html,json}",
    "images/*.{png,jpg,svg}"
  ],
  "swSrc": "src/service-worker-base.js",
  "swDest": "service-worker.js",
  "globIgnores": [
    "..\\workbox-cli-config.js",
    "404.html"
  ]
};

package.json

"dependencies": {
  ...
  "workbox-routing": "^6.0.2",
  "workbox-strategies": "^6.0.2"
},
"devDependencies": {
  ...
  "webpack": "^4.41.2",
  "webpack-bundle-analyzer": "^3.6.0",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.11.0",
  "workbox-cli": "^6.0.2",
  "workbox-webpack-plugin": "^6.0.2"
}

What is wrong with my config?

Kind regards /K

来源：https://stackoverflow.com/questions/65234832/generate-serviceworker-using-webpack-4-41-and-workbox-6

标签

javascript

service-worker

webpack-4

workbox