fix(service-worker): update service worker to handle seeking better for videos (#60029)

Beanminchild · kirjs · commit 9743bd1317b7 · 2025-06-03T10:56:07.000-04:00
This update ensures that the service worker can handle range requests, allowing video seeking to work correctly when videos are delivered by the service worker. PR Close #60029
diff --git a/packages/examples/service-worker/push/ngsw-worker.js b/packages/examples/service-worker/push/ngsw-worker.js
@@ -3,7 +3,7 @@
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
+ * found in the LICENSE file at https://angular.dev/license.
  */
 
 // Mock `ngsw-worker.js` used for testing the examples.
diff --git a/packages/service-worker/worker/src/driver.ts b/packages/service-worker/worker/src/driver.ts
@@ -209,6 +209,12 @@ export class Driver implements Debuggable, UpdateSource {
       return;
     }
 
+    // Calls range request handler
+    if (req.headers.has('range')) {
+      event.respondWith(this.handleRangeRequest(req));
+      return;
+    }
+
     // The only thing that is served unconditionally is the debug page.
     if (requestUrlObj.path === this.ngswStatePath) {
       // Allow the debugger to handle the request, but don't affect SW state in any other way.
@@ -262,6 +268,63 @@ export class Driver implements Debuggable, UpdateSource {
     event.respondWith(this.handleFetch(event));
   }
 
+  // function to handle Range requests
+  private async handleRangeRequest(req: Request): Promise<Response> {
+    try {
+      const response = await fetch(req);
+      const contentType = response.headers.get('Content-Type');
+
+      // Only apply logic to content that is a video
+      if (!contentType || !contentType.startsWith('video/')) {
+        return response;
+      }
+
+      const rangeHeader = req.headers.get('range');
+      if (!rangeHeader) {
+        return new Response(null, {
+          status: 416,
+          statusText: 'Range Not Satisfiable',
+        });
+      }
+
+      const rangeMatch = /bytes=(\d+)-(\d+)?/.exec(rangeHeader);
+      if (!rangeMatch) {
+        return new Response(null, {
+          status: 416,
+          statusText: 'Range Not Satisfiable',
+        });
+      }
+
+      const start = Number(rangeMatch[1]);
+      const end = rangeMatch[2] ? Number(rangeMatch[2]) : undefined;
+
+      const buffer = await response.arrayBuffer();
+      const contentLength = buffer.byteLength;
+
+      const chunk = buffer.slice(start, end ? end + 1 : contentLength);
+      const chunkLength = chunk.byteLength;
+
+      const headers = new Headers(response.headers);
+      headers.set(
+        'Content-Range',
+        `bytes ${start}-${end ? end : contentLength - 1}/${contentLength}`,
+      );
+      headers.set('Content-Length', chunkLength.toString());
+      headers.set('Accept-Ranges', 'bytes');
+
+      return new Response(chunk, {
+        status: 206,
+        statusText: 'Partial Content',
+        headers: headers,
+      });
+    } catch (error) {
+      return new Response(null, {
+        status: 500,
+        statusText: 'Internal Server Error',
+      });
+    }
+  }
+
   /**
    * The handler for message events.
    */

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`* Copyright Google LLC All Rights Reserved.`
`4`	`4`	`*`
`5`	`5`	`* Use of this source code is governed by an MIT-style license that can be`
`6`		`- * found in the LICENSE file at https://angular.dev/license`
	`6`	`+ * found in the LICENSE file at https://angular.dev/license.`
`7`	`7`	`*/`
`8`	`8`
`9`	`9`	// Mock `ngsw-worker.js` used for testing the examples.