instantpwa
Help centre

Answer

How does a PWA splash screen work?

Short answer

On Android, Chromium automatically generates a splash screen for an installed PWA using the manifest’s name, background_color, theme_color and the largest available icon — you do not draw it manually. It appears briefly while the app’s first paint loads after the user taps the icon. iOS Safari does not generate one automatically and requires custom <link rel="apple-touch-startup-image"> tags per device size.

By InstantPWA engineering·Reviewed July 25, 2026

Android/Chromium

Generated automatically from manifest fields — no extra work required, though you should keep background_color close to your app’s real background to avoid a visible flash.

iOS Safari

Requires manually adding apple-touch-startup-image link tags for each target screen resolution, or accepts a plain white flash if omitted.

Common pitfall

A mismatched background_color and actual app background causes a visible colour flash between splash screen and first paint.

Sources

Related
What is a Web App Manifest?
A Web App Manifest is a JSON file — usually manifest.webmanifest — that declares your app’s name, icons, start URL, theme colour and display mode. Browsers read it to decide whether to offer the install prompt and what icon and name to show on the home screen.
What icon sizes does a PWA need?
A PWA manifest needs at least a 192x192 and a 512x512 icon to be installable on Chromium browsers. For best results across platforms, also include a maskable icon (so Android does not crop your logo oddly) and a separate 180x180 apple-touch-icon link for iOS Safari, which does not read the manifest for its home-screen icon.
How do you debug a service worker?
Open Chrome DevTools → Application tab → Service Workers panel. It shows the registered worker’s status (activated, waiting, redundant), lets you check "Update on reload" to force a fresh install every load, simulate offline mode, and unregister a stuck worker. Console logs from inside the worker appear in the main console when you select the worker’s context from the dropdown.
What is the Cache Storage API?
The Cache Storage API is a browser-native key-value store for Request/Response object pairs, accessible from both a service worker and the page via the global caches object. It is the primary mechanism PWAs use to store network responses — HTML, CSS, JS, images, API JSON — so they can be served offline or instantly on repeat visits.
IndexedDB vs localStorage: which should a PWA use?
localStorage is a simple synchronous key-value store limited to strings and roughly 5-10MB, and it is not accessible from inside a service worker. IndexedDB is an asynchronous, transactional database that can store structured objects, blobs and much larger amounts of data, and it is accessible from both the page and the service worker — making it the right choice for most PWA data storage.