Add authenticated media support (#1930)

* chore: Bump matrix-js-sdk to 34.4.0

* feat: Authenticated media support

* chore: Use Vite PWA for service worker support

* fix: Fix Vite PWA SW entry point

Forget this. :P

* fix: Also add Nginx rewrite for sw.js

* fix: Correct Nginx rewrite

* fix: Add Netlify redirect for sw.js

Otherwise the generic SPA rewrite to index.html would take effect, breaking Service Worker.

* fix: Account for subpath when regisering service worker

* chore: Correct types

src/sw.ts

@@ -0,0 +1,43 @@
+async function askForAccessToken(client: Client): Promise<string | undefined> {
+  return new Promise((resolve) => {
+    const responseKey = Math.random().toString(36);
+    const listener = (event: ExtendableMessageEvent) => {
+      if (event.data.responseKey !== responseKey) return;
+      resolve(event.data.token);
+      self.removeEventListener('message', listener);
+    };
+    self.addEventListener('message', listener);
+    client.postMessage({ responseKey, type: 'token' });
+  });
+}
+
+function fetchConfig(token?: string): RequestInit | undefined {
+  if (!token) return undefined;
+
+  return {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+}
+
+self.addEventListener('fetch', (event: FetchEvent) => {
+  const { url, method } = event.request;
+  if (method !== 'GET') return;
+  if (
+    !url.includes('/_matrix/client/v1/media/download') &&
+    !url.includes('/_matrix/client/v1/media/thumbnail')
+  ) {
+    return;
+  }
+  event.respondWith(
+    (async (): Promise<Response> => {
+      const client = await clients.get(event.clientId);
+      let token: string | undefined;
+      if (client) token = await askForAccessToken(client);
+
+      // eslint-disable-next-line consistent-return
+      return fetch(url, fetchConfig(token));
+    })()
+  );
+});