student-client/serviceWorkerAppend.js

/** append by ecs */
// 以下为学生端添加内容

self.addEventListener("fetch", event => {
  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async function() {
      // console.log("fetch intercepted");
      // Try to get the response from a cache.
      const cachedResponse = await caches.match(event.request);
      // Return it if we found one.
      if (cachedResponse) {
        console.log("cache res", event.request.url);
        return cachedResponse;
      }

      if (
        event.request.url.startsWith(
          "https://ecs-test-static.qmth.com.cn/comm-ques-bank/dev/audio"
        ) ||
        event.request.url.startsWith(
          "https://ecs-static.qmth.com.cn/comm-ques-bank/prod/audio/"
        )
      ) {
        console.log("fetch audio intercept, try to load all");
        const res = await fetch(event.request.url);

        const reader = res.body.getReader();

        // Step 2: get total length
        const contentLength = +res.headers.get("Content-Length");
        // console.log("content-length", contentLength);
        // self.sessionStorage.setItem("test-sw", "1");
        // self.postMessage({
        //   url: event.request.url,
        //   progress: 1,
        // });

        // self.addEventListener('message', function(event){
        //   console.log("SW Received Message: " + event.data);
        // console.log(event);
        // event.ports[0].postMessage("SW Says 'Hello back!'");
        // });

        // Step 3: read the data
        let receivedLength = 0; // received that many bytes at the moment
        let chunks = []; // array of received binary chunks (comprises the body)
        while (true) {
          const { done, value } = await reader.read();

          if (done) {
            break;
          }

          chunks.push(value);
          receivedLength += value.length;

          // console.log(`Received ${receivedLength} of ${contentLength}`);

          self.clients.matchAll().then(function(clients) {
            if (clients && clients.length) {
              clients.forEach(function(client) {
                client.postMessage([
                  event.request.url,
                  receivedLength,
                  contentLength,
                ]);
              });
            }
          });
        }

        // Step 4: concatenate chunks into single Uint8Array
        // let chunksAll = new Uint8Array(receivedLength); // (4.1)
        // let position = 0;
        // for (let chunk of chunks) {
        //   chunksAll.set(chunk, position); // (4.2)
        //   position += chunk.length;
        // }

        // const blob = await res.clone().blob();
        // const blob = new Blob([chunksAll.buffer]);
        const blob = new Blob(chunks);
        const responseFinal = new Response(blob, {
          headers: {
            "Content-Type": "audio/mp3",
            "Content-Length": contentLength,
          },
        });

        caches.open("audios").then(function(cache) {
          cache.put(event.request, responseFinal.clone());
        });

        return responseFinal.clone();
      }
      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })()
  );
});