Web Apps

Turn a Manifest project into an installable progressive web app (PWA).

Overview

A progressive web app is a website that can be installed and run like a native desktop or mobile app. Once installed, it launches from the home screen or app dock, opens in its own window without browser chrome, and behaves like any other installed application.

Manifest projects qualify as PWAs the moment manifest.json declares the right web-app fields. Browsers detect the file at the root of your site and offer users an install prompt automatically, with no separate build step, bundler, or app store required.

manifest.json

The browser reads manifest.json as a W3C Web App Manifest. To qualify as installable, the file must include name, short_name, start_url, display, and icons (with at least 192×192 and 512×512 PNGs).

manifest.json
{
    "name": "My Project",
    "short_name": "Project",
    "description": "A short description of what the app does.",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "orientation": "any",
    "background_color": "#FFFFFF",
    "theme_color": "#FFFFFF",
    "icons": [
        { "src": "/assets/icons/192x192.png", "sizes": "192x192", "type": "image/png" },
        { "src": "/assets/icons/512x512.png", "sizes": "512x512", "type": "image/png" }
    ]
}

The starter project's manifest.json already includes the install-ready PWA fields. Replace the values with your own and you're set.

Linking the Manifest

Reference manifest.json from index.html so the browser can find it:

<link rel="manifest" href="/manifest.json">

iOS doesn't fully honor the standard manifest, so add a few Apple-specific meta tags for the home screen icon, status-bar style, and standalone display:

<link rel="apple-touch-icon" href="/assets/icons/192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Project">

Installation

Once manifest.json is in place and the site is served over HTTPS, browsers expose an install option to users automatically.

• Desktop Chrome & Edge: an install icon appears in the URL bar. Clicking it offers to install the app, which then opens in its own window and appears in the OS launcher.
• Android Chrome: an install banner appears on first visit, or users can tap the browser menu's "Install app" entry. The app gets a home-screen icon and behaves like a native app.
• iOS Safari: the install flow is manual. Users tap the share button, then "Add to Home Screen". iOS PWAs run in standalone mode and persist on the home screen.

Once installed, the app launches independently of the browser, tints the OS UI to match theme_color, and uses the largest matching icon from manifest.json for its home screen presence.

Offline Support

A service worker is a small JavaScript file the browser runs in the background, separate from any open page. It can intercept network requests, cache responses, and serve them even when the user has no connection. Service workers are what let installed PWAs keep working offline.

Manifest doesn't ship one by default. Every Manifest site works without it, and most don't need offline support. To enable offline use, add a service-worker.js file at your project root and register it from a <script> tag in index.html:

index.html
<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js');
    }
</script>

The registration script can sit anywhere in the document (head or body). It runs once on each page load and tells the browser where to find the worker file. The browser then keeps the worker alive in the background, independent of any open tab.

Authoring the worker itself is project-specific. Tools like Workbox generate one from a small config, or you can write one by hand. See MDN's Service Worker guide for the API.

Native App Distribution

A PWA can also be wrapped as a native app for distribution through iOS, Android, Windows, macOS, and Linux app stores, or made available for direct download. See Native Apps for the per-platform packaging and distribution options.