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、如何实现客户端浏览器强制刷新缓存：

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

复制代码

registration.update();

可以基于浏览器的localStorage，来决定什么时候刷新。