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

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

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 来检测前端代码的更新并通知用户刷新浏览器以获取最新的代码。

相关推荐
熊的猫37 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书