如何让Service Worker控制网站无尾斜杠的根路径页面

方案1：确保Service Worker注册逻辑严谨 #

注册时显式指定scope: '/'，并使用绝对路径加载sw.js，消除浏览器路径解析的潜在差异：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then(reg => console.log('Service Worker 注册成功:', reg))
      .catch(err => console.error('Service Worker 注册失败:', err));
  });
}

即便已设置作用域，显式声明能确保注册范围覆盖根域名下所有路径，避免相对路径引发的异常。

方案2：服务器端重定向统一URL #

将不带斜杠的根域名请求永久重定向到带斜杠版本，从根源上统一访问路径：

• Nginx 配置示例：

server {
  listen 443 ssl;
  server_name xxxxxx.com;
  if ($request_uri = '') {
    return 301 $scheme://$server_name/;
  }
  # 其他业务配置...
}

• Apache .htaccess 配置示例：

RewriteEngine On
RewriteRule ^$ / [R=301,L]

该方式既解决Service Worker控制问题，还能统一URL规范，对SEO更友好。

方案3：在Service Worker的fetch事件中修正请求路径 #

若无法修改服务器配置，可在fetch事件中手动处理不带斜杠的根路径请求：

self.addEventListener('fetch', event => {
  const requestUrl = new URL(event.request.url);
  // 匹配根域名且路径为空的请求
  if (requestUrl.host === self.location.host && requestUrl.pathname === '') {
    const correctedRequest = new Request(
      `${requestUrl.origin}/`,
      { ...event.request }
    );
    event.respondWith(fetch(correctedRequest));
  } else {
    event.respondWith(fetch(event.request));
  }
});

通过拦截并修正请求路径，让不带斜杠的根请求也能被Service Worker正确控制。

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