{"id":1527,"date":"2024-09-05T15:18:24","date_gmt":"2024-09-05T18:18:24","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1527"},"modified":"2025-11-24T12:53:09","modified_gmt":"2025-11-24T15:53:09","slug":"pwa-assets-e-dados","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/pwa-assets-e-dados\/","title":{"rendered":"PWA Assets e Dados"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

PWA Assets e Dados<\/strong>: A chave para o desempenho e a funcionalidade offline<\/em> de um Progressive Web App (PWA)<\/strong> reside no gerenciamento inteligente de seus recursos (assets) e dados. Um PWA deve saber o que armazenar, onde armazenar e qual estrat\u00e9gia usar para carregar esses recursos rapidamente, mesmo com a aus\u00eancia de rede.<\/p>\n\n\n\n

Este gerenciamento \u00e9 poss\u00edvel gra\u00e7as ao Service Worker<\/strong> e \u00e0s APIs de armazenamento modernas do navegador.<\/p>\n\n\n\n

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

1. \ud83d\udcc2 Onde os Dados Residem no PWA<\/h2>\n\n\n\n

Um PWA utiliza uma combina\u00e7\u00e3o de \u00e1reas de armazenamento do lado do cliente (navegador) para diferentes prop\u00f3sitos:<\/p>\n\n\n\n

Armazenamento<\/strong><\/td>Tipo de Dado<\/strong><\/td>Uso Comum<\/strong><\/td><\/tr><\/thead>
Cache API<\/strong><\/td>Assets est\u00e1ticos (HTML, CSS, JS, Imagens, Fontes).<\/td>Principal:<\/strong> Controlado pelo Service Worker para habilitar o funcionamento offline<\/em>.<\/td><\/tr>
IndexedDB<\/strong><\/td>Grandes volumes de dados estruturados (JSON, dados de usu\u00e1rios).<\/td>Banco de dados NoSQL do navegador. Ideal para salvar dados de aplicativos complexos.<\/td><\/tr>
Local\/Session Storage<\/strong><\/td>Dados simples e pequenos (Prefer\u00eancias, Token de sess\u00e3o).<\/td>Armazenamento de chave-valor. N\u00e3o<\/strong> deve ser usado para ativos cr\u00edticos ou grandes volumes de dados.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Foco:<\/strong> A Cache API<\/strong> (gerenciada pelo Service Worker) \u00e9 a ferramenta fundamental para o desempenho e o modo offline<\/em> do PWA.<\/p>\n<\/blockquote>\n\n\n\n

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

2. \ud83d\udc77 Service Workers: O Gerenciador de Assets<\/h2>\n\n\n\n

O Service Worker (SW)<\/strong> \u00e9 o componente que opera como um proxy<\/em> program\u00e1vel entre a rede e o navegador. Ele n\u00e3o tem acesso direto \u00e0 interface do usu\u00e1rio (DOM), mas controla as requisi\u00e7\u00f5es, tornando a aplica\u00e7\u00e3o confi\u00e1vel<\/strong>.<\/p>\n\n\n\n

Fun\u00e7\u00f5es Essenciais do SW:<\/h3>\n\n\n\n
    \n
  1. Interceptar Requisi\u00e7\u00f5es:<\/strong> Ele escuta o evento fetch<\/code> e decide se o recurso solicitado deve vir do cache ou da rede.<\/li>\n\n\n\n
  2. Gerenciar o Cache:<\/strong> Utiliza a Cache API para salvar e remover recursos, geralmente durante o ciclo de vida do SW (install<\/code>, activate<\/code>).<\/li>\n\n\n\n
  3. Notifica\u00e7\u00f5es Push:<\/strong> Habilita a comunica\u00e7\u00e3o com o usu\u00e1rio, mesmo quando o aplicativo est\u00e1 fechado.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    3. \ud83d\udea6 Estrat\u00e9gias Comuns de Cache<\/h2>\n\n\n\n

    A estrat\u00e9gia de cache define a ordem em que o Service Worker procura um recurso (Cache vs. Rede). A escolha depende da criticidade e da frequ\u00eancia de atualiza\u00e7\u00e3o do asset.<\/p>\n\n\n\n

    Estrat\u00e9gia<\/strong><\/td>Fluxo de Busca<\/strong><\/td>Uso Ideal<\/strong><\/td><\/tr><\/thead>
    Cache First, Network Fallback<\/strong><\/td>1\u00ba Cache<\/strong> $ —><\/strong> $ 2\u00ba Rede.<\/strong><\/td>Assets est\u00e1ticos<\/strong> (CSS, JS, Imagens, Fontes) que mudam raramente. Prioriza a velocidade.<\/td><\/tr>
    Network First, Cache Fallback<\/strong><\/td>1\u00ba Rede<\/strong> $ —><\/strong> $ 2\u00ba Cache.<\/strong><\/td>Dados din\u00e2micos<\/strong> (APIs) que precisam ser os mais recentes. Prioriza a atualiza\u00e7\u00e3o.<\/td><\/tr>
    Cache Only<\/strong><\/td>Apenas Cache.<\/strong><\/td>Assets que nunca mudam, como o \u00edcone principal ou a p\u00e1gina offline<\/em> est\u00e1tica.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    Exemplo Base para Cache First:<\/h3>\n\n\n\n

    O Service Worker deve pr\u00e9-armazenar os assets cr\u00edticos durante o evento install<\/code> para o modo offline<\/em> funcionar desde o primeiro uso.<\/p>\n\n\n\n

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

    \/\/ service-worker.js\n\nself.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches.open('meu-cache-v1').then((cache) => {\n      \/\/ Adiciona URLs essenciais ao cache\n      return cache.addAll([\n        '\/',\n        '\/index.html',\n        '\/styles.css',\n        '\/app.js',\n        '\/images\/logo.png'\n      ]);\n    })\n  );\n});\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    4. \ud83d\udddc\ufe0f Otimiza\u00e7\u00e3o e Controle de Assets<\/h2>\n\n\n\n
    Para maximizar a performance e a efici\u00eancia do cache, o tamanho e o controle de vers\u00e3o s\u00e3o cruciais.<\/p>\n\n\n\n