1

LastFM API から画像をキャッシュしようとしています。現在、API 応答自体は正常にキャッシュされ、ページは期待どおりに読み込まれますが、画像はありません。

開発者コンソールを見ると、画像の取得に関するいくつかのエラーが表示されます。それらは次のとおりです。

Fetch 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();
    });
  });
}

私は明らかに何か間違ったことをしていますが、それが何であるかを説明するよりも経験豊富な人はいますか?

4

1 に答える 1

2

問題は、Web サイトが HTTPS であるのに対し、画像は HTTP 経由で提供されることです。

現在、混合コンテンツは Service Worker でうまく機能していません: https://github.com/w3c/webappsec/issues/415。

于 2016-03-22T12:31:20.033 に答える