Deploying phone apps with Diode Vibe

You can deploy Diode Vibe apps to your users' phones either natively (via the respective application store) or by helping them create a home screen icon that points to your web app so it feels like a native app. This article is primarily about the latter approach, but read at the bottom for how to publish directly to the relevant application store.

A home screen icon is the friendly path. You deploy the site the way you already do, your users open it once in their phone browser, and from then on they tap an icon and land in your app. There is no store review and no separate mobile build.

Start with a public site

Publish the project as Public, so anyone with the link can open it in Safari or Chrome. That is the page they will pin. Protected and Private projects open through Diode Collab, which is a different kind of access than a home screen icon.

A custom domain such as yourname.com is the address you want on that icon. A *.diode.link URL works too. If you change the address later, your users add the icon again, so pick a name you plan to keep. Point the domain at diode.link using the Network custom-domain guide.

A static site is enough. Use a Python or Node container when the app needs a server. Either way, the icon files and the small manifest below deploy with the rest of the project.

Give the phone your icon and your name

Two lines in your HTML tell the phone what to call the app and which picture to use:

<link rel="apple-touch-icon" href="/icon-180.png">
<link rel="manifest" href="/manifest.webmanifest">

And a manifest.webmanifest file next to your page:

{
  "name": "Your App",
  "short_name": "Your App",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

"display": "standalone" is the setting that opens the icon without the browser address bar. "fullscreen" hides even more of the phone's own chrome. "minimal-ui" and "browser" leave the usual browser controls in place, which is fine if you want it to feel like a bookmark.

Drop square PNG files into the project:

iPhones round the corners for you. Fill the square, and leave a little padding so nothing important sits in the corners that get trimmed. On the maskable Android icon, keep the logo inside the center 80% so a circular crop still looks right.

If you skip the icon files, an iPhone will use a snapshot of the page, and Android will use your favicon. Both are fine for a tryout. Your own artwork looks much more like an app.

A service worker is optional. Add one when you want the home screen app to keep working offline, or to send notifications. People can still install from Chrome's menu without one.

Help someone on an iPhone

They do this once, in Safari, on their own phone. You can paste these steps into a welcome email or a help page.

1. Open your site in Safari.
2. Tap Share. If they use the compact tab layout, they tap More (⋯) first, then Share.
3. Tap Add to Home Screen. If they do not see it, they scroll to the bottom of that sheet, tap Edit Actions, and turn Add to Home Screen on.
4. Leave Open as Web App on, shorten the name under the icon if they like, and tap Add.

The icon shows up on that iPhone. The next tap opens your site with no Safari address bar and no Safari toolbar. The time, battery, and signal stay at the top, the way they do for any app. If they turn Open as Web App off, the icon is only a bookmark and Safari's address bar comes back.

On current iPhones this is the default for every site, even before you add a manifest. On iOS 18 and earlier, the address bar stays away when your manifest says "display": "standalone" (or "fullscreen"), or when the page includes <meta name="apple-mobile-web-app-capable" content="yes">.

Help someone on Android

Same idea, in Chrome:

1. Open your site in Chrome.
2. Tap the menu (⋮).
3. Tap Install and create shortcut. On older Chrome the label is Add to Home screen.
4. Tap Install.

Install is the one you want. It opens your site in its own window, with no Chrome address bar and no tabs. Create shortcut is only a bookmark: it opens a normal Chrome tab, and the icon usually wears a little Chrome badge.

Chrome offers Install once the site is on HTTPS and the manifest has a name, a start_url, "display": "standalone" (or "fullscreen"), and both the 192 and 512 icons. It also waits until the person has actually used the page for a few moments before an in-page install button can appear. If the menu only offers Create shortcut, the address bar will still be there. Adding the manifest above is what unlocks Install.

Put an "Add as an App" button on the page

You can save people from hunting through menus. A button labeled Add as an App is a nice touch, and it behaves a little differently on each phone.

On Android, in Chrome, Edge, or Samsung Internet, show the button when the browser fires beforeinstallprompt. When they tap it, call prompt() on that event. They still get the browser's own confirm dialog, so the button is an invitation, and they choose yes. Keep the button hidden until that event arrives, and hide it again once they have installed.

On an iPhone, the page cannot open the Share sheet for them. Use the same button to show the four steps above: Share, then Add to Home Screen, and leave Open as Web App on. Chrome on an iPhone works the same way, because it uses Safari under the hood.

One button can do both: install on Android, and a short set of steps on iPhone.

Publishing to the App Store and Google Play

When you want the app in the store, next to every other app your users already install, you build a native app and submit it with your own developer account. Diode Vibe keeps hosting the site or the API that app talks to. Use a custom domain and keep that address stable, because the store listing points at it.

Apple App Store. Join the Apple Developer Program, build and sign the app in Xcode, and upload it through App Store Connect. Apple reviews every submission. They look for an app with its own features, content, and interface. A listing that is mainly your website inside a web view is often turned away under Guideline 4.2. Your Vibe site can absolutely be the API or the content behind a native screen. For "just put my site on the iPhone," the home screen steps above are the path Apple supports.

Google Play. Create a Play Console account, build an Android App Bundle in Android Studio or in your CI, and upload it. Play App Signing signs the copy people install. Your Vibe site is the backend that app calls.

Play will also list a small package that opens your Vibe site fullscreen in Chrome. That is called a Trusted Web Activity, and tools like Bubblewrap or PWABuilder create it for you. You still build, sign, and submit that package yourself. Your site needs to be public HTTPS, and it needs to serve https://<your-domain>/.well-known/assetlinks.json with the Play app-signing certificate fingerprint (the key Google holds for your app). Once that file is deployed, everyday Vibe updates show up in the installed app, as long as the public address stays the same.