self.__WB_MANIFEST 未被 InjectManifest 生成的用于使用 service worker 进行预缓存的 url 替换
self.__WB_MANIFEST is not replaced by InjectManifest generated urls for precaching using service worker
这是我的 webpack 配置
new InjectManifest({
swSrc: './app/service-worker.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5000000,
}),
这是我的服务-worker.js
import { skipWaiting, clientsClaim } from 'workbox-core';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
skipWaiting();
clientsClaim();
cleanupOutdatedCaches();
precacheAndRoute(self.__WB_MANIFEST || []);
这就是我注册 serviceworker 的方式
import { Workbox } from 'workbox-window';
const register = () => {
// service worker should be installed only in prod env.
if (process.env.NODE_ENV !== 'production') {
return;
}
// check if browser supports SW before register.
if ('serviceWorker' in navigator) {
const wb = new Workbox('/company/sw.js');
wb.register().then((registration) => {
console.log('Registration success', registration.scope);
}).catch((err) => {
console.log('Registration failed', err);
});
}
};
register();
这是由 webpack bundler 使用 InjectManifest 生成的 sw.js 代码,它通过替换 self.__WB_MANIFEST
来注入路由
f81121bb716d06db5a3c: function (e, t, r) {
"use strict";
var n = r("ee2c850f71b22ec627d9"),
a = r("71160463eb5f8808d43e");
(0, n.skipWaiting)(), (0, n.clientsClaim)(), (0, a.cleanupOutdatedCaches)(), (0, a.precacheAndRoute)([{
'revision': 'd6d49a7c4da3232a63313d0296cb697c',
'url': '/company/index.html'
}, {
'revision': null,
'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js'
}, {
'revision': 'd77aa54cfc47caccf631a032dccdd1a4',
'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js.br'
}, {
'revision': 'f583ac2ae2e839d40f7390f44de0d09e',
'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js.gz'
}, {
'revision': null,
'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js'
}, {
'revision': 'cc71224b8f04e2722f7fd8e934625d99',
'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js.br'
}, {
'revision': 'a66582b83e005784db6aa640e3075f67',
'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js.gz'
}, {
'revision': null,
'url': '/company/static/js/runtime~main.67d1bc90b93c84b2daf6.js'
}, {
'revision': 'e0a95983d322b621a7fd3b16888aaa8b',
'url': '/company/sw.js.br'
}, {
'revision': 'e1ab2a71f411919e92a90675915af0ef',
'url': '/company/sw.js.gz'
}] || [])
},
下面是从本地主机提供时来自 devtools 的 sw.js 代码的屏幕截图
正如我们在本地主机中提供的 sw.js 文件中清楚地看到的那样,self.__WB_MANIFEST 没有被 InjectManifest 生成的 url 替换。在这里,我的问题是 sw.js 文件的代码为何与捆绑程序生成的代码不同。我尝试注销服务工作者并尝试清空缓存,但 sw.js 与我在构建中所拥有的与所服务的相比仍然存在差异。请在这里提出一些想法。
以下是我使用的版本
"workbox-core": "^6.4.2",
"workbox-precaching": "^6.4.2",
"workbox-window": "^6.4.2",
"workbox-webpack-plugin": "^6.4.2"
经过一天的努力,我弄清楚了哪里出错了。以前我的 webpack 配置是这样的
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
new InjectManifest({
// exclude: [/\.map$/, /asset-manifest\.json$/],
// importWorkboxFrom: 'cdn',
swSrc: './app/service-worker.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5000000,
}),
现在我将 InjectManifest 插件移到了压缩插件之前,最终解决了问题
new InjectManifest({
// exclude: [/\.map$/, /asset-manifest\.json$/],
// importWorkboxFrom: 'cdn',
swSrc: './app/service-worker.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5000000,
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
任何人都知道 webpack 在打包时如何处理这个问题
这是我的 webpack 配置
new InjectManifest({
swSrc: './app/service-worker.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5000000,
}),
这是我的服务-worker.js
import { skipWaiting, clientsClaim } from 'workbox-core';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
skipWaiting();
clientsClaim();
cleanupOutdatedCaches();
precacheAndRoute(self.__WB_MANIFEST || []);
这就是我注册 serviceworker 的方式
import { Workbox } from 'workbox-window';
const register = () => {
// service worker should be installed only in prod env.
if (process.env.NODE_ENV !== 'production') {
return;
}
// check if browser supports SW before register.
if ('serviceWorker' in navigator) {
const wb = new Workbox('/company/sw.js');
wb.register().then((registration) => {
console.log('Registration success', registration.scope);
}).catch((err) => {
console.log('Registration failed', err);
});
}
};
register();
这是由 webpack bundler 使用 InjectManifest 生成的 sw.js 代码,它通过替换 self.__WB_MANIFEST
来注入路由 f81121bb716d06db5a3c: function (e, t, r) {
"use strict";
var n = r("ee2c850f71b22ec627d9"),
a = r("71160463eb5f8808d43e");
(0, n.skipWaiting)(), (0, n.clientsClaim)(), (0, a.cleanupOutdatedCaches)(), (0, a.precacheAndRoute)([{
'revision': 'd6d49a7c4da3232a63313d0296cb697c',
'url': '/company/index.html'
}, {
'revision': null,
'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js'
}, {
'revision': 'd77aa54cfc47caccf631a032dccdd1a4',
'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js.br'
}, {
'revision': 'f583ac2ae2e839d40f7390f44de0d09e',
'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js.gz'
}, {
'revision': null,
'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js'
}, {
'revision': 'cc71224b8f04e2722f7fd8e934625d99',
'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js.br'
}, {
'revision': 'a66582b83e005784db6aa640e3075f67',
'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js.gz'
}, {
'revision': null,
'url': '/company/static/js/runtime~main.67d1bc90b93c84b2daf6.js'
}, {
'revision': 'e0a95983d322b621a7fd3b16888aaa8b',
'url': '/company/sw.js.br'
}, {
'revision': 'e1ab2a71f411919e92a90675915af0ef',
'url': '/company/sw.js.gz'
}] || [])
},
下面是从本地主机提供时来自 devtools 的 sw.js 代码的屏幕截图
正如我们在本地主机中提供的 sw.js 文件中清楚地看到的那样,self.__WB_MANIFEST 没有被 InjectManifest 生成的 url 替换。在这里,我的问题是 sw.js 文件的代码为何与捆绑程序生成的代码不同。我尝试注销服务工作者并尝试清空缓存,但 sw.js 与我在构建中所拥有的与所服务的相比仍然存在差异。请在这里提出一些想法。 以下是我使用的版本
"workbox-core": "^6.4.2",
"workbox-precaching": "^6.4.2",
"workbox-window": "^6.4.2",
"workbox-webpack-plugin": "^6.4.2"
经过一天的努力,我弄清楚了哪里出错了。以前我的 webpack 配置是这样的
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
new InjectManifest({
// exclude: [/\.map$/, /asset-manifest\.json$/],
// importWorkboxFrom: 'cdn',
swSrc: './app/service-worker.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5000000,
}),
现在我将 InjectManifest 插件移到了压缩插件之前,最终解决了问题
new InjectManifest({
// exclude: [/\.map$/, /asset-manifest\.json$/],
// importWorkboxFrom: 'cdn',
swSrc: './app/service-worker.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5000000,
}),
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
任何人都知道 webpack 在打包时如何处理这个问题