How to Build a Mobile App with WeWeb: PWA and Responsive Apps

In the WeWeb editor, click the More icon (three-dot menu or grid icon) in the left navigation bar, then select Mobile App. This opens the PWA configuration panel. Toggle Enable PWA to ON. WeWeb will automatically generate a web app manifest and register a service worker when you next publish your project. The PWA plugin is available on all plan tiers. Note: the install prompt only appears reliably when your app is served over HTTPS on a custom domain — the default WeWeb subdomain (*.weweb.app) works for testing but a custom domain is strongly recommended for production.

In the PWA settings panel (More → Mobile App), fill in the required manifest fields. App Name: your full app name (e.g., 'TaskFlow'). Short Name: displayed under the icon on home screen, max 12 characters (e.g., 'TaskFlow'). Start URL: leave as '/' unless your app starts on a specific page. Display mode: choose Standalone to remove the browser bar. Theme Color: sets the status bar color on Android (enter a hex value matching your brand). Background Color: splash screen background while app loads. Upload an App Icon — minimum 512x512px PNG, no transparency for iOS compatibility. WeWeb uses this to auto-generate all required icon sizes in the manifest.

Switch to the Mobile breakpoint by clicking the device icons in the top editor toolbar (Desktop → Tablet → Mobile). All layout changes made in Mobile view apply only to mobile — they do not affect Desktop. Build your mobile layout with vertical stacking: set containers to flex-direction Column, use full-width (100%) elements, and apply adequate touch targets (minimum 44px height for interactive elements). In the Styling panel, switch units from px to % or vh/vw for fluid sizing. Avoid fixed widths. For cards and list items, set padding to at least 16px on each side for comfortable thumb reach. Remember: deleting an element while in Mobile view deletes it from ALL breakpoints — use display:none binding or Conditional Rendering instead to hide elements on mobile only.

In the editor, click the Add panel (+) in the left sidebar, search for 'Bottom Navigation', and drag it onto your page. Place it in a multi-page section so it appears on every page: right-click the Bottom Navigation container → 'Convert to multi-page section' → select all pages where it should display. Configure each nav item with an icon, label, and On Click workflow action set to Navigate to page (select your target page). To show the active state, create a Page-level variable named 'activePage' (Data panel → Variables → New → Text), set it to the current page name On page load, and bind each nav item's active style to a condition: activePage == 'Dashboard'. Bottom Navigation should be position sticky, bottom: 0, with a z-index above content.

1// Workflow JS action on page load — paste into Custom JavaScript action
2// Injection point: On page load workflow → Add action → Custom JavaScript
3return { activePage: 'dashboard' };
4// Then use 'Change variable value' action to set the activePage variable

The WeWeb PWA service worker handles caching automatically when you publish. By default, it caches your app's shell (HTML, CSS, JS) using a cache-first strategy, so the app loads from cache when offline. Dynamic data from your backend (Supabase, REST API) is NOT cached by default — users see empty collections when offline. For read-heavy apps where some offline access is valuable, store key data in App-level variables after fetching: In your collection fetch success workflow, add a 'Change variable value' action to write the collection data into an App variable (Data panel → Variables → New → Array). On page load, check if the collection is empty and fall back to the cached variable. Note: iOS Safari on versions below 16.4 does not support push notifications from PWAs, and some PWA installation prompts behave differently on iOS compared to Android.

Publish your WeWeb app: click the Publish button (top-right cloud icon) → Publish to production. On your Android device, open Chrome and navigate to your published URL. Chrome will show an 'Add to Home Screen' banner or you can tap the three-dot menu → Add to Home Screen. On iOS, open Safari, navigate to your URL, tap the Share icon (box with arrow) → Add to Home Screen. After installing, launch from the home screen icon — it should open in standalone mode without browser chrome. Test all navigation, forms, and data loading in the installed context. Check that the splash screen and theme color display correctly. If the install prompt does not appear on Android, verify: HTTPS is enabled, manifest is valid (check via Chrome DevTools → Application → Manifest), and service worker is registered.

For Google Play Store and Apple App Store distribution, use PWABuilder (pwabuilder.com — free Microsoft tool). Navigate to pwabuilder.com, enter your published WeWeb app URL, and click Start. PWABuilder analyzes your PWA score and generates native wrappers. For Android: click 'Package for stores' → Google Play → Download package → follow the signing and upload instructions for Google Play Console (requires a $25 one-time developer account fee). For iOS: PWABuilder generates an Xcode project that wraps your PWA in a WKWebView — this requires a Mac with Xcode and an Apple Developer account ($99/year). Note that Apple's review process is stricter for PWA wrappers — ensure your app provides genuine value beyond a website.