Docs/PWA & Offline
DocsPWA & Offline
Free

PWA & Offline

Turn your app into an installable Progressive Web App with offline support — manifest, service worker, and caching generated automatically.

What is a PWA

A Progressive Web App (PWA) is a web application that can be installed on a device and works offline. PWAs feel like native apps — they appear on the home screen, launch in their own window, and function even without an internet connection.

  • Installable — Users can add your app to their home screen on mobile or desktop.
  • Offline-capable — Cached assets are served when the device is offline.
  • App-like experience — Launches in a standalone window without browser UI.
  • No app store required — Users install directly from the browser.

Enabling PWA

Turn on PWA support for your app with a single toggle. GenMB generates all the required files automatically — no manual configuration needed.

1

Open app settings

Open your app in the editor and navigate to Settings.
2

Enable the PWA toggle

Toggle the PWA option to enable it. GenMB immediately generates the required manifest and service worker files.
3

Deploy your app

Deploy your app to a subdomain. PWA features (installation, offline mode) only work on deployed apps because service workers require HTTPS.
4

Users can install

Once deployed, users visiting your app will see a browser install prompt. They can add your app to their home screen with one tap.

HTTPS Required

PWA features require HTTPS, which is automatically provided when you deploy to a *.genmb.com subdomain or custom domain. The editor preview does not support PWA installation because it runs in an iframe without its own HTTPS origin.

What Gets Generated

When you enable PWA, GenMB generates the standard files that browsers need to recognize your app as installable and offline-capable.

manifest.json

Contains your app name, theme color, display mode, icons, and start URL.

Service worker

Handles caching strategies and offline fallback behavior.

Offline fallback

A simple page displayed when the user is offline and the requested page is not cached.

Meta tags

Added to your HTML head for theme color, viewport, and Apple touch icon support.

Installing on Devices

Once your PWA-enabled app is deployed, users can install it on their devices directly from the browser. The installation process varies by platform.

Android

Chrome shows an "Add to Home Screen" banner automatically. Users can also tap the browser menu and select "Install app."

iOS

Users tap the Share button in Safari and select "Add to Home Screen."

Desktop

Chrome and Edge show an install icon in the address bar. Click it to install the app as a standalone window.

Home Screen Installation

After installation, the app icon appears on the home screen and launches in a standalone window — no browser chrome, no address bar. It feels like a native app. Users can return to it by tapping the icon, just like any other app on their device.

Offline Behavior

The service worker caches your app's static assets so they load even without an internet connection. This provides a reliable experience for users on flaky networks or in areas with no connectivity.

  • HTML, CSS, and JavaScript files are cached on first visit.
  • Cached assets are served instantly when the user returns — even offline.
  • Dynamic data (API calls, real-time content) requires a network connection. Offline users see a fallback message for dynamic content.
  • The cache is updated when the user visits the app with a network connection, ensuring they get the latest version.

Offline Limitations

Only static assets (HTML, CSS, JS) are available offline. Features that depend on API calls — such as AI chatbot, file storage, or database queries — require a network connection. The service worker does not cache dynamic API responses by default.

Customization

Customize the PWA appearance and behavior in the app settings. These settings control how your app looks when installed on a device.

App name

The name shown on the home screen and in the app switcher.

Theme color

Controls the browser toolbar color and splash screen accent.

Icon

The app icon displayed on the home screen. Provide a square image for best results.

Display mode

Standalone (default) hides the browser UI. Fullscreen removes the status bar as well.

Use a square, high-contrast icon for the best appearance on home screens. The icon is used at multiple sizes — a 512x512 PNG works best. Avoid text in the icon since it may be hard to read at smaller sizes.

FAQs

Does PWA work in the editor preview?▾
PWA features (installation, offline mode) require HTTPS, which is only available on deployed apps. The PWA files are generated and included in your code, but the browser will not offer the install prompt in the editor preview.
Can I customize the offline fallback page?▾
The offline fallback page is generated automatically with a simple message. You can edit it in the code editor after generation — it is a standard HTML file in your project.
Does the PWA auto-update when I redeploy?▾
Yes. When you redeploy, the service worker detects the new version on the user's next visit. The cached assets are updated in the background, and the new version is served on the following page load.
Is PWA available on the Free plan?▾
Yes. PWA support is available on all plans, including Free. Enable it in your app settings and deploy to get a fully installable progressive web app.

Ready to build?

Create your first app for free — no credit card required.

Video GenerationChrome Extension