PWA installation is the process by which a browser turns a progressive web app into an installed application on the device: it gets a home-screen or launcher icon, opens in its own window without browser controls and appears among the user’s apps. On the mobile web, installation is the step that lets a website behave like an app without passing through an app store.
Installation does not download a separate binary. The browser registers the web app with the operating system using information from the site’s web app manifest, while the code and data continue to come from the web, cached locally by a service worker.
What a site needs to be installable
A browser offers PWA installation only when the site meets its installability criteria. The exact rules differ between browsers, but the core requirements are shared.
| Requirement | Details | Why it is needed |
|---|---|---|
| HTTPS | Served over a secure connection, localhost excepted | Protects code that runs like an app |
| Web app manifest | Linked JSON file with name and icons | Defines identity and appearance |
| Name or short_name | Label shown under the icon | Identifies the app in the launcher |
| Icons | Typically 192 and 512 pixel PNGs, ideally maskable | Launcher icon and splash screen |
| start_url | Page opened at launch | Defines the entry point |
| display mode | standalone, fullscreen or minimal-ui | Opens without the browser interface |
| Service worker | Registered script, often with offline support | Enables caching and reliable launches |
A service worker is not strictly required for installability in every browser today, but it is what makes an installed app reliable on poor connections. Without it, an installed PWA shows a browser error page when the network is unavailable, which undermines the app-like experience.
How installation differs across platforms
The installation flow depends on the browser and operating system. Chromium-based browsers offer an automatic install prompt, while Safari relies on a manual menu action.
| Platform | How users install | Result |
|---|---|---|
| Chrome on Android | Install prompt or browser menu | WebAPK registered as a real Android app |
| Safari on iOS and iPadOS | Share menu, then Add to Home Screen | Standalone home-screen web app |
| Chrome and Edge on desktop | Install icon in the address bar | App window, start menu or dock entry |
| Safari on macOS | File menu, then Add to Dock | Dock app with its own window |
| Firefox on Android | Browser menu install option | Home-screen shortcut in app mode |
On Android, Chrome generates a WebAPK, a small signed package that lets the PWA appear in the app drawer, handle links to its own site and show in system settings like a native app. On iOS, installed web apps gained web push notifications from iOS 16.4, but only after they are added to the home screen.
Controlling the install experience
Developers can shape when and how users are invited to install. In Chromium browsers, the beforeinstallprompt event lets a site suppress the default banner and show its own install button at a better moment.
- Defer the prompt until the user has shown engagement, such as completing a task or returning a second time.
- Listen for `appinstalled` to track successful installs and hide install buttons afterward.
- Detect standalone mode with the
display-modemedia query to adapt the interface when launched as an app. - Provide manual instructions for Safari, where no programmatic prompt exists.
Showing an install prompt on the first visit is the most common mistake. Users who have not yet experienced the site’s value tend to dismiss it, and some browsers then suppress further prompts for a period.
PWA installation compared with related approaches
PWA installation is often confused with simple bookmarks and with store-distributed apps. The table clarifies the differences with add to home screen shortcuts and native app installs.
| Option | Window | Offline capability | Distribution |
|---|---|---|---|
| Installed PWA | Own standalone window | Yes, through a service worker | Directly from the website |
| Home-screen bookmark | Regular browser tab | No | Directly from the website |
| Native app from a store | Own app | Yes | Store review and download |
| PWA packaged for a store | Own app wrapper | Yes | Store listing for a web app |
Installed PWAs update without user action: the next time the app launches online, the browser fetches the new service worker and assets. There is no store review, which speeds up releases but also means quality control rests entirely with the site owner.
Limitations and pitfalls
PWA installation brings websites close to apps, but platform support remains uneven. The table lists issues that appear most often in real projects.
| Issue | Cause | Remedy |
|---|---|---|
| No install option appears | Manifest missing fields or not linked | Validate the manifest in developer tools |
| Blurry or cropped icon | Icon not marked maskable or too small | Provide 512 pixel maskable icons |
| Blank screen when offline | No cached start page | Precache the app shell |
| Storage cleared on iOS | Browser eviction of unused data | Treat local data as a cache, sync to a server |
| Wrong page at launch | start_url outside the scope | Align start_url with the manifest scope |
Understanding it simply
PWA installation lets you keep a website on your phone as if it were an app. You tap install or add it to your home screen, and an icon appears. When you open it, there is no address bar.
Nothing big is downloaded from an app store. The app still comes from the website, but your phone remembers it and can keep parts of it ready to work without a connection.
Applied in practice
A regional public transport operator wants riders to check departures and buy tickets without building separate store apps. The team adds a web app manifest with maskable icons, a standalone display mode and a service worker that caches the timetable and the user’s saved tickets.
Instead of prompting on the first visit, the site shows an install button after a rider buys a second ticket. On Android the PWA installs as a WebAPK, and the site adds short Add to Home Screen instructions for iPhone users. Riders can now show saved tickets in tunnels without a signal, and the operator releases timetable changes the same day without any store review.