サービスワーカーでAPIエラーを取得する

Question

LastFM APIからイメージをキャッシュしようとしています。今、APIレスポンス自体は正常にキャッシュされ、ページは正常にロードされますが、イメージはありません。

デベロッパーコンソールを見ると、私は画像の取得に関するエラーのカップルを見ることができますし、次のように彼らがしている：

は、APIがhttp://img2-ak.lst.fm/i/u/300x300/a32cb06bb22bc5d10654a5156fe78cf6.pngをロードすることはできません取得します。親ドキュメントページがアンロードされました。

私はサービスマンには非常に新しく、これは私に私の髪を引き裂く（いいえ、文字通りではない）。

私はいくつかのチュートリアルに従っていますが、これは私がこれまでに持っているコードです（無関係なコードは削除されています）。

var CACHE_NAME = 'WELFORDIAN-CACHE-V2'; 
 
var urlsToCache = [ 
 
    'https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=**USERNAME**&api_key=6136000ba0899c52db5ebcee77d4be15&format=json' 
 
]; 
 

 
self.addEventListener('install', function(event) { 
 
    // Perform install steps 
 
    event.waitUntil(
 
    caches.open(CACHE_NAME) 
 
    .then(function(cache) { 
 
     console.log('Opened cache'); 
 
     return cache.addAll(urlsToCache); 
 
    }) 
 
); 
 
}); 
 

 
self.addEventListener('fetch', function(event) { 
 
    var reqURL = new URL(event.request.url); 
 
    if (/lst.fm/.test(reqURL)) { 
 
    event.respondWith(lastFMImageResponse(event.request)); 
 
    } else { 
 
    event.respondWith(
 
     caches.match(event.request).then(function(response) { 
 
     if (response) { 
 
      return response; 
 
     } 
 

 
     var fetchRequest = event.request.clone(); 
 

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

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

 
      return response; 
 
      } 
 
     ); 
 
     }).catch(function(err) { 
 
     return err; 
 
     }) 
 
    ); 
 
    } 
 
}); 
 

 
function lastFMImageResponse(request) { 
 
    return caches.match(request).then(function(response) { 
 
    if (response) { 
 
     return response; 
 
    } 
 
    return fetch(request).then(function(response) { 
 
     caches.open('lfm-images').then(function(cache) { 
 
     cache.put(request, response); 
 
     }); 
 

 
     return response.clone(); 
 
    }); 
 
    }); 
 
}

私は明らかに間違って何かをやっているが、私はそれが何であるかより多くの経験を持つ人を説明することができるよりも？

Answer 1

問題は、あなたのウェブサイトがHTTPSであり、イメージがHTTP経由で提供されていることです。

混在したコンテンツは現在、サービスワーカーとうまく機能しません。https://github.com/w3c/webappsec/issues/415。