Mobile Apps

Mobile Apps turns your site into an app of its own, three ways at once:

1. An installable web app that works at once on Android, and on iPhone through Add to Home Screen - nothing to build.
2. An Android project (Kotlin) with a GitHub workflow that builds the APK on GitHub's machines, so you never install Android Studio.
3. An iPhone project (Swift, generated with XcodeGen) with a workflow that builds it on GitHub's Macs.

All three show the site's own pages, so whatever you change on the site is in the app at once, with no store update. On top of that, a member signed in on the phone can sign a computer in by scanning a QR code.

Before you start

• The site must run on https. Phones install web apps, and give the camera to a page, only on https.
• Downloading the projects needs PHP's ZipArchive; the icon sizes are made with GD.

Switching it on

Mobile Apps is a free plugin and works with every licence. Switch it on at Admin → Plugins. It makes the table aio_qr_logins and the folder uploads/apps, and takes the app's first name and colour from your site name and brand colour.

The admin menu then shows a Mobile Apps group under Plugins with App builder (admin/plugin.php?code=mobile-apps) and Packages & downloads. Until you upload an icon, the panel's bell carries a quiet note: The app has no icon of its own yet.

The App builder

On the right is a phone showing the site as the app will. It follows every change as you type, before you save.

The app

• App name and Short name (under the icon, 12 letters).
• Package / bundle id - reverse-domain, lower case: com.yoursite.app. Changing it later makes a different app in the stores.
• Version.
• A line about the app - for store listings and the Get the app page.

Look

• Icon (square PNG, 512 × 512 or larger) - or tick use the default mark instead.
• Theme colour (status bar, tab bar highlight), Background colour (splash, offline page) and Splash / icon background.
• Opens on - a path on the site: /, /trending, /plugins/shorts/feed.
• Orientation - Any, Portrait only or Landscape only.
• Bottom tab bar - the row of tabs along the bottom.
• Hide the site's top bar inside the app - leaves only the page and the tabs.
• Offer to install - a small card on phones that can install the app, once a week at most.
• Sign in with the phone (QR) - see below.

Bottom tabs (up to five) - a label, an icon and where it goes (a path or a full address). The defaults are Home, Trending, Create, Subscriptions and You; Create gets the raised button. Leave a label empty to drop a tab.

Store links (optional) - Google Play address and App Store address, shown on Get the app once you have published there.

Press Save the app. The web app updates by itself; rebuild the Android and iPhone packages when the name, icon, colours or tabs change.

The tab bar and the hidden top bar apply only inside the app: an installed web app, a page opened with ?app=1, or the Android and iPhone shells.

Packages & downloads

1. The web app - ready now. The manifest, service worker, icons and offline page already work. On Android, Chrome offers Install or Add to Home screen; on iPhone, Safari → Share → Add to Home Screen.

2. Android package (APK). Press Download the Android project (.zip). It wraps the site in a WebView with camera, microphone and file access, so going live and uploading work inside it. Then:

1. Unzip it and upload its contents to a GitHub repository (private is fine).
2. Open the repository's Actions tab; the Build Android APK workflow runs by itself.
3. When it is green, download app-debug.apk from the run's artifacts.
4. Upload that APK under step 4 below.

For Google Play you need a release build signed with your own key: the project's README-BUILD.md shows how to add it as repository secrets, after which the workflow builds a signed release too. Keep that key safe; Google Play only accepts updates signed with it.

3. iPhone package (Xcode). Download the iOS project (.zip) and put it in a GitHub repository. The Build iOS app workflow makes an unsigned build you can run in the Simulator. On a Mac, brew install xcodegen && xcodegen makes the .xcodeproj to open in Xcode, where you choose your team under Signing and press Run or Archive. The App Store, or a phone that is not in developer mode, needs an Apple Developer account to sign the app.

4. The APK members download. Choose the .apk and press Save - or, for a file too big for the server's upload limit, send it by FTP to uploads/apps/ and pick it in Or a file already in uploads/apps/; Get the app then offers it with a download button. Tick take it down to remove it. Keep the Version in the builder in step with the APK. The page shows the server's upload limit; a larger APK needs a higher upload_max_filesize and post_max_size.

What members see

• Get the app in the account menu, leading to /plugins/mobile-apps/get: an Install the app button where the browser allows it, the iPhone steps, the APK and store buttons when you have them, and a QR code that opens the page on a phone.
• The install card on phones, if Offer to install is on.
• Without a connection, the installed web app shows an offline page with your logo and Reel Rush, a small game that saves itself and says when the network is back.

Signing in with the phone

With Sign in with the phone (QR) on, the sign-in page on a computer shows Or sign in with your phone: a QR code and an 8-character code that work for two minutes (New code makes another).

1. On the phone - in the app or any browser, signed in - scan the QR code with the camera, or open /plugins/mobile-apps/scan to scan it or type the code.
2. The phone asks Sign this computer in?. Press Yes, sign it in only if the computer is yours.
3. The computer signs in by itself.

A job in Admin → Cron jobs, QR sign-in codes, clears expired codes every hour.

With the Mobile API

For an app with screens of its own, see Mobile API. When it is on, this plugin adds the routes app/config and qr/approve.

Honest limits

• The Android and iPhone apps are frames around the site: they show the live pages, so they need a connection (without one they say so and offer Try again).
• Publishing on the App Store needs a paid Apple Developer account; Google Play needs a signed release build.