Início / Hub WordPress / PWA Studio

install_mobile PWA Studio MJCR • Arquitetura & Plugin Sob Medida

Transforme seu Site em Aplicativo Instalável

Não aplique um PWA genérico. Nossa ferramenta primeiro audita a URL do seu site, calcula o PWA Readiness Score (0-100), identifica o modelo do negócio e gera um micro-plugin WordPress sob medida (< 40 KB) com cache inteligente e sem bloatware.

speed Diagnóstico Automático 0-100 storefront WooCommerce Safe offline_bolt Offline Fallback folder_zip Micro-Plugin ZIP Pronto

Auditoria Rápida da URL radar

Digite o endereço do seu site para diagnosticar compatibilidade, SSL, viewport e plugins instalados:

radar Auditoria de Prontidão PWA (PWA Readiness Score)

Insira a URL para escanear SSL, responsividade, manifest, service workers e plugins concorrentes.

PWA Readiness Score

-- /100

Aguardando análise

Plataforma: A verificar

Tipo de Negócio: A verificar

Segurança SSL: A verificar

Plugins de Cache: A verificar

Informe a URL acima para receber um diagnóstico baseado no site publicado.

checklist Checklist Transparente da Auditoria

Os critérios, pontos perdidos e correções aparecerão aqui após a análise.

palette Configurador Visual & Identidade do Web App

Defina como o seu aplicativo aparecerá na tela inicial, splash screen e barra de status do celular.

Nome Completo do Aplicativo:

Nome Curto (Tela Inicial):

Descrição do Aplicativo:

Logo e ícones do aplicativo

Envie uma imagem quadrada. O gerador criará favicon, Apple Touch Icon, ícones 192/512 e maskable automaticamente.

Símbolo automático Enviar imagem Usar detectada

A auditoria tentará localizar a logo no cabeçalho e, como alternativa, o favicon.

PNG, JPG ou WebP; mínimo 128×128; máximo 3 MB. Recomendado: 512×512 ou maior.

Screenshots de instalação (opcional)

Adicione até duas telas reais do site. Navegadores compatíveis podem exibi-las na interface enriquecida de instalação.

Tela vertical ou principal Tela horizontal ou secundária

PNG, JPG ou WebP; mínimo 320 px; máximo 5 MB por imagem.

Cor Principal (Theme Color):

A auditoria preencherá a cor encontrada no site.

Cor de Fundo (Splash Screen):

Inicialização e rastreamento

URL inicial no site

Campanha UTM

Adicionar UTM à abertura pelo ícone instalado

Tela offline

Atalhos do aplicativo

Até quatro ações exibidas pelo sistema quando suportadas. Use caminhos internos do WordPress.

A auditoria tentará importar os links mais relevantes do menu principal.

Modo de Exibição (Display):

Orientação de Tela:

Prévia em Smartphone

09:41

wifi battery_full

bolt

MJCR

MJCR WebDEV App

Instale na sua tela inicial.

A versão maskable aplicará margem segura e a cor de fundo selecionada.

bolt

Zona maskable

cached Estratégias de Cache Granulares por Tipo de Conteúdo

O Service Worker do PWA Studio aplica a regra ideal para cada recurso do seu site, evitando conflitos de carrinho e login.

Cache First style

CSS, Fontes e Ícones Locais

Armazena na primeira visita e reutiliza o recurso localmente nas visitas seguintes.

Stale While Revalidate image

Imagens Públicas & Banners

Exibe a imagem do cache imediatamente enquanto atualiza em segundo plano se houver novidade.

Network First article

Páginas Institucionais & Blog

Busca o conteúdo mais recente na rede. Se estiver sem sinal, usa a cópia em cache ou a tela offline.

Network Only (Bloqueio) shopping_cart_checkout

Carrinho, Checkout & Minha Conta

Zero Cache. Todas as requisições passam pela rede real para evitar sessões misturadas ou dados antigos.

