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,来决定什么时候刷新。

相关推荐
WeilinerL15 分钟前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊18 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~24 分钟前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了32 分钟前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫36 分钟前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 小时前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
凉柚ˇ1 小时前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士1 小时前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士1 小时前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端