如何通过JavaScript字符串创建ServiceWorker实例？Blob协议注册报错求解

我在index.html中使用以下脚本尝试注册Service Worker：

<script>
    const serviceWorkerCode = `
          self.addEventListener('fetch', event => {
            console.log('Fetch intercepted!', event.request.url);
            event.respondWith(fetch(event.request));
          });
    `;
    const blob = new Blob([serviceWorkerCode], { type: 'application/javascript' });
    const blobUrl = URL.createObjectURL(blob);
    navigator.serviceWorker.register(blobUrl)
        .then(registration => {
            console.log('Service Worker registered!');
        })
        .catch(error => {
            console.error('Service Worker registration failed:', error);
        });
    URL.revokeObjectURL(blobUrl);
</script>

执行后触发报错：

(index):43 Service Worker registration failed: TypeError: Failed to register a ServiceWorker: The URL protocol of the script ('blob:https://localhost:7128/e50c29d9-330b-41c9-8f5d-615f16120ea6') is not supported.

我判断是Blob协议不兼容ServiceWorker.register方法，想知道如何通过JavaScript字符串激活Service Worker实例。我的最终目标是创建一个包含网站所有内嵌资源的单HTML文件，由Service Worker在请求时提供这些资源，其他可行方案也欢迎推荐。

方案1：使用Data URI注册Service Worker #

浏览器支持通过data:协议URL注册Service Worker，你可以把SW代码转成Base64编码的Data URI来实现：

<script>
    const serviceWorkerCode = `
          self.addEventListener('fetch', event => {
            console.log('Fetch intercepted!', event.request.url);
            // 替换为你的资源响应逻辑，比如从内嵌资源或缓存返回
            event.respondWith(fetch(event.request));
          });
    `;
    // 将SW代码转为Base64编码的Data URI
    const dataUrl = `data:application/javascript;base64,${btoa(serviceWorkerCode)}`;
    
    navigator.serviceWorker.register(dataUrl)
        .then(registration => {
            console.log('Service Worker registered!');
        })
        .catch(error => {
            console.error('Service Worker registration failed:', error);
        });
</script>

注：部分浏览器的严格安全策略可能限制这种方式，但大多数常规场景下可以正常运行。

方案2：单HTML文件复用为Service Worker脚本 #

让同一个HTML文件同时承担页面和SW脚本的角色，通过查询参数区分执行逻辑，完全不需要额外文件：

<script>
// 注册当前页面为Service Worker，通过?sw参数标记SW模式
navigator.serviceWorker.register(window.location.href + '?sw')
  .then(reg => console.log('Service Worker 注册成功'))
  .catch(err => console.error('注册失败:', err));
</script>

<!-- 当页面以?sw参数加载时，执行Service Worker逻辑 -->
<script>
if (window.location.search.includes('sw')) {
  // Service Worker核心逻辑
  self.addEventListener('fetch', event => {
    console.log('请求已拦截:', event.request.url);
    // 这里可以添加从HTML内嵌资源返回内容的逻辑
    event.respondWith(fetch(event.request));
  });
  // 停止页面渲染，仅作为SW脚本运行
  document.close();
}
</script>

这种方式完美适配单HTML文件的需求，所有资源和逻辑都集中在一个文件内。

方案3：内嵌资源直接引用（无需Service Worker） #

如果你的核心需求只是单HTML文件包含所有资源，也可以跳过Service Worker，直接将所有静态资源（CSS、图片、JS等）转为Data URI内嵌到HTML中，比如：

<!-- 内嵌图片 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
<!-- 内嵌CSS -->
<style>
/* 直接写CSS代码，或转成Data URI引用 */
</style>

这种方式实现简单，无需处理SW的注册问题，适合资源量不大的单页应用。

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