Precache Imediato offline_pin

Tela Offline de Fallback

Baixada no momento exato da instalação para garantir que o usuário nunca veja o erro 404 de conexão.

Bypass Seguro admin_panel_settings

Painel wp-admin & REST Nonces

O Service Worker ignora automaticamente o painel de controle e endpoints com segurança de nonce.

Exclusões adicionais de cache

Informe um caminho por linha. As exclusões críticas do WordPress e WooCommerce já são aplicadas automaticamente.

install_mobile Banners de Instalação & Instruções para iPhone / Android

Configure como o visitante será convidado a instalar o aplicativo com instruções nativas para Safari iOS.

phone_iphone

Instalação no iPhone & iPad (iOS)

Modal com instrução visual do Safari

A Apple não permite o disparo automático do prompt de instalação nativo no Safari. Nosso plugin detecta dispositivos iOS e exibe um modal amigável ensinando o usuário a tocar em "Compartilhar" e depois em "Adicionar à Tela de Início".

android

Instalação no Android & Chrome Desktop

Prompt nativo beforeinstallprompt

No Android e no Chrome para Computadores, o evento nativo beforeinstallprompt é interceptado e disparado com um único clique no botão "Instalar", sem poluir a tela do usuário antes da hora.

Regras do convite de instalação

Mensagem do banner

Texto do botão

Atraso (segundos)

Exibir após visitas

Dispensar por dias

Instrução para iPhone/iPad Prompt Android/desktop

Medição de instalação

security Detector de Conflitos & Guia de Migração Limpa

Dois Service Workers concorrentes no mesmo domínio causam instabilidade. Veja como manter seu site 100% limpo.

warning Checklist de Pré-Instalação:

check_circle

1. Desative outros plugins de PWA: Se você já usa SuperPWA ou PWA for WP, desative-os no painel do WordPress antes de ativar o micro-plugin do PWA Studio.

check_circle

2. Limpe o cache do LiteSpeed / WP Rocket / Cloudflare: Após ativar o novo plugin, clique em "Purgar Todo o Cache" para que o novo manifest seja entregue imediatamente aos visitantes.

check_circle

3. Verificação do Escopo: O service worker é limitado automaticamente ao caminho onde o WordPress está instalado, evitando controlar aplicações vizinhas no mesmo domínio.

folder_zip Download do Micro-Plugin WordPress Personalizado (.ZIP)

Seu plugin foi compilado com arquitetura modular, sem CDNs externas e pronto para instalação em 1 clique.

mjcr-pwa-meuapp.zip

Pacote leve • Requer WordPress 5.6 ou superior

Arquivos Incluídos no Pacote:

mjcr-pwa-projeto/
├── mjcr-pwa-projeto.php         (Classe principal e hooks WordPress)
├── includes/
│   ├── class-manifest.php       (Geração do Web App Manifest dinâmico)
│   ├── class-service-worker.php (SW limitado ao escopo do WordPress)
│   ├── class-install-ui.php     (Banners responsivos e modal Safari iOS)
│   ├── class-diagnostics.php    (Status, conflitos e renovação do cache)
│   └── class-analytics.php      (Eventos de rastreamento de instalação)
├── assets/
│   ├── pwa.css                  (Estilização ultraleve < 3KB)
│   ├── pwa.js                   (Gerenciador de instalação e prompts)
│   ├── icons/                   (Favicon, Apple Touch e ícones PWA)
│   └── screenshots/             (Telas opcionais do manifest)
├── templates/
│   └── offline.php              (Página de fallback sem internet)
├── uninstall.php                (Limpeza de opções ao desinstalar)
└── readme.txt                   (Documentação oficial em português)

compare SuperPWA Tradicional vs PWA Studio MJCR

Entenda por que um micro-plugin orientado ao seu negócio entrega mais velocidade e maior conversão.

