Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro no cacheStorage

Referente ao curso Progressive Web Apps: crie apps offline, no capítulo Carregando imagens do Cache Storage com Service Workers e atividade Usando as imagens do Cache Storage

por BRUNO PAULO
| 628.5k xp | 43 posts
Developer

Galera, já revisei as aulas, limpei o historico do navegador e nada.

Recebo o erro abaixo quando tento cachear as imagens no browser:

Uncaught (in promise) TypeError: Request scheme 'data' is unsupported
    at caches.open.then.cache (Mural.js:33)
    at <anonymous>

Meu código Mural.js

  function preparaCartao(cartao){
        const urlsImagens = Cartao.pegaImagens(cartao)
        urlsImagens.forEach(url => {
          fetch(url).then(resposta => {  
            caches.open("ceep-imagens").then(cache => {       
              cache.put(url, resposta)
              })
          })
        })
4 respostas
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Oi Bruno, você pode colar o código completo? Onde esse caches tá sendo criado?

por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Wanderson, o caches é global, faz parte da Cache Storage API.

Eu consegui reproduzir o erro aqui, já mostro pra vcs o que aconteceu!

solução!
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Consegui reproduzir o erro aqui:

Uncaught (in promise) TypeError: Request scheme 'data' is unsupported
    at caches.open.then.cache (Mural.js:18)
    at <anonymous>

O erro foi lançado na hora que ele tentou executar o cache.put(url, resposta). O erro está na url, mais especificamente no scheme dela; a spec chama de scheme a parte da URL onde geralmente a gente vê a informação de qual protocolo está sendo usado, por exemplo, http://.

No caso, o cache.put está dizendo que não aceita o scheme data. Alguma das URLs de imagens que estamos tentando salvar no Cache Storage é uma Data URL, e segundo a spec, o Cache Storage só aceita URLs com scheme http:// ou https://. O pior é que o erro não disse isso pra gente... coisa pro pessoal do Chrome melhorar!

Como uma DataURL contém toda a informação da imagem nela mesma, não é necessário ter acesso a rede para usá-la como src de uma tag <img>. Assim, não precisamos armazenar nada no Cache Storage. O que podemos fazer é filtrar URLs com scheme data:

const urlsImagens = Cartao
    .pegaImagens(cartao)
    .filter(url => !url.match(/^data/))
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Opa, boa Art! Estou bem por fora dessa API! rsrs valeu por essa! :)