2022年如何通过JavaScript实现Chrome硬重载？

Chrome在2022年后调整了缓存策略，window.location.reload(true)的强制刷新参数已不再生效，导致常规代码无法模拟Shift-Ctrl-R的硬重载效果。以下是几个可靠的代码解决方案：

方案1：缓存破坏参数（最通用） #

通过给当前URL添加唯一的动态参数（如时间戳），强制浏览器将当前页面及关联静态资源视为全新请求，彻底绕过缓存。

DevTracker.setCookie = function(){
    document.cookie="demoweb=false;path=/";
    console.log("setCookie called!");

    // 生成唯一缓存破坏标识
    const uniqueParam = `upd=${Date.now()}`;
    let newUrl = window.location.href;

    // 移除旧的缓存参数，避免重复拼接
    if (newUrl.includes('?')) {
        newUrl = newUrl.replace(/([?&])upd=\d+/g, '');
        newUrl = newUrl.endsWith('?') ? newUrl.slice(0, -1) : newUrl;
        newUrl += `${newUrl.includes('?') ? '&' : '?'}${uniqueParam}`;
    } else {
        newUrl += `?${uniqueParam}`;
    }

    // 跳转到带新参数的地址，强制加载所有资源
    window.location.replace(newUrl);
};

这种方式直接改变资源请求的URL键，浏览器会完全忽略原有缓存，完美解决CSS等静态资源不更新的问题。

方案2：Service Worker缓存清除（适配PWA场景） #

如果你的站点使用了Service Worker，可以主动清除SW缓存并注销，再结合缓存参数跳转：

DevTracker.setCookie = async function(){
    document.cookie="demoweb=false;path=/";
    console.log("setCookie called!");

    if ('serviceWorker' in navigator) {
        const registrations = await navigator.serviceWorker.getRegistrations();
        for (let registration of registrations) {
            // 清空SW管辖的所有缓存
            await caches.delete(registration.scope);
            // 注销SW避免后续缓存拦截
            await registration.unregister();
        }
    }

    // 跳转时添加缓存破坏参数
    const newUrl = window.location.href + 
        (window.location.href.includes('?') ? '&' : '?') + `upd=${Date.now()}`;
    window.location.replace(newUrl);
};

方案3：后端响应头配合（需要Apache调整） #

让Apache代理在切换环境后，给CSS/JS等静态资源返回强缓存失效的响应头：

• Cache-Control: no-cache, no-store, must-revalidate
• Pragma: no-cache
• Expires: 0
  此方案无需前端额外代码，但需要后端配置支持，确保浏览器每次都主动请求最新资源。

原有代码失效原因 #

你之前的代码同时执行了reload(true)、页面跳转和XHR请求，这些操作互相冲突，浏览器只会执行第一个触发的跳转；且Chrome已废弃reload(true)的强制刷新逻辑，导致缓存无法被绕过。

内容的提问来源于stack exchange，提问作者Powermaster Prime