Recurso / Critério	SuperPWA Tradicional	PWA Studio MJCR
Configuração Inicial	Configuração manual cega dentro do WP	Auditoria prévia da URL com Score 0-100
Estratégia de Cache	Genérica e padronizada	Granular por tipo (WooCommerce, Blog, Membros)
Peso do Código	Plugin volumoso com opções no banco	Micro-plugin estático e ultraleve (< 40 KB)
Instrução para iPhone	Básica ou inexistente	Modal visual passo a passo para Safari iOS
Proteção WooCommerce	Requer add-ons pagos	Exclusão nativa de Cart, Checkout e Nonces

menu_book Tutorial Técnico de Progressive Web App para WordPress

Entenda a arquitetura, configure o cache com segurança e valide a instalação sem comprometer SEO ou sessões dinâmicas.

integration_instructions Tutorial técnico

Como transformar um site WordPress em PWA com segurança

Este guia explica o que é Progressive Web App, quais componentes tornam a experiência instalável e como configurar um PWA para WordPress sem colocar sessões, carrinho ou conteúdo privado no cache.

Conceito Arquitetura Passo a passo SEO e desempenho Validação

O que muda quando um site vira PWA?

Um PWA continua sendo uma aplicação web acessada por URL. A diferença está na camada de recursos: o manifest descreve nome, cores, ícones, atalhos e modo de exibição; o service worker controla requisições dentro de um escopo; e a interface orienta a instalação conforme o navegador. Assim, transformar um site em PWA não significa copiar páginas para um aplicativo separado.

Um aplicativo PWA completo também precisa preservar a navegação normal, responder corretamente sem conexão e atualizar caches sem manter versões antigas indefinidamente. Instalabilidade e confiabilidade são resultados da arquitetura inteira, não apenas da presença de um arquivo manifest.json.

Arquitetura mínima de um PWA confiável

HTTPS e origem seguraService workers exigem contexto seguro. Redirecionamentos, recursos HTTP e erros de certificado devem ser corrigidos antes da instalação.

Web App ManifestDefine identidade, URL inicial, escopo, display, orientação, ícones 192/512, ícone maskable, screenshots e atalhos.

Service workerIntercepta requisições dentro do escopo e aplica uma estratégia explícita. Ele não deve assumir o controle de outras aplicações do domínio.

Fallback e atualizaçãoNavegações sem rede recebem uma resposta útil; caches versionados são renovados sem apagar dados pertencentes a outros sistemas.

Tutorial: gerar e instalar o micro-plugin

1Audite a URL publicada. Confirme HTTPS, viewport, manifest existente, service worker concorrente, cache e tipo de site. A auditoria também tenta reconhecer logo, favicon, cor e links principais.
2Revise a identidade. Use uma imagem quadrada legível e confira favicon, Apple Touch Icon, ícones 192/512 e área segura maskable. Ajuste nome curto, cor do tema e cor de fundo.
3Defina entrada e atalhos. A URL inicial deve existir e permanecer dentro do escopo. Atalhos precisam levar a tarefas frequentes, como loja, artigos, conta ou contato.
4Escolha a estratégia de cache. Recursos locais estáticos podem ser reutilizados; HTML de navegação deve preferir a rede e receber fallback somente quando necessário.
5Gere o ZIP. O gerador compila um plugin para WordPress com manifest, service worker, interface de instalação, diagnóstico e arquivos de identidade.
6Instale e teste. Desative outro plugin PWA, envie o ZIP em Plugins > Adicionar plugin, ative, limpe caches de plugin/CDN e faça os testes em uma janela anônima.

shield Cache seguro no WordPress e WooCommerce

Nunca trate carrinho, checkout, Minha Conta, painel, login, REST autenticada, respostas com nonce ou páginas personalizadas por usuário como arquivos públicos imutáveis. Nessas rotas, a rede deve prevalecer e uma falha não pode ser substituída por dados de outra sessão. A mesma regra vale para áreas de membros, cursos e sistemas internos.

