{"id":1535,"date":"2024-09-11T11:41:51","date_gmt":"2024-09-11T14:41:51","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1535"},"modified":"2025-11-25T16:07:43","modified_gmt":"2025-11-25T19:07:43","slug":"cache-pwa","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/cache-pwa\/","title":{"rendered":"Cache PWA"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Cache PWA<\/strong>: O armazenamento em cache<\/strong> \u00e9 o que transforma um website comum em um Progressive Web App (PWA)<\/strong> confi\u00e1vel. Em vez de depender exclusivamente da rede, o PWA salva c\u00f3pias de seus recursos (assets) diretamente no dispositivo do usu\u00e1rio.<\/p>\n\n\n\n

Essa capacidade \u00e9 fundamental para alcan\u00e7ar o princ\u00edpio de Confiabilidade (Reliable<\/em>)<\/strong>, garantindo que o aplicativo carregue e funcione instantaneamente<\/em>, mesmo com a conex\u00e3o ausente ou inst\u00e1vel (o chamado offline-first<\/em>).<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. \ud83d\udce6 Fundamentos da Cache API<\/h2>\n\n\n\n

A API utilizada pelo Service Worker para gerenciar recursos chama-se Cache API<\/strong>. Ela \u00e9 um armazenamento chave-valor onde a chave<\/strong> \u00e9 o objeto Request<\/code> (ou URL) e o valor<\/strong> \u00e9 o objeto Response<\/code>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. Quando o Cache Ocorre<\/h3>\n\n\n\n

Existem dois momentos principais para armazenar recursos em cache:<\/p>\n\n\n\n

    \n
  1. Pr\u00e9-caching (Evento install<\/code>):<\/strong> Armazenar ativos est\u00e1ticos cr\u00edticos imediatamente ap\u00f3s a instala\u00e7\u00e3o do Service Worker. Essencial para o “App Shell” (offline shell<\/em>).<\/li>\n\n\n\n
  2. Runtime Caching (Evento fetch<\/code>):<\/strong> Armazenar ativos sob demanda, conforme o usu\u00e1rio os solicita pela primeira vez. Ideal para imagens din\u00e2micas ou p\u00e1ginas que n\u00e3o s\u00e3o cr\u00edticas no in\u00edcio.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    B. Download e Armazenamento<\/h3>\n\n\n\n

    O Service Worker gerencia a Cache API atrav\u00e9s de m\u00e9todos expostos no objeto global caches<\/code>:<\/p>\n\n\n\n

    M\u00e9todo<\/strong><\/td>Prop\u00f3sito<\/strong><\/td><\/tr><\/thead>
    caches.open(cacheName)<\/code><\/td>Abre (ou cria) um cache com um nome espec\u00edfico (ex: 'v1-assets'<\/code>).<\/td><\/tr>
    cache.addAll(urls)<\/code><\/td>Faz o download<\/em> de uma lista de URLs e armazena as respostas no cache aberto.<\/td><\/tr>
    cache.match(request)<\/code><\/td>Procura uma Request<\/code> espec\u00edfica dentro do cache.<\/td><\/tr>
    cache.delete(request)<\/code><\/td>Remove um recurso espec\u00edfico do cache.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    2. \ud83d\udc77 Implementando o Pr\u00e9-caching no Service Worker<\/h2>\n\n\n\n

    O pr\u00e9-caching \u00e9 a t\u00e9cnica que garante que os recursos b\u00e1sicos (o “esqueleto” do aplicativo) estejam dispon\u00edveis desde o primeiro uso offline<\/em>.<\/p>\n\n\n\n

    JavaScript<\/p>\n\n\n\n

    \/\/ service-worker.js\n\nconst CACHE_STATIC_NAME = 'static-v1'; \nconst OFFLINE_URLS = [\n  '\/',\n  '\/index.html',\n  '\/styles.css',\n  '\/script.js'\n];\n\nself.addEventListener('install', (event) => {\n  \/\/ event.waitUntil garante que o SW n\u00e3o ative at\u00e9 que o cache esteja preenchido\n  event.waitUntil(\n    caches.open(CACHE_STATIC_NAME)\n      .then((cache) => {\n        console.log('Cache preenchido com App Shell.');\n        \/\/ Faz o download e armazena todos os recursos da lista\n        return cache.addAll(OFFLINE_URLS); \n      })\n  );\n});\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    3. \ud83d\udd04 Atualizando e Removendo o Cache<\/h2>\n\n\n\n
    O cache n\u00e3o deve ser est\u00e1tico. A maneira mais segura de garantir que os usu\u00e1rios obtenham a vers\u00e3o mais recente dos recursos \u00e9 por meio do Controle de Vers\u00e3o do Cache<\/strong>.<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    A. Atualiza\u00e7\u00e3o do Cache (Evento activate<\/code>)<\/h3>\n\n\n\n
    A melhor pr\u00e1tica para atualiza\u00e7\u00e3o \u00e9 criar um novo cache<\/strong> com um novo nome (v2<\/code>, v3<\/code>, etc.) no evento install<\/code>, e usar o evento activate<\/code> para deletar os caches antigos.<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    \/\/ service-worker.js\n\nconst CACHE_STATIC_NAME = 'static-v2'; \/\/ NOME FOI ALTERADO para for\u00e7ar atualiza\u00e7\u00e3o\n\nself.addEventListener('activate', (event) => {\n  event.waitUntil(\n    caches.keys().then(cacheNames => {\n      return Promise.all(\n        cacheNames.map(cacheName => {\n          \/\/ Se o nome do cache N\u00c3O for o nome atual (v2), ele \u00e9 antigo e deve ser deletado\n          if (cacheName !== CACHE_STATIC_NAME) {\n            console.log('Deletando cache antigo:', cacheName);\n            return caches.delete(cacheName);\n          }\n        })\n      );\n    })\n  );\n});\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    B. Remo\u00e7\u00e3o de Recursos Espec\u00edficos<\/h3>\n\n\n\n
    Se voc\u00ea precisar remover um \u00fanico recurso (ex: ap\u00f3s a refatora\u00e7\u00e3o), use o m\u00e9todo cache.delete(request)<\/code> no momento apropriado (geralmente durante o activate<\/code> ou o fetch<\/code> para limpeza).<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    4. \ud83d\udee0\ufe0f Depura\u00e7\u00e3o e Inspe\u00e7\u00e3o do Cache<\/h2>\n\n\n\n
    A depura\u00e7\u00e3o \u00e9 feita diretamente nas ferramentas do navegador:<\/p>\n\n\n\n