能否将Service Worker代码嵌入应用JS文件完成注册？

你设想的把SW代码直接存在变量里传给register方法的写法行不通。
navigator.serviceWorker.register 接口的第一个参数按照规范必须是一个指向合法JS脚本的URL，浏览器注册SW时会主动发起请求拉取这个URL对应的脚本资源，同时校验资源的MIME类型、作用域权限，不支持直接传入字符串形式的源码。

可落地的实现方案 #

如果想把SW代码整合到主app.js的代码逻辑里，不用单独维护独立的sw.js静态文件，可以选下面两种方法：

• 运行时动态生成Blob URL注册
  把SW的完整源码作为字符串存在app.js的变量中，运行时将字符串转为Blob对象，生成同源的Blob URL后传入register方法即可，代码示例：

  // 此处填入原本sw.js中的全部代码，注意转义字符串内的反引号、${}等特殊字符
  const swSourceCode = `
    self.addEventListener('install', event => {
      self.skipWaiting();
      // 自定义install逻辑
    });
  
    self.addEventListener('activate', event => {
      event.waitUntil(self.clients.claim());
      // 自定义activate逻辑
    });
  
    self.addEventListener('fetch', event => {
      // 自定义请求拦截逻辑
    });
  `;
  
  // 生成Blob格式的SW地址
  const swBlob = new Blob([swSourceCode], { type: 'application/javascript' });
  const swBlobUrl = URL.createObjectURL(swBlob);
  
  // 正常注册即可
  navigator.serviceWorker.register(swBlobUrl, { scope: '/' })
    .then(registration => {
      console.log('Service Worker 注册成功', registration);
    })
    .catch(error => {
      console.error('Service Worker 注册失败', error);
    });
  

  注意这个方案的局限性：Blob URL生成的SW默认继承当前页面的作用域，部分老旧浏览器不支持Blob类型的SW注册，如果SW内部用importScripts引入外部脚本，必须保证引入路径可正常访问。另外不要尝试用Data URL注册SW，浏览器安全策略明确禁止这种用法，会直接报错。
• 构建阶段自动产出SW文件
  这是生产环境最推荐的方案。你可以直接把SW的业务逻辑写在app.js同目录的源码文件中，通过前端构建工具的能力，在打包阶段自动把SW代码编译、输出为独立的sw.js产物到静态资源目录，不需要你手动维护部署路径下的sw.js文件，开发时完全可以把SW逻辑和主应用代码放在同一个项目源码目录里管理，没有任何兼容性问题。

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