Guides
GuideProgressive Web App

Progressive Web App (PWA)

Every published app is automatically installable — members can add it to their home screen and run it full-screen, on Android, iPhone/iPad, and desktop. It stays up to date on its own.

Nothing to set up. When you publish, your app becomes a PWA automatically. The app icon, name, and colors come from your app icon and brand kit. A subtle “Install this app” prompt appears for visitors on its own. There's a “Make this app installable” toggle in your app's Config tab (on by default) if you'd rather turn this off.

What members get

Install to home screen

Members add your app to their phone or desktop and launch it like any other app.

Full-screen experience

Runs without browser bars — it feels like a native app, not a website.

Always up to date

When you publish changes, installed apps quietly load the new version — no reinstall, no manual refresh.

Your branding

Your icon on the home screen, your name, and your brand color as the theme.

How members install it

A gentle “Install this app” banner appears automatically. Members can also install manually:

Android / Chrome / Edge

Tap the Install button in the banner (or the browser menu → “Install app”).

iPhone / iPad (Safari)

Tap the Share icon, then Add to Home Screen. The app shows a hint for this automatically.

Desktop

Click the install icon in the address bar, or use the banner's Install button.

Auto-updates

This is the part builders worry about, so it's handled for you: when you publish a new version, installed apps detect it and load the newest build automatically — members never have to refresh or reinstall. Your app's live data (tables, files, payments) always comes fresh from the network, so nothing is ever shown stale.

You don't need to do anything — just publish as usual. The update reaches installed members on their next visit.

Add your own Install button

The automatic banner covers most cases. If you'd rather place your own “Install” button somewhere in your app, use the serenities.pwa API:

import serenities from '../api/sdk';

// Show your own button only when install is possible
if (serenities.pwa.canInstall()) {
  // ...render a button, then on click:
  serenities.pwa.promptInstall();
}

// Check whether the app is already installed
serenities.pwa.isInstalled(); // true when running as an installed app
serenities.pwa.promptInstall()Opens the install prompt (or the iOS “Add to Home Screen” hint).
serenities.pwa.canInstall()True when the app can be installed right now.
serenities.pwa.isInstalled()True when running as an installed app.

Icon, name & colors

The installed app uses your app icon (or favicon) for the home-screen icon, your app's display name, and your brand color as the theme. If you haven't set an icon yet, we generate a clean letter-mark from your brand color so the app still looks polished. Set your icon and colors in your app's brand settings, then publish.