🧭 Artes do Sul — Documentação PWA (Progressive Web App)

Ambiente de Produção: https://landing.artesdosul.com/
Padrão Técnico: PWA W3C / Web App Manifest 2026 / Service Worker API (Cache Storage + Background Sync)
Identidade Visual: Cyber-Growth & Masterpiece Aesthetic (Ouro Amber #F59E0B & Obsidian #030712)

📌 Sumário Executivo

A landing page Artes do Sul 2026 foi transformada em uma Progressive Web App (PWA) de alto desempenho e fidelidade visual, permitindo instalação nativa em Android, iOS, macOS, Windows e Linux, funcionamento resiliente offline e carregamento instantâneo via estratégias avançadas de cache.

🎨 1. Catálogo e Engenharia de Ícones

Todos os ícones foram gerados a partir do logotipo original assets/img/logo-compass.png através do script automatizado generate_icons.py, respeitando as zonas seguras (Safe Zones) e especificações de cada plataforma:

Arquivo Dimensão Finalidade / Plataforma Formato / Características
favicon.ico 16x16, 32x32, 48x48 Navegadores legados & Desktop Tabs Formato ICO multi-resolução
favicon-16x16.png 16x16 Abas compactas e marcadores PNG transparente
favicon-32x32.png 32x32 Abas de alta densidade Retina PNG transparente
favicon-48x48.png 48x48 Atalhos e bookmarks desktop PNG transparente
apple-touch-icon.png 180x180 iOS Safari / iPadOS Home Screen Fundo Obsidian #030712 + Safe Zone 76%
icon-192x192.png 192x192 Android PWA Launcher & Splash Screen PNG padrão (purpose: any)
icon-512x512.png 512x512 Android Hi-Res Splash & App Stores PNG padrão (purpose: any)
icon-maskable-192x192.png 192x192 Android Adaptive Icons Fundo Obsidian + Safe Zone 68% (purpose: maskable)
icon-maskable-512x512.png 512x512 Android Adaptive Icons (Telas QHD/4K) Fundo Obsidian + Safe Zone 68% (purpose: maskable)
mstile-150x150.png 150x150 Windows Start Menu / Edge Live Tiles Fundo Obsidian #030712 + Safe Zone 70%
badge-72x72.png 72x72 Notificações Push Web PNG monocromático / transparente

⚙️ 2. Arquitetura do site.webmanifest & manifest.json

O manifesto foi configurado para máxima compatibilidade com navegadores modernos:

  • Identificador Único (id): https://landing.artesdosul.com/
  • Modo de Exibição: standalone (com suporte a window-controls-overlay)
  • Cores Oficiais:
    • theme_color: #F59E0B (Âmbar Dourado Artes do Sul)
    • background_color: #030712 (Obsidiana Profundo)
  • Atalhos de Acesso Rápido (shortcuts):
    1. Serviços Digitais (#servicos)
    2. Portfólio TOP 20 (#portfolio)
    3. Simulador de Projeto (#simulador)
    4. Falar no WhatsApp (Canal direto com o Diretor de Criação)

⚡ 3. Estratégia do Service Worker (sw.js)

O Service Worker implementa estratégias híbridas otimizadas:

flowchart TD
    Req[Requisição do Navegador] --> Type{Tipo de Recurso?}
    
    Type -->|Navegação HTML| NetFirst[Network First]
    NetFirst -->|Sucesso| UpdateCache[Atualiza Cache Estático]
    NetFirst -->|Offline| OfflineHTML[Serve index.html em Cache]
    
    Type -->|Assets Locais CSS/JS/IMG| SWR[Stale While Revalidate]
    SWR --> ServeCached[Serve Instantâneo do Cache]
    SWR --> FetchBG[Busca Versão Nova em Background]
    
    Type -->|CDNs Externos Fonts/Lucide/Tailwind| RuntimeCache[Runtime Cache-First]
    RuntimeCache --> CheckCache{Está no Cache?}
    CheckCache -->|Sim| ReturnCDN[Retorna Cache]
    CheckCache -->|Não| FetchCDN[Busca CDN e Salva no Runtime Cache]

Principais Recursos:

  • Pre-caching Inteligente: Carrega na instalação todos os assets essenciais para inicialização imediata.
  • Cache Lifecycle: Limpeza automática de caches obsoletos na ativação (ads-static-v1.0.0 e ads-runtime-v1.0.0).
  • Resiliência Offline Total: A aplicação funciona perfeitamente sem conectividade com a internet.

📱 4. Experiência de Instalação (UX)

  1. Banner Flutuante Cyber-Growth:
    • Componente nativo em glassmorphism no canto inferior com ícone 3D e botão Instalar.
    • Integração com o evento nativo do navegador beforeinstallprompt.
    • Persistência em localStorage para não incomodar o usuário caso o banner seja dispensado.
  2. Instalação no iOS (Safari):
    • Suporte completo com <meta name="apple-mobile-web-app-capable" content="yes"> e ícones apple-touch-icon.
    • Usuários de iPhone/iPad podem adicionar à tela de início através do menu Compartilhar -> Adicionar à Tela de Início.
  3. Instalação no Desktop (Chrome/Edge/Brave):
    • Ícone nativo de instalação na barra de endereços (Omnibox) e integração com o menu Iniciar do Windows (browserconfig.xml).

🛠️ 5. Como Regenerar Ícones no Futuro

Caso o logotipo mestre assets/img/logo-compass.png seja alterado, basta executar o script:

python generate_icons.py

O script recalculará automaticamente os canais alfa, anti-aliasing com interpolação LANCZOS, gradientes de fundo e safe zones para todos os 11 formatos.

🔍 6. Estrutura de SEO Técnico & Rich Snippets

A landing page possui otimização estrutural de ponta a ponta para ranqueamento no Google e motores de busca generativos (GEO):

  1. Dados Estruturados Schema.org (JSON-LD):
    • WebSite: Metadados do portal e editor.
    • Organization & ProfessionalService: Entidade institucional, endereço geolocalizado (Bombinhas, SC), faixa de preço, catálogo de serviços e redes oficiais.
    • BreadcrumbList: Rastro de navegação estruturado.
    • FAQPage: Perguntas e respostas formatadas para elegibilidade de rich snippets de FAQ diretamente na SERP do Google.
  2. Arquivos de Rastreamento:
    • robots.txt: Regras de permissão para indexadores e referência ao sitemap.
    • sitemap.xml: Mapa com URLs canônicas, prioridades e metadados de imagem (image:image).
  3. Core Web Vitals:
    • fetchpriority="high" no Hero para otimizar LCP (< 0.8s).
    • Dimensões explícitas (width e height) para eliminar oscilações de layout (CLS = 0.00).
    • loading="lazy" e decoding="async" em todas as imagens do portfólio.
  4. Metadados Sociais & Open Graph:
    • Imagem de alta resolução 1200x630px com og:image:width, og:image:height e twitter:card="summary_large_image".

🚀 7. Checklist de Validação & Produção

  • Ícones em todos os tamanhos (16px até 512px, any e maskable)
  • site.webmanifest e manifest.json com validação W3C
  • browserconfig.xml configurado
  • Meta tags Apple Touch e Open Graph completas
  • Service Worker registrado e ativo com estratégias híbridas
  • Banner de instalação com animação glassmorphism
  • Suporte a navegação offline
  • Canonical URL apontando para https://landing.artesdosul.com/
  • robots.txt e sitemap.xml com extensão de imagens
  • Schema.org JSON-LD (WebSite, ProfessionalService, BreadcrumbList, FAQPage)
  • Seção interativa de Perguntas Frequentes (FAQ) integrada