Is it possible to intercept and cache WebSocket messages in a Service Worker like all the examples do for normal HTTP requests?

Question

I know you can create WebSocket connections from within a Service Worker itself; my question is more whether or not you can use a WebSocket from your app as normal and have the Service Worker intercept / cache WebSocket requests just like it can do for normal HTTP fetch requests?

Here's an example of intercepting and caching a normal HTTP request from a Service Worker.

self.addEventListener('fetch', function(event) {
  // If a match isn't found in the cache, the response
  // will look like a connection error
  event.respondWith(caches.match(event.request));
});

How would I setup the Service Worker if all of my requests were via WebSockets?

Answer 1

It's not possible for a service worker to intercept Web Socket traffic.

The service worker's fetch event is triggered only for controlled clients' HTTPS requests, and the message event is triggered only for postMessage() requests from clients.

While there is an HTTP handshake when initiating a Web Socket connection, that handshake does not trigger a fetch handler, and neither does the actual traffic sent once the connection has been established.