前端部署后提示用户刷新页面

实现这个需求有很多方式,我这里推荐一个本人认为最佳的一个方案,无需循环调用接口,纯前端就可以实现,也非常欢迎大家评论这个方案的优劣

1. 注册 Service Worker

首先,在你的前端代码中注册 Service Worker。可以在你的主 JavaScript 文件(例如 index.jsmain.js)中添加以下代码:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('Service Worker 注册成功:', registration);

      // 监听更新事件
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // 新的 Service Worker 已安装并控制页面,通知用户刷新
              console.log('新的内容可用,请刷新。');
              alert('新的版本可用,请刷新浏览器获取最新更新。');
            } else {
              console.log('内容缓存以供离线使用。');
            }
          }
        };
      };
    }).catch(error => {
      console.error('Service Worker 注册失败:', error);
    });
  });
}
2. 创建 Service Worker 文件

在你的项目根目录下创建一个名为 service-worker.js 的文件:

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js',
  // 添加其他需要缓存的资源
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});
3. 更新 Service Worker

当你对前端代码进行更新时,只需更新 service-worker.js 文件的内容(例如,改变缓存名称 CACHE_NAME 或添加新的文件到 urlsToCache)。浏览器会检测到 service-worker.js 文件的变化,并触发 updatefound 事件。

这样,当用户刷新页面时,新的前端代码会被加载,并且缓存也会被更新到最新版本。通过 Service Worker,你可以确保用户始终使用最新的前端代码,同时提供离线支持和更快的加载速度。

解释Service Worker:Service Worker 是一种在后台运行的脚本,允许你在没有打开网页的情况下对网络请求进行拦截和缓存管理。使用 Service Worker 可以实现离线支持、后台同步、推送通知等功能。在这里,我们利用 Service Worker 来检测前端代码的更新并通知用户刷新浏览器以获取最新的代码。

相关推荐
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序2 小时前
vue3 封装request请求
java·前端·typescript·vue