service worker如何实现静态资源缓存和强制更新,请看如下示例:
1、注册service worker
function serviceWorker() {
if (isLocalStorageAvailable() && 'serviceWorker' in navigator) {
navigator.serviceWorker.register('/static/almasaeed2010/adminlte/dist/js/service-worker.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
}
}
2、worker实现:
// 预定义要缓存的文件列表
c服务器托管网onst cacheName = 'fbspider-cache-v1.1.2';
//update time
const filesToCache = [
'/static/almasaeed2010/adminlte/plugins/jquery/jquery.min.js',
'/static/almasaeed2010/adminlte/plugins/jquery-ui/jquery-ui.min.js',
'/static/almasaeed2010/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js',
'/static/almasaeed2010/adminlte/plugins/moment/moment.min.js',
'/static/almasaeed2010/adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js',
'/static/almasaeed2010/adminlte/dist/js/adminlte.js',
'/static/almasaeed2010/adminlte/plugins/sweetalert2/sweetalert2.min.js',
'/static/almasaeed2010/adminlte/plugins/toastr/toastr.min.js',
'/static/almasaeed2010/adminlte/dist/js/demo.js',
'/datatables-responsive/js/responsive.bootstrap4.min.js',
'https://cdn.datatables.net/fixedcolumns/3.3.3/js/dataTables.fixedColumns.min.js',
'/static/almasaeed2010/adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js',
'/static/almasaeed2010/adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js',
'/static/almasaeed2010/adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js',
'/static/almasaeed2010/adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js',
'/static/almasaeed2010/adminlte/plugins/datatables/jquery.dataTables.min.js',
'/static/almasaeed2010/adminlte/plugins/fontawesome-free/css/all.min.css',
'/static/almasaeed2010/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css',
'/static/almasaeed2010/adminlte/dist/css/adminlte.min.css',
//'/static/almasaeed2010/adminlte/dist/css/common.css',
'/static/almasaeed2010/adminlte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css',
'/static/almasaeed2010/adminlte/plugins/toastr/toastr.min.css',
'/static/almasaeed2010/adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css',
'/static/almasaeed2010/adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css',
'/static/almasaeed2010/adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css',
'/static/almasaeed2010/adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css',
'https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
// ...其他文件
];
// 在 Service Worker 安装阶段缓存文件-----
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName服务器托管网).then(function(cache) {
return Promise.all(
filesToCache.map(function(file) {
return cache.add(file).catch(function() {
console.log('Failed to cache:', file);
});
})
);
})
);
self.skipWaiting();
});
// 拦截网络请求并返回缓存的响应(如果存在)
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 如果缓存中有该请求,返回缓存的响应
if (response) {
return response;
}
// 否则,进行实际的网络请求
return fetch(event.request);
})
);
});
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(thisCacheName) {
// 如果一个存在的缓存不匹配当前缓存名称,就删除它
if (thisCacheName !== cacheName) {
return caches.delete(thisCacheName);
}
})
);
})
);
});
3、如何实现客户端浏览器强制刷新缓存:
网上的一些方法试过都不生效,我的最终解决方法是强制刷新,至于什么时机刷新,可以在注册完后,在成功的回调方法中,判断并强制刷新,强制刷新如下:
registration.update();
可以基于浏览器的localStorage,来决定什么时候刷新。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
OSC 请你来轰趴啦!1028 苏州源创会,一起寻宝 AI 时代 10月19日阿里云峰会山东上,阿里云重磅升级《阿里云卓越架构白皮书》,助力企业在阿里云上构建更加安全、高效、稳定的云架构。《阿里云卓越架构白皮书》在今年的阿里云峰会粤港澳大湾区首度亮相,这是阿里…