PWA, SEO técnico e Core Web Vitals

Um PWA não recebe vantagem automática no ranking. O conteúdo principal deve continuar disponível em URLs rastreáveis, com resposta HTTP correta, canonical coerente, títulos descritivos, links internos e HTML acessível. O service worker não deve mascarar erros 404 nem devolver a página inicial para qualquer URL inexistente.

No desempenho, meça LCP, INP e CLS antes e depois da ativação. O cache pode acelerar visitas repetidas, mas não corrige imagem principal pesada, JavaScript excessivo, fontes bloqueantes ou servidor lento na primeira visita. Preserve também os metadados, dados estruturados e o sitemap do site original.

Checklist de validação depois da ativação

✓ Manifest: URL, escopo, nomes, cores e ícones carregam sem erro.
✓ Instalação: Android/desktop exibem o fluxo compatível e iOS recebe instrução.
✓ Offline: uma navegação sem rede mostra fallback, sem simular conteúdo dinâmico.
✓ Atualização: uma nova versão do cache substitui a anterior de forma previsível.
✓ WooCommerce: carrinho, checkout e conta funcionam com usuários distintos.
✓ SEO: status HTTP, canonical, robots, sitemap e links continuam corretos.

Próximos passos

Outras ferramentas para seu projeto digital

language

Hub de Websites

Planeje domínio, hospedagem, desempenho, segurança e presença digital.

Explorar hub arrow_forward extension

Hub WordPress

Encontre geradores, diagnósticos e micro-plugins para tarefas específicas.

Ver ferramentas arrow_forward qr_code_2

Gerador de QR Code

Crie QR Codes para URLs, Wi-Fi, contatos, PIX e campanhas de divulgação.

Criar QR Code arrow_forward android

Android Studio

Avalie APK, AAB e publicação quando o projeto exigir distribuição pela loja.

Criar app Android arrow_forward

help Perguntas Frequentes sobre o PWA Studio

Tire dúvidas sobre instalação, compatibilidade e funcionamento offline.

1. O que é Progressive Web App? expand_more

Progressive Web App, ou PWA, é um site que usa HTTPS, Web App Manifest e service worker para oferecer instalação na tela inicial, aparência de aplicativo e uma experiência controlada quando a conexão falha.

2. Um PWA substitui um aplicativo nativo? expand_more

Depende do projeto. Um PWA atende muito bem conteúdo, catálogos, lojas e serviços recorrentes. Recursos profundamente integrados ao aparelho ou distribuição obrigatória pelas lojas podem justificar um aplicativo nativo.

3. O PWA funciona em iPhone e iPad? expand_more

Sim. No iOS, o visitante usa o Safari e escolhe Adicionar à Tela de Início. O micro-plugin pode exibir uma orientação específica para esse processo.

4. Posso usar PWA em uma loja WooCommerce? expand_more

Sim, desde que carrinho, checkout, conta, nonces, preços dinâmicos e requisições privadas não sejam armazenados como conteúdo estático. O gerador aplica exclusões voltadas a essas rotas.

5. Como instalar o plugin PWA no WordPress? expand_more

Depois de configurar e baixar o ZIP, acesse Plugins, Adicionar plugin e Enviar plugin no painel do WordPress. Instale, ative, limpe o cache do site e teste o manifest e o service worker em uma janela anônima.

6. Qual é a diferença entre SuperPWA e PWA Studio MJCR? expand_more

Soluções conhecidas como Super Progressive Web Apps para sites normalmente partem de configurações predefinidas. O PWA Studio MJCR começa com uma auditoria pública e gera um pacote ajustado ao tipo de site e às escolhas do usuário.

7. Transformar o site em PWA melhora o SEO? expand_more

O PWA não garante aumento de posição. Ele pode contribuir para uma experiência melhor, mas o SEO continua dependendo de conteúdo rastreável, desempenho, estabilidade visual, links internos, metadados e resposta correta do servidor.