如何使WKWebView可靠加载后端更新后的CSS文件？

这个坑我之前也踩过！核心原因就是WKWebView默认会缓存CSS这类静态资源，哪怕你服务器上的文件更新了，App还是会优先读本地缓存的旧版本——卸载重装能生效就是因为清空了本地缓存。你试的reloadFromOrigin()偶尔有用，是因为它会参考服务器返回的缓存控制头，如果缓存时间没到期，还是会用本地缓存，所以稳定性很差。下面给你几个靠谱的解决办法，从调试到线上都适用：

1. 调试阶段：彻底禁用缓存（简单粗暴） #

如果是开发测试的时候，想每次都加载最新的CSS，可以直接给请求设置忽略缓存的策略：

// 初始化WKWebView时的配置
let webConfig = WKWebViewConfiguration()
// 可选：开启开发者工具，方便查看缓存情况
webConfig.preferences.setValue(true, forKey: "developerExtrasEnabled")

// 加载请求时设置缓存策略
let targetURL = URL(string: "你的页面地址")!
let request = URLRequest(
    url: targetURL,
    cachePolicy: .reloadIgnoringLocalAndRemoteCacheData,
    timeoutInterval: 15
)
webView.load(request)

这个方法会完全绕过所有缓存，每次都从服务器拉最新资源，但线上环境别用，会拖慢加载速度。

2. 线上环境：针对性控制CSS缓存（推荐） #

不用全局禁用缓存，只对CSS文件强制刷新，其他资源正常用缓存平衡性能。可以通过WKNavigationDelegate拦截请求，修改CSS文件的缓存策略：

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    guard let requestURL = navigationAction.request.url else {
        decisionHandler(.allow)
        return
    }

    // 判断请求的是CSS文件
    if requestURL.pathExtension.lowercased() == "css" {
        var updatedRequest = URLRequest(url: requestURL)
        // 忽略本地缓存，强制从服务器拉取最新版本
        updatedRequest.cachePolicy = .reloadIgnoringLocalCacheData
        webView.load(updatedRequest)
        decisionHandler(.cancel) // 取消原来的请求，用我们修改后的请求
    } else {
        decisionHandler(.allow) // 其他资源正常使用缓存策略
    }
}

注意要先给webView设置navigationDelegate哦，不然这个方法不会被调用。

3. 根源解决：服务器端配置缓存控制（最佳实践） #

这个是最省心的方案，前端和App几乎不用改，让后端同事给CSS文件的响应头设置合适的缓存规则：

• 调试阶段：设置 Cache-Control: no-cache, no-store，禁止任何缓存
• 线上阶段：设置 Cache-Control: max-age=3600（比如缓存1小时），同时给CSS文件名加版本号/哈希值，比如把style.css改成style.v2.css，每次更新CSS就换个版本号。
  这样WKWebView会自动识别新文件名，直接加载最新资源，既保证了缓存性能，又不会出现更新不及时的问题，这也是行业通用的做法。

4. 主动触发：手动清除WKWebView缓存 #

如果需要给用户提供“刷新缓存”的功能，可以调用这个方法清空所有缓存数据：

func clearWebViewCache() {
    let dataStore = WKWebsiteDataStore.default()
    dataStore.fetchDataRecords(ofTypes: WKWebsiteDataStore.allWebsiteDataTypes()) { records in
        dataStore.removeData(ofTypes: WKWebsiteDataStore.allWebsiteDataTypes(), for: records) {
            print("缓存已清除，重新加载页面")
            DispatchQueue.main.async {
                self.webView.reload()
            }
        }
    }
}

这个方法会清除所有缓存（包括Cookie、本地存储等），所以别频繁调用，适合用户主动触发的场景。

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