iOS及Mac版Safari短时间内大量请求Apache的serviceWorker.js问题

我之前也碰到过这个Safari的service worker异常请求问题，结合Apache日志排查和实际调试经验，给你梳理下情况：

问题现象 #

• iOS和Mac平台的最新版Safari会在1秒内向Apache发送多达40-60次serviceWorker.js文件请求
• 执行日志分析命令后，能看到类似的高频请求记录：

38 access.log.14.gz:my.domain:443 123.456.789.XXX - - [09/Apr/2018:09:15:28 +0200] "GET /serviceWorker.js HTTP/2.0" 304 0 "https://my.domain/serviceWorker.js" "Mozilla/5.0 (Macintosh; Intel Mac OS ...

这里用到的日志分析命令是：

zgrep serviceWorker /var/log/apache/access.log*|uniq -c|sort -n|less

可能的原因 #

这是Safari在service worker生命周期处理上的一个常见兼容性问题，主要有两个触发点：

1. 缓存策略冲突：当serviceWorker.js返回304（未修改）状态码时，Safari的缓存验证逻辑存在异常，会重复发起请求来确认资源的有效性
2. 重复注册逻辑：如果页面代码中多次调用navigator.serviceWorker.register()（比如在多个组件、页面加载钩子中重复执行），会导致浏览器频繁触发资源请求

修复方案 #

1. 调整serviceWorker.js的服务器缓存头 #

给该文件配置更合理的缓存策略，平衡缓存有效性和更新及时性：

• 设置Cache-Control: max-age=60, must-revalidate：让浏览器缓存1分钟，之后必须验证资源是否更新
• 确保服务器返回正确的ETag或Last-Modified响应头，帮助Safari准确判断资源是否有变化，减少不必要的重复请求

2. 优化service worker注册代码 #

确保整个页面生命周期内只执行一次注册操作，避免重复触发请求：

// 用全局变量标记是否已完成注册
let isServiceWorkerRegistered = false;

if ('serviceWorker' in navigator && !isServiceWorkerRegistered) {
    navigator.serviceWorker.register('/serviceWorker.js')
        .then(registration => {
            isServiceWorkerRegistered = true;
            console.log('Service Worker 注册成功');
        })
        .catch(error => {
            console.error('Service Worker 注册失败:', error);
        });
}

3. Safari专属兼容处理 #

可以通过用户代理检测，针对Safari做特殊处理：

• 给Safari设置更长的Cache-Control有效期（比如max-age=300），减少验证请求次数
• 在注册逻辑中增加少量延迟（比如100ms），避免页面加载时的并发请求冲突

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