我将 workbox-build-2.1.2 和 workbox-sw-2.1.2 与 Angular-cli-1.6.0 一起使用,一切正常,但是当我更新应用程序并为生产和 sw.js 构建它时文件被修改然后在 chrome 浏览器中服务 worker 没有更新它继续使用旧版本直到我手动取消注册它。它不应该安装新的 sw.js 文件吗?当它安装新版本时,它是否还会清理站点的旧数据并自动启动一个新的 slate,或者我是否需要设置该部分?
这是我在 Angulars 主文件中注册 sw.js 的方法:
platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(registerServiceWorker)
.catch(err => console.log(err));
function registerServiceWorker() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('sw.js')
.then(reg => {
log('Registration successful', reg);
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
log('New or updated content is available', installingWorker);
} else {
log('Content is now available offline', installingWorker);
}
break;
case 'redundant':
console.error('The installing service worker became redundant', installingWorker);
break;
default:
log(installingWorker.state);
break;
}
};
};
})
.catch(e => {
console.error('Error during service worker registration:', e);
});
} else {
console.warn('Service Worker is not supported');
}
}
我用 npm 运行的 generate-sw 文件
const workboxBuild = require('workbox-build');
const SRC_DIR = 'src';
const BUILD_DIR = 'public';
const SW = 'sw.js';
const globPatterns = [
"**/*.{ico,html,css,js,woff,json}"
];
const globIgnores = [
"sw.js"
];
const input = {
swSrc: `${SRC_DIR}/${SW}`,
swDest: `${BUILD_DIR}/${SW}`,
globDirectory: BUILD_DIR,
globPatterns: globPatterns,
globIgnores: globIgnores,
maximumFileSizeToCacheInBytes: 4000000
};
workboxBuild.injectManifest(input).then(() => {
console.log(`The service worker ${BUILD_DIR}/${SW} has been injected`);
});
和基本的 sw.js 文件
importScripts('workbox-sw.prod.v2.1.2.js');
const workboxSW = new self.WorkboxSW({clientsClaim: true});
workboxSW.precache([]);
workboxSW.router.registerNavigationRoute('/index.html');
*****更新*****
将 express.js 用于开发服务器,我将 Cache-Control 设置为零,现在当我重新加载页面时,service worker 会更新到较新的版本。在生产环境中,Cache-Control 设置为数天/数年时,我很困惑服务 worker 需要多长时间才能更新,它会清除旧的 cash 和 indexDB 还是我们必须手动执行
这是 express 的代码:
app.use('/', express.static(publicFolderPath, {maxAge: 0}));
app.get('*', (req, res) => {
res.sendFile('index.html');
});
最佳答案
- Service Worker 在网站打开时不会更改 在服务器上更新(即它不会在后台改变),它会在网站打开后改变 它已经更新。确保浏览器没有缓存它,它的 缓存 TTL/max-age 应设置为 0
- 新服务 worker 不会开箱即用地清理旧服务 worker 的缓存,你将需要在 “激活”事件
例如:
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
引用此链接:https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
希望对你有帮助
关于node.js - Workbox Service Worker 在更改时不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47707460/