如何在Service Worker内部获取自身相关元数据与URL

无需通过postMessage从主线程传入元数据，Service Worker 执行上下文原生支持直接读取所需信息，完全可满足内部路由逻辑开发需求。

可直接读取的核心属性（全兼容所有支持SW的浏览器） #

• 自身脚本路径相关：直接读取全局作用域下的标准self.location对象，用法与页面端window.location完全一致
  • self.location.href：当前Service Worker脚本的完整URL
  • self.location.pathname：当前Service Worker脚本的路径段（即你需要的自身路径）
  • self.location.origin：注册该Service Worker的站点源地址（站点根URL）
• SW管控作用域：读取self.registration.scope，返回当前SW负责拦截处理请求的作用域路径，实现内部路由时该属性的使用频率高于自身脚本路径
• 当前SW实例属性：读取self.serviceWorker可直接拿到当前运行中SW实例的运行状态、脚本地址等原生信息

代码示例 #

// 以下代码可直接在Service Worker脚本顶层作用域执行
// 获取自身脚本完整URL
const swSelfFullUrl = self.location.href;
// 获取自身脚本路径
const swSelfPath = self.location.pathname;
// 获取所属站点源地址
const siteOrigin = self.location.origin;
// 获取SW管控的作用域范围
const swControlScope = self.registration.scope;

// 路由逻辑参考示例
self.addEventListener('fetch', (event) => {
  const requestPath = new URL(event.request.url).pathname;
  if (requestPath.startsWith(`${swControlScope}static/`)) {
    // 匹配静态资源路径走缓存优先策略
  }
});

特殊信息获取说明 #

Service Worker 规范未原生暴露实例创建时间、自定义ID这类非通用元数据，如果业务逻辑确实需要这类信息，可在SW注册完成后由主线程通过postMessage传入，也可在SW的install生命周期回调中将这类元数据存入IndexedDB或Cache API，后续运行时直接读取即可。

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