service worker实现静态资源缓存

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实现：

// 预定义要缓存的文件列表
const 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、如何实现客户端浏览器强制刷新缓存：

网上的一些方法试过都不生效，我的最终解决方法是强制刷新，至于什么时机刷新，可以在注册完后，在成功的回调方法中，判断并强制刷新，强制刷新如下：