Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

PWA Manifest & Service Worker Generator — Make Your Site Installable

Make any website an installable PWA. Fill in the name, colors, display mode and icons to get a valid manifest.webmanifest, the <head> tags, and an offline service worker with the caching strategy you choose — plus an offline page and the registration snippet. Preview the install card and splash screen, then download everything as a ZIP.

Atualizado em

Preview

N
Acme Notes
example.com
Install app
NAcme Notes
File

Need the icon files? Make them with the App Icon Generator or Favicon Generator.

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

Como usar: PWA Manifest Generator

  1. Enter the app name, a short name for the home screen (12 characters or fewer), a description and the start URL.
  2. Choose the display mode — standalone for an app-like window — and the theme and background colors used for the title bar and splash screen.
  3. Set where your icons live (192 and 512 px, plus a maskable one) and keep the offline service worker on, with the caching strategy that fits your site.
  4. Download the ZIP, put the files in your site root, add the <head> tags and check Chrome DevTools → Application → Manifest.

What makes a site installable

  • Served over HTTPS.
  • A web app manifest with name or short_name, start_url, a display mode other than browser, and icons of at least 192 px and 512 px.
  • A linked manifest in the page’s <head>. Chrome no longer requires a service worker to install, but you need one to work offline.

The service worker’s caching strategies

StrategyHow it answersBest for
Network firstTries the network, falls back to the cache when offlinePages (always used for HTML here)
Stale-while-revalidateAnswers from the cache instantly, updates the cache in the backgroundCSS, JS, images that change now and then
Cache firstUses the cache and only goes to the network when missingFiles with a hash or version in the name

Bump the cache version when you deploy, so the new service worker clears old caches on activation. When nothing is cached and the network is down, visitors see offline.html.

Também pesquisado como: web app manifest generator, manifest.json generator, service worker generator, pwa generator, make website installable, offline service worker, webmanifest generator.

Ferramentas que combinam com: PWA Manifest Generator

  • Gerador de ícones de aplicativos — Basta arrastar uma imagem quadrada e você terá todos os tamanhos de ícone que seu app precisa — um AppIcon.appiconset pronto para o Xcode, pastas de mipmaps do Android com ícones adaptáveis, o ícone da Play Store e ícones para a web/PWA — tudo em um único arquivo ZIP.
  • Gerador de favicons — Crie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico com vários tamanhos, o ícone de toque da Apple, ícones para Android/PWA, um webclip do Webflow, o manifesto da web e as tags HTML para colar.
  • Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.
  • Deep Link File Generator — Create the two files that let links to your website open your app — apple-app-site-association for iOS Universal Links and assetlinks.json for Android App Links — or paste existing files to check them.

Perguntas frequentes

Is it manifest.json or manifest.webmanifest?
Both work. The spec’s recommended extension is .webmanifest (served as application/manifest+json); .json is fine too as long as the points to it.
What is a maskable icon?
An icon with extra padding (a safe zone in the middle 80%) that Android can crop into a circle, squircle or other shape without cutting off your logo.
Why does my PWA not show the install button?
Check Chrome DevTools → Application → Manifest for errors: usually a missing 192 or 512 px icon, a wrong start_url or scope, display set to browser, or the page not being served over HTTPS.
How do I update a PWA after a deploy?
Change the cache version in sw.js. The browser installs the new service worker, which deletes old caches and takes over (skipWaiting and clients.claim), so users get the new files on their next visit.
Posso instalar o PWA Manifest Generator como um aplicativo da web e usá-lo offline?
Sim. O PWA Manifest Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas