iOS 16.4下Service Worker注册报错‘Scope Url应始于脚本URL’原因排查

问题场景 #

• 操作系统：iOS 16.4
• 注册代码：navigator.serviceWorker.register('service-worker.js', { scope: '/' })
• 已配置响应头：Service-Worker-Allowed: '/'
• Service Worker 部署地址：https://www.mywebsite.com/dist/app/service-worker.js
• 异常仅出现在iOS 16.4，Android 13、Windows 10（Chrome）环境下无报错
• Manifest配置：scope设为"/"，start_url设为"/dist/app/index.html"

疑问：为何iOS会抛出「Scope Url should start with the given Script Url」错误，其他环境正常？

WebKit 抛出异常的源码 #

ResourceError ServiceWorkerJob::validateServiceWorkerResponse(const ServiceWorkerJobData& jobData, const ResourceResponse& response)
{
    // Extract a MIME type from the response's header list. If this MIME type (ignoring parameters) is not a JavaScript MIME type, then:
    if (!MIMETypeRegistry::isSupportedJavaScriptMIMEType(response.mimeType()))
        return { errorDomainWebKitInternal, 0, response.url(), "MIME Type is not a JavaScript MIME type"_s };

    auto serviceWorkerAllowed = response.httpHeaderField(HTTPHeaderName::ServiceWorkerAllowed);
    String maxScopeString;
    if (serviceWorkerAllowed.isNull()) {
        auto path = jobData.scriptURL.path();
        // Last part of the path is the script's filename.
        maxScopeString = path.left(path.reverseFind('/') + 1).toString();
    } else {
        auto maxScope = URL(jobData.scriptURL, serviceWorkerAllowed);
        if (SecurityOrigin::create(maxScope)->isSameOriginAs(SecurityOrigin::create(jobData.scriptURL)))
            maxScopeString = maxScope.path().toString();
    }

    auto scopeString = jobData.scopeURL.path();
    if (maxScopeString.isNull() || !scopeString.startsWith(maxScopeString))
        return { errorDomainWebKitInternal, 0, response.url(), "Scope URL should start with the given script URL"_s };

    return { };
}

更新内容 #

• Windows 10 Chrome环境注册成功后，探测到的参数：
  • Script URL：https://www.mywebsite.com/dist/app/service-worker.js
  • Scope：https://www.mywebsite.com/
    但无法获取iOS 16.4下的实际Script URL和Scope值
• 尝试硬编码上述Chrome环境中的参数（含/不含末尾斜杠均测试），iOS仍报错

问题分析与排查方向 #

从WebKit源码逻辑来看，报错触发点是请求的Scope路径未以允许的最大Scope路径开头，结合你的场景，可能的原因如下：

1. Service-Worker-Allowed响应头处理差异 #

WebKit对Service-Worker-Allowed头的解析可能存在细节差异：

• 检查响应头是否存在多余空格、换行或编码问题（比如实际返回的是' /'而非'/'）
• 确认响应头是否正确关联到service-worker.js的请求，而非页面或其他资源

2. 同源检查失败导致maxScopeString为空 #

源码中，当设置Service-Worker-Allowed后，会先验证maxScope与脚本URL的同源性，如果同源检查不通过，maxScopeString会被设为null，直接触发报错：

• 排查脚本请求是否存在重定向（比如HTTP转HTTPS、域名跳转），WebKit可能会用跳转后的URL作为jobData.scriptURL，导致origin与maxScope不一致
• 确认Service-Worker-Allowed生成的maxScope协议、域名、端口与脚本URL完全一致

3. URL路径解析的细微差异 #

Chrome与WebKit的URL解析逻辑有区别：

• 尝试用绝对路径注册脚本：navigator.serviceWorker.register('/dist/app/service-worker.js', { scope: '/' })，避免相对路径解析带来的差异
• 测试将Service-Worker-Allowed设为完整路径'/dist/app/'，同时把注册Scope改为'/dist/app/'，验证是否能正常注册，再逐步扩大Scope范围

4. Manifest配置的联动影响 #

WebKit可能会将Manifest的scope与Service Worker的Scope做联动校验，而Chrome没有这个限制：

• 尝试暂时移除Manifest的scope配置，或者将其改为与Service Worker默认Scope一致的'/dist/app/'，测试是否能注册成功

建议的排查步骤 #

1. 用Safari开发者工具抓包，查看service-worker.js请求的响应头，确认Service-Worker-Allowed的实际值
2. 检查脚本请求是否存在3xx重定向，确保最终返回脚本的URL与部署地址一致
3. 改用绝对路径注册脚本，同时保持Service-Worker-Allowed: '/'，测试iOS环境是否正常
4. 缩小Scope范围到脚本所在目录，验证基础注册流程是否正常

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