javascript ServiceWorker オフラインでmp3ファイルのキャッシュが読み込めない

Question

実現したいこと

ServiceWorkerによるオフラインでのmp3ファイルのキャッシュの読み込みを実現したい

前提

ServiceWorkerによってキャッシュの読み込みは成功しました。
しかしオフラインの状態では、
mp3ファイルのキャッシュの読み込みがエラーになります。
mp3以外のファイルならキャッシュの読み込みは成功します。

発生している問題・エラーメッセージ

The FetchEvent for "<URL>" resulted in a network error response: the promise was rejected.
----------------------------------------------
Uncaught (in promise) TypeError: Failed to fetch at service-worker.js:33
（匿名） @ service-worker.js:33
----------------------------------------------
GET https://xxxxxxxx.com/sound/xxxxxxxx.mp3 net::ERR_FAILED
----------------------------------------------
Uncaught (in promise) DOMException: Failed to load because no supported source was found.

該当のソースコード

self.addEventListener('fetch', (event) => {

  event.respondWith(
    caches.match(event.request)
    .then((response) => {

      if (response) {
        return response;
      }

      let fetchRequest = event.request.clone();

      return fetch(fetchRequest)
        .then((response) => {
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }

          let responseToCache = response.clone();

          caches.open(CACHE_NAME)
            .then((cache) => {
              cache.put(event.request, responseToCache);
            });

          return response;
        });
    })
  );
});

ソースコード

//service-worker.js

var CACHE_VERSION = 'v.1';
var CACHE_NAME = 'XXXXXXXX';
var CASHE_FILES = [
'./index.html',
'./css/xxxxxxxx.css',
'./img/xxxxxxxx.svg',
'./js/xxxxxxxx.js',
'./sound/xxxxxxxx.mp3'
];
 
self.addEventListener('install', function(e) {
	e.waitUntil(
	// キャッシュの登録
	caches.open(CACHE_NAME)
	.then(function(cache) {
	return cache.addAll(CASHE_FILES);
    })
  );
});
 
self.addEventListener('fetch', (event) => {

  event.respondWith(
    caches.match(event.request)
    .then((response) => {

      if (response) {
        return response;
      }

      let fetchRequest = event.request.clone();

      return fetch(fetchRequest)
        .then((response) => {
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }

          let responseToCache = response.clone();

          caches.open(CACHE_NAME)
            .then((cache) => {
              cache.put(event.request, responseToCache);
            });

          return response;
        });
    })
  );
});

試したこと

CASHE_FILES に以下を付加しました。
結果はキャッシュの読み込みがエラーになりました。

.map(path => new URL(path, registration.scope).pathname); 

補足情報（FW/ツールのバージョンなど）

ServiceWorkerの動作確認は以下です。

chrome
バージョン: 114.0.5735.134

Answer 1

この回答はGPT-4による自動生成回答です

オフラインでのmp3ファイルのキャッシュ読み込みに問題がある場合、以下の変更を試してみてください。

1. response.type !== 'basic' の条件を削除するか、mp3ファイルの場合はこの条件を無視するように変更してください。これにより、mp3ファイルのキャッシュが正しく保存されるようになります。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
    .then((response) => {
      if (response) {
        return response;
      }

      let fetchRequest = event.request.clone();

      return fetch(fetchRequest)
        .then((response) => {
          if (!response || response.status !== 200) {
            return response;
          }

          let responseToCache = response.clone();

          caches.open(CACHE_NAME)
            .then((cache) => {
              cache.put(event.request, responseToCache);
            });

          return response;
        });
    })
  );
});

1. キャッシュされたmp3ファイルを使用する際、audio タグの src 属性に URL.createObjectURL() を使用して、Blob URLを設定してみてください。これにより、オフライン状態でもmp3ファイルが正しく再生されるようになります。

fetch('https://xxxxxxxx.com/sound/xxxxxxxx.mp3')
  .then(response => response.blob())
  .then(blob => {
    const audio = document.createElement('audio');
    audio.src = URL.createObjectURL(blob);
    document.body.appendChild(audio);
  });

これらの変更を試して、オフライン状態でのmp3ファイルのキャッシュ読み込みが正常に動作するか確認してください。

Comments

[kokemomo]

ご回答ありがとうございます。
URL.createObjectURL() を使用して、Blob URLを設定したところ
新たにエラーが発生しました。
再度質問させて頂きます。宜しくお願い致します。