问题
I migrate from v4 to v5 of webpack-workbox-plugin but when I try to build, I got error:
ERROR in Can't find self.__WB_MANIFEST in your SW source.
Child InjectManifest:
Asset Size Chunks Chunk Names
sw.js 1.5 KiB 0 [emitted] InjectManifest
Child html-webpack-plugin for "index.html":
1 asset
Do __WB_MANIFEST
will create in a precach-manifest file and import automatically like v4?
WebpackConfig :
new WorkboxPlugin.InjectManifest({
swSrc: 'sw.js',
chunks: ['*.chunk.js'],
exclude: [/\.(?:png|jpg|jpeg|svg)$/, /\.map$/, /manifest\.json$/, /service-worker\.js$/, /sw\.js$/],
include: [path.resolve(process.cwd(), 'build')],
}),
My sw.js:
importScripts('./ChabokSDKWorker.js', 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
/* eslint-disable no-undef */
if (workbox) {
workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.precaching.cleanupOutdatedCaches();
// eslint-disable-next-line no-restricted-globals,no-underscore-dangle
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
// java-script files cache
workbox.routing.registerRoute(
new RegExp('.+\\.js$'),
workbox.strategies.StaleWhileRevalidate({
cacheName: 'js-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
maxAgeSeconds: 60 * 60 * 24 * 7,
purgeOnQuotaError: true,
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
],
}),
);
// css files cache
workbox.routing.registerRoute(
new RegExp('.+\\.css$'),
workbox.strategies.StaleWhileRevalidate({
cacheName: 'css-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 5,
maxAgeSeconds: 60 * 60 * 24 * 7,
purgeOnQuotaError: true,
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
],
}),
);
// image files cache
workbox.routing.registerRoute(
new RegExp('.+\\.(png|jpg|jpeg|svg)$'),
workbox.strategies.CacheFirst({
cacheName: 'images-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
maxAgeSeconds: 60 * 60 * 24 * 7,
purgeOnQuotaError: true,
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
],
}),
);
workbox.routing.registerRoute(
new RegExp('/.*'),
workbox.strategies.NetworkFirst({}),
'GET',
);
} else {
console.log(`Boo! Workbox didn't load 😬`);
}
/* eslint-enable no-undef */
回答1:
It was my webpack config for injectManifest bug, I fixed it like this :
new WorkboxPlugin.InjectManifest({
swSrc: path.join(process.cwd(), '/app/resources/service-worker.js'),
swDest: 'sw.js',
exclude: [
/\.map$/,
/manifest$/,
/\.htaccess$/,
/service-worker\.js$/,
/sw\.js$/,
],
}),
and now self.__WB_MANIFEST
will replace with list of precache files
来源:https://stackoverflow.com/questions/60491114/webpack-workbox-cant-find-self-wb-manifest-in-your-sw-source