No prior mobile experience required: every command and tool is explained as if you’ve never opened a terminal.

This post was originally published at https://capawesome.io on June 26, 2026.

This post has a companion video that walks through the entire process in real time, including the parts where things break and how to fix them:

Key takeaways:

• Lovable only publishes to the web, but its code is a normal web app, and Capacitor turns a web app into iOS and Android apps without rewriting it.
• You don’t need a Mac, Xcode or Android Studio: Capawesome Cloud builds the iOS and Android apps for you in 2–5 minutes, from Windows, Linux or macOS.
• Ask Lovable for a single-page app: new Lovable apps use server-side rendering by default since May 13, 2026, and a native app needs a plain static build.
• Once the app is on phones, small fixes go out over the air in minutes with Live Updates; only new native features like the camera need a new build and store review.
• Publishing costs $99 per year for Apple and $25 one-time for Google Play, and you can do the whole guide on the free 14-day Capawesome Cloud trial.

What You’ll Build

To keep things concrete, we’ll use a sample app called Spendly, a mobile-first expense tracker built with Lovable. It lets you add expenses, see a running total, and (once we add the camera) snap a photo of a receipt when logging a transaction.

The steps apply to every Lovable app; Spendly is only the example.

By the end, you’ll have:

• A native iOS and Android app built entirely in the cloud: no Mac, no Xcode, no Android Studio required
• The iOS app installed and running on a real iPhone device
• The Android app installed and running on a real Android device
• iOS and Android developer accounts configured to submit your app for review in the App Store and Google Play Store
• A working camera feature that only a real native app can offer
• Live Updates set up, so you can ship changes without going through app review every time, including a real fix we’ll push over the air

Build iOS and Android Apps Without a Mac

The traditional way to build a mobile app requires a Mac with Xcode for iOS and a fully configured Android Studio for Android. That’s a huge amount of setup, and if you’re on Windows or Linux, iOS is off the table.

We’re going to skip almost all of that. Capawesome Cloud Native Builds builds your iOS and Android apps on Apple computers in the cloud, signs them, and hands you back an installable app in a few minutes, from any operating system.

That changes the prerequisites dramatically:

• You do not need Xcode or Android Studio to build and ship your app. The cloud does it.
• You only need them if you want a simulator, a virtual phone that runs on your computer’s screen. That’s optional, and (fair warning) it’s a lot more setup. We’ll point out where it fits in, but the main path in this guide never touches them.

Check the Prerequisites to see what you need before you start.

Step 1: Build Your App in Lovable

If you already have a Lovable app, skip to Step 2. If you’re starting fresh, here’s how Spendly was created.

Lovable is an AI app builder. You describe the app you want in plain English, and it generates a working React app you can preview and refine in your browser, no coding required.

Here’s the exact prompt we used to generate Spendly.

Keep it a simple single-page app

For the smoothest path to mobile, explicitly ask Lovable for a single-page app, like the prompt above does. New Lovable apps are server-rendered by default, and asking for a single-page app is what gets you the dist folder Capacitor wraps into a native app.

✅ Success: Your app previews and works inside the Lovable editor.

Step 2: Export to GitHub

To work with your app on your own computer (and so Capawesome Cloud can build from it later), you first need the code in a GitHub repository. Lovable can push it there for you.

1. In the Lovable editor, click the Upgrade button in the top-right corner.
2. Click Git on the left menu and then the Github option.
3. Authorize Lovable (create a free GitHub account here if you don’t have one).
4. Link your github account to this Lovable project.
5. Lovable will create a new repository and push your app into it automatically.

After it finishes, you’ll have a repo at an address like github.com/YOUR-USERNAME/spendly.

If you got lost here, watch the video for the detailed step by step.

✅ Success: Visiting github.com/YOUR-USERNAME/spendly shows your app's code.

Step 3: Run Your App Locally

Now download the code to your computer and make sure it runs. “Cloning” means copying the repository (the project on GitHub) onto your machine.

Open VS Code, start a terminal with Terminal → New Terminal, and run these one at a time (replace YOUR-USERNAME):

git clone https://github.com/YOUR-USERNAME/spendly.git 
cd spendly 
npm install 
npm run dev

• git clone ...: downloads your code into a new spendly folder.
• cd spendly: moves into that folder.
• npm install: downloads all the libraries your app depends on.
• npm run dev: runs the app on your computer so you can open it in a browser.

Then open the project in VS Code: File → Open Folder, select the spendly folder. Any new terminal you open is already inside it, so you can skip cd spendly from here on.

The terminal prints a local address. Open it in your browser. Lovable apps typically run on http://localhost:8080, but use whatever address your terminal shows (it may differ).

✅ Success: Spendly opens in your browser showing its UI.

Press Ctrl + C in the terminal to stop the app when you're ready to continue.

Step 4: Add Capacitor to Your Lovable App

Capacitor is the bridge that turns your web app into a real native mobile app. It wraps your existing code in an iOS and Android shell, no rewrite needed.

Install Capacitor and set it up:

npm install @capacitor/core @capacitor/cli 
npx cap init

npx cap init asks three questions. Answer them like this:

App Package IDcom.spendly.app

A unique ID for your app, written like a web address in reverse (your website’s domain, then the app name). It can’t be changed after you publish to the stores.

Web assets directory

The folder your built app lands in. For Lovable single-page apps this is dist.

This creates capacitor.config.ts:

Pick a Package ID you own

Your Package ID (Apple calls it the bundle ID, Google the application ID) must be unique across the App Store and Google Play, so two apps can never share one. In the companion video we picked one that was already taken and had to change it later, which means editing it in several files inside ios/ and android/ and rebuilding. Save yourself the detour: base it on a domain you own (e.g. com.yourcompany.spendly) from the start.

Now build your web app, add the iOS and Android projects, and copy the app into them:

npm run build 
npm install @capacitor/ios @capacitor/android 
npx cap add ios
npx cap add android 
npx cap sync

• npm run build produces the dist/ folder (Capacitor needs it before you add the platforms).
• npx cap add ios / android create the ios/ and android/ folders, each a complete native project.
• npx cap sync copies your built web app into both. You'll run it again after every change.

Your project now looks roughly like this:

spendly/
├── android/          ← native Android project
├── ios/              ← native iOS project
├── dist/             ← your built web app
├── src/              ← your Lovable app code
├── capacitor.config.ts
└── package.json

No CocoaPods needed

If you’ve followed older Capacitor tutorials, you may have seen a step to install a tool called CocoaPods for iOS. You don’t need it. Since Capacitor 8, iOS dependencies are handled automatically by Swift Package Manager, which comes with the project.

✅ Success: ios/ and android/ folders appear, and the terminal shows Sync finished.

Step 5: Check .gitignore

Capawesome Cloud builds from your GitHub repository, which means the ios/ and android/ folders must be uploaded to GitHub. A .gitignore file lists what Git should leave out of the upload, and a common mistake is accidentally listing those folders there.

npx cap add already put a .gitignore inside each platform folder that leaves out only temporary build files, not the project itself, so you usually don't need to change anything. Confirm:

• The .gitignore in your project's main folder lists node_modules and dist (the cloud rebuilds dist itself, so it doesn't belong on GitHub). Lovable's default already does this.
• The ios/ and android/ folders are not listed. They need to be on GitHub.

✅ Success: Running git status shows the new ios/ and android/ folders as ready to upload (not ignored).

Step 6: Commit and Push

Upload this milestone to GitHub so the cloud can build from it ( commit records the change, push uploads it):

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Success: Your GitHub repo now shows the ios/ and android/ folders.

Step 7: Connect Capawesome Cloud

Everything in this section is done in the Capawesome Cloud Console, with no terminal needed.

1. Sign up and create an organization. Go to console.cloud.capawesome.io and create an organization (your workspace). All plans include a 14-day free trial.
2. Create an app. On the Apps page, select your organization, click Create App, give it a name (e.g. Spendly), and click Create. Open the app and copy its app ID. You'll paste it into your config when we set up Live Updates.
3. Connect your GitHub repository. Open the Git page for your app.

• Under Git Providers, select GitHub and click Connect to authorize access.
• Under Git Repositories, choose the repository owner, select your spendly repo, and click Save.

For the full connection flow and permissions, see the GitHub integration docs.

✅ Success: Your app in Capawesome Cloud shows your GitHub repo connected, and you have your app ID saved.

Step 8: Create Developer Accounts

To install on a real iPhone and to publish, you need developer accounts. This is a one-time setup with real timelines. Start it early.

Apple Developer Program: $99/year

Enroll at developer.apple.com/programs/enroll for $99 per year. Individual accounts are usually approved within two days. Registering as a company also needs a D-U-N-S number, a free business identifier from Dun & Bradstreet that takes about a week to get.

Google Play Console: $25 one-time

Register at play.google.com/console/signup for a one-time $25 fee. Identity verification usually completes within a few hours.

Full walkthrough: How to Create Your Apple Developer and Google Play Developer Accounts.

✅ Success: Your Apple Developer account is active (and Google Play, if you’re targeting Android).

Step 9: Generate Signing Certificates

Apple and Google only accept signed apps, and iOS won’t install an unsigned build on a real device either. Signing is a digital stamp that proves the app comes from you, and each platform has its own files for it:

• iOS: a certificate (the stamp itself) plus a provisioning profile (a list of which app, and which devices, that stamp may be used for). You need one pair for installing on your own iPhone (called development) and one pair for TestFlight and the App Store (called distribution). Both are created the same way.
• Android: a single keystore file that holds the stamp.

This is where most first-timers get stuck, but you can create everything in your browser, no Xcode or Android Studio required:

Then upload them to Capawesome Cloud once, in the Console:

1. Open your app and go to the Certificates page.
2. Click Create Certificate, choose the platform, and upload the files:

• iOS: your .p12 certificate (with its password) and your .mobileprovision provisioning profile.
• Android: your keystore file (with its keystore password, key alias, and key password).

3. Give it a recognizable name (e.g. Production iOS Certificate) and save.

Every future build picks the certificate up automatically, so you store nothing on your machine.

Step-by-step guides:

• iOS signing certificates
• Android signing certificates
• iOS Certificates and Provisioning Profiles Explained.

Remember that in the video this is shown step by step.

Every iPhone has a unique identifier called a UDID. Look yours up with the free iOS UDID Finder, register it in your Apple Developer account, and include it in the development provisioning profile. That lets you install a development build directly on your phone. The easiest alternative is TestFlight, set up in Step 12.

✅ Success: Your certificates are uploaded to Capawesome Cloud.

Step 10: Build Your Native App in the Cloud

Start a cloud build straight from the connected repository, all from the Console:

1. Open your app and go to the Builds page.
2. Click Build from Git.
3. Select your Git reference (the main branch, which is the version of your code the cloud should build), the Platform (iOS or Android), and the Build Type:

• iOS → Development (signed with your iOS development certificate, with your iPhone included in the provisioning profile): to install directly on your own device.
• iOS → App Store (signed with your iOS distribution certificate): for TestFlight and the App Store (you can’t install this one straight onto a device).
• Android → Release (signed with your Android keystore): for Google Play. For a quick test on any Android device, Android → Debug needs no certificate.

4. Pick the matching certificate, then click Build.

Builds typically finish in 2–5 minutes. When a build fails, the Console’s Ask AI explains the cause and a fix in plain English.

Want a free, unsigned build to try first?

On the Build Type dropdown, choose iOS Simulator or Android Debug. Neither needs a certificate. The iOS one only runs in a virtual iPhone, and the Android one installs on any Android phone, so they’re a good first end-to-end test. Full reference: Getting Started with Native Builds.

Watch the full Console walkthrough for each platform:

✅ Success: Your build completes in the Console with a downloadable app file (an IPA for iOS, an APK or AAB for Android).

Step 11: Install the App on Your iPhone

Time to hold Spendly in your hand. The simplest paths, all without Xcode:

• TestFlight (iOS): push the build to TestFlight from Capawesome Cloud App Store Publishing, then install it from the TestFlight app on your iPhone. Internal testers don’t wait for review.
• Direct install: install a development build straight onto a registered device from the Capawesome Cloud Console.
• Google Play Internal Testing (Android): share a link and testers install from the Play Store immediately, no review.

Full guide: How to Distribute iOS and Android Apps to Testers. Console walkthrough:

Prefer a local simulator/emulator? (the heavier path)

If you’d rather test in a virtual phone on your computer, you can install Xcode (Mac only) and/or Android Studio, then run npx cap open ios / npx cap open android and press the Run button. Be warned: these are large downloads and a lot more configuration. The cloud + real-device path above is faster and works on any OS, which is why it's our main recommendation.

✅ Success: Spendly launches on your iPhone.

Step 12: Deploy to Testers

Installing on your own phone is great, but to get the app to other testers you send it to a store destination: TestFlight on iOS or a Google Play testing track on Android. You set the destination up once in the Console and then deploy builds to it.

This is walked through end-to-end in the companion video

Creating both destinations involves a fair amount of clicking through Apple and Google’s consoles. The companion video demonstrates the whole flow in real time, including the credentials, a couple of errors, and the fixes. This section is the written map; the linked docs below have the click-by-click detail.

The two-step pattern is the same for both platforms:

1. Create a store destination (the target + its credentials).
2. Create a deployment of a signed build to that destination.

TestFlight (iOS)

Create an Apple App Store destination on the Destinations page of your app. Using the Apple ID + Password method, you'll provide:

• Team ID: from your Apple Developer Membership details.
• Apple App ID: the Apple ID property from the App Information section in App Store Connect (create the app there first, using your registered bundle ID).
• Apple ID + an app-specific password: a separate password Apple lets you create for tools like this one, on your Apple ID account page.

Then create an iOS → App Store build signed with your distribution certificate and deploy it to that destination. Submissions are uploaded to TestFlight automatically. (You can also tick the deploy option on the build itself so a successful build ships to TestFlight in one go.)

Full detail: Apple App Store & TestFlight Destination.

Google Play Internal Testing (Android)

Create a Google Play Store destination with:

• Track: Internal for internal testing.
• Package Name: your Android application ID (the same bundle ID).
• Release Status: Draft for the very first release (lets you finish setup in the console before it goes live).
• JSON Key File: a file that lets Capawesome Cloud upload to Google Play on your behalf. You create it in the Google Cloud Console as a “service account”, then invite that account as a user in the Google Play Console and give it release permissions.

Then create an Android → Release build (Google Play rejects Debug builds) and deploy it to the destination. It appears under Testing → Internal testing in the Google Play Console, where you add tester emails.

Full detail: Google Play Store Destination.

For the bigger picture (automatic submissions after a build, all tracks, and Firebase App Distribution), see Getting Started with App Store Publishing and our How to Distribute iOS and Android Apps to Testers guide.

✅ Success: Your build is live on TestFlight and/or the Google Play Internal track, and your testers have been invited.

Step 13: Add a Native Feature: The Camera

A Capacitor plugin is a small add-on that lets your app’s code use a real phone feature: camera, fingerprint or face unlock, location, and 50+ more. This is what separates a real native app from a website in a wrapper.

We’ll add the Camera plugin so users can photograph a receipt when adding an expense. If you later want to crop that receipt photo or shrink it before upload, How to Take and Edit Photos in a Capacitor App covers the plugins for that.

npm install @capacitor/camera && npx cap sync

Declare Camera Usage

Both platforms require you to declare why your app uses the camera, or it crashes when the camera opens. You only do this once.

iOS: open ios/App/App/Info.plist and add inside the top-level <dict>:

ios/App/App/Info.plist

<key>NSCameraUsageDescription</key>
<string>Spendly uses the camera to let you photograph receipts.</string>

Android: open android/app/src/main/AndroidManifest.xml and add inside the <manifest> tag:

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />

Use the Camera in Your App

Open the file that holds your “Add Transaction” form (it lives somewhere under src/; ask Lovable which file if you're unsure), and add this function plus a button:

Capacitor handles the permission dialog

You don’t write any code to ask for camera access. The first time a user taps the button, Capacitor shows the system “Allow camera access?” prompt, using the message you wrote in Info.plist.

✅ Success: Your code calls the Camera plugin and the project syncs without errors.

Hundreds more plugins, including Capawesome Insiders SDKs

The camera is one example. Capawesome maintains a large library of free, open-source Capacitor plugins, and for more advanced needs there’s Capawesome Insiders: premium, production-ready SDKs built and maintained by official Ionic Developer Experts, with priority support. Insiders covers native features like NFC, Biometrics, Bluetooth Low Energy, and more. Most Capawesome Cloud plans already include a couple of Insider SDKs.

Step 14: Add Live Updates (OTA)

Normally, every change to a native app (even a one-word typo fix) has to go through app store review, which can take days. Capawesome Cloud Live Updates let you push changes to the web part of your app (the screens, styling, logic and images Lovable generated) over the air, straight to users’ devices in minutes, with no review required.

Add the plugin in your first release

Adding a plugin requires a fresh native build and another store review. So install Live Updates now, before you have updates to ship. That way you’re never stuck waiting on review when you need to push a fix. (We’ll use exactly this capability in Step 16.)

Install and configure the plugin:

npm install @capawesome/capacitor-live-update@latest
npx cap sync

Add the plugin settings to capacitor.config.ts, pasting in the app ID you copied in Step 7:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.spendly.app',
  appName: 'Spendly',
  webDir: 'dist',
  plugins: {
    LiveUpdate: {
      appId: '00000000-0000-0000-0000-000000000000',
      autoUpdateStrategy: 'background',
      readyTimeout: 10000,
      autoBlockRolledBackBundles: true,
    },
  },
};

export default config;

• autoUpdateStrategy: 'background': the app checks for updates when it opens, downloads them silently, and applies them the next time it opens. No prompts, no extra code.
• readyTimeout + autoBlockRolledBackBundles: safety nets that automatically undo a broken update, so a bad release can't leave users with an app that won't start.

A quick word on channels: a channel is like a named mailbox for updates. Each installed app checks one mailbox, and you can use different ones for different audiences, for example staging for testers and production for everyone else. We're not setting one here, so the plugin uses your app's built-in default channel, which is where we'll deliver the update in Step 16.

The safety net needs your app to report “I started fine” as early as possible, which is what ready() does. In a Lovable app, open src/main.tsx and add near the top:

import { LiveUpdate } from '@capawesome/capacitor-live-update';

void LiveUpdate.ready();

Then sync:

npx cap sync

✅ Success: The Live Update plugin is installed, configured with your app ID, and ready() is called on startup.

Step 15: Rebuild the Native App in the Cloud

We added two plugins (Live Update and Camera) and a new permission. Those are native changes, so they need a fresh native build. A Live Update alone can’t deliver them. First commit and push your changes:

git add .
git commit -m "Add Live Updates and Camera plugin"
git push

Then trigger a new build exactly like in Step 10: in the Console, open the Builds page → Build from Git → select main, your platform, the signed build type, and your certificate → Build.

Install this new build on your iPhone (TestFlight or direct install, as in Step 11). Your phone now runs a version of the app that includes the camera and can receive live updates.

✅ Success: The updated build with the camera installs and runs on your iPhone.

Step 16: Fix the Status Bar via Live Update

Look closely at the app on your iPhone. There’s a good chance the very top, your header or title, is tucked underneath the status bar (the clock and battery), or behind the notch. The bottom looks fine; the top is cut off.

This happens because Capacitor draws your app across the entire screen, including behind the status bar and the notch. The part of the screen those cover is called the safe area, and the phone tells your app how big it is through built-in CSS values named env(safe-area-inset-top), -bottom, -left and -right. Your app has to add that much space itself.

Why the bottom often looks right but the top doesn’t

Many Lovable apps already add env(safe-area-inset-bottom) at the bottom, so that side is handled. The top headers usually use a fixed amount of space (like pt-6) that ignores the safe area, so they slip under the status bar.

First, confirm the <meta name="viewport"> line in index.html includes viewport-fit=cover (Lovable apps usually already do; it's what switches the safe-area values on):

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Then add the safe-area space to the top of each page header. The trick is max(): keep the original spacing in the browser, and grow to the safe area on phones that need it:

- <header className="... px-5 pt-6 pb-2">
+ <header className="... px-5 pt-[max(1.5rem,env(safe-area-inset-top))] pb-2">

Do this for each screen’s top header. If a header has a colored or gradient background, this is exactly what you want: the background still fills the screen edge-to-edge, and only the content shifts down below the status bar.

Let Lovable do the edit

You can ask Lovable: “The app content runs under the status bar at the top on mobile. Add env(safe-area-inset-top) to the top padding of each page header using max(), keeping the existing padding as the minimum."

Ship the Fix with a Web Build

This fix only touches styling (no new plugin, nothing native), so we can push it straight to the installed app without a new native build or a trip through app review.

A live update is created with a Web Build. It works exactly like the iOS and Android builds you already did, except you pick Web as the platform. It’s the same Builds page, fully in the Console, no terminal.

First, push your fix to GitHub so the cloud can build from it:

git add .
git commit -m "Fix top safe area"
git push

Then, in the Console:

1. Open the Builds page and click Build from Git.
2. Select your main branch and choose Web as the Platform, then click Build. (Web builds run your npm run build in the cloud in a few seconds.)
3. When it finishes, deploy that build to your app’s default channel. Since we didn't set up a custom channel in Step 14, that's the one your installed app checks automatically.

You can watch it on the Deployments page, and roll back to a previous build from there anytime.

Channels are how the right update reaches the right app

A web build is deployed to a channel, and each installed app checks one channel. Every app comes with a default channel, which is what we use here. Once you have real users on several app versions, versioned channels make sure each update only reaches the app versions it works with. (See also Web Builds.)

Watch the full Live Updates Console walkthrough:

https://youtu.be/rF1yxzR8tnE

Full guides:

• Getting Started with Live Updates
• Capacitor Live Updates: The Complete Guide to OTA Updates

Force-close to trigger the update during testing:

With the background setting from Step 14, the app checks for updates when it opens (and when you come back to it, if the last check was over 15 minutes ago). While testing, fully close and reopen the app, wait ~15–30 seconds, then open it once more to see the change applied.

✅ Success: The header now sits below the status bar, fixed on your device without rebuilding the native app or going through review.

Step 17: Prepare Your App Store Listing

Your app is built, installable, and you can already push instant updates. What remains before it goes live on the public stores is mostly paperwork. Apple and Google both want a complete listing before you can submit: an icon, screenshots (Apple insists on iPhone 6.9-inch captures), a name and description, a privacy policy URL even for free apps, an age rating, and the data-collection disclosures. How to Prepare Your App Store Listing walks through each item with the exact sizes.

What’s Left to Submit

This guide got you all the way to a signed, installable app with live updates wired in. To publish, you still need to:

1. Complete Google Play’s closed testing period (personal accounts created after Nov 13, 2023): at least 12 testers for 14 consecutive days before you can request production access. iOS has no equivalent. Details here.
2. Submit for review. In App Store Connect, assign your build and click Submit for Review (Apple review: ~3–5 days). For Google Play, apply for production access after closed testing (review: ~3–7 days). Capawesome Cloud App Store Publishing can automate both submissions with one click, or automatically on every successful build via Automations.

Our companion guide covers this end of the journey in full detail: Convert a Web App to a Mobile App in 11 Steps.

Common Errors and Fixes

Setting this up for the first time almost always involves a little back-and-forth. Several of these came up live in the companion video, which is a good thing, because you get to see exactly how to fix them. Here are the ones you’re most likely to hit:

• Could not find the web assets directory: ./dist (when running npx cap add or npx cap sync). You ran the command before building. Run npm run build first so the dist/ folder exists, then retry. If your app builds into a folder with a different name, make sure webDir in capacitor.config.ts matches it.
• “This App ID … is not available” / bundle ID already taken (registering the App ID in Apple). Bundle IDs are globally unique. Pick a reverse-domain ID based on a domain you control (e.g. com.yourcompany.spendly).
• iOS build fails after changing the bundle ID. If you change the bundle ID in Apple but not in your project (or vice versa), they no longer match and the build fails. The bundle ID in your native project must equal the App ID registered in Apple. Find-and-replace it across ios/ and android/, commit, and rebuild.
• “Google Play Android Developer API has not been used in project … or it is disabled.” Open the link in the error to the Google Cloud Console, enable the API, wait a moment, and re-run the deployment.
• “APK has been signed in debug mode.” Google Play won’t accept a debug-signed build. Create an Android → Release build signed with your keystore, then deploy that.
• Deployment rejected: version already exists. Both stores reject a build whose version number they already have. Increase your app’s version number, create a new build, and deploy that one. To have the number increase on its own, see Introducing CapVer.

When a build fails, the Console keeps full logs, and Ask AI turns the error into a plain-English cause and fix. For deployment issues, see App Store Publishing Troubleshooting and Live Updates Troubleshooting.

Can Lovable publish my app to the App Store or Google Play directly?

No. Lovable publishes to the web only, as its own mobile FAQ states. To reach the stores, export the code to GitHub, add Capacitor, and build the native iOS and Android apps yourself or in the cloud, which is what this guide does. Your Lovable project stays the single codebase; the native shell is generated around it.

My Lovable app is server-rendered. Do I need to rebuild it as a single-page app?

Not from scratch, but Capacitor does need a folder with an index.html that contains the whole app, and a server-rendered app doesn't produce one. Ask Lovable to switch the existing project to a single-page app (or to a static build); it keeps your screens and logic and only changes how the app is packaged. Then point webDir at the folder it produces.

Why does my build fail with “Could not find the web assets directory: ./dist”?

You ran npx cap add or npx cap sync before building the web app, so the dist/ folder Capacitor expects doesn't exist yet. Run npm run build first, then retry. Double-check that webDir in capacitor.config.ts matches the folder your build actually produces.

Do I have to install Xcode or Android Studio to follow this guide?

No, for the main path. The entire build-and-install flow (cloud builds, TestFlight, direct device installs) works without either, since Capawesome Cloud builds on its own Apple computers. Xcode and Android Studio are only needed if you want a virtual phone on your own computer, which the guide calls out as optional and considerably heavier to set up.

No. Adding a plugin changes the native part of the app, so it needs a fresh native build and a new store submission; a Live Update can only change the web part. That is why the guide installs the Live Update plugin in the very first release: by the time you need to ship a fix, the app already knows how to receive it.

Because most Lovable-generated apps already add safe-area space at the bottom with env(safe-area-inset-bottom), but top headers typically use a fixed amount of space that ignores the status bar. Since Capacitor draws your app across the whole screen, the header needs the same treatment on top ( max() combined with env(safe-area-inset-top)) that the bottom likely already has.

Try Capawesome Cloud

Build your Lovable app for iOS and Android in the cloud, push fixes over the air, and submit to the stores from one place, on any operating system.

Try Capawesome Cloud Free

Final Thoughts

If your Lovable app is already a single-page app, start at Step 4 and let the cloud handle the native side. If it is server-rendered, switch it to a single-page app first, because nothing else in this guide works until it does.

Add the Live Update plugin to your very first release, even with nothing to ship yet. Every other feature you can add with a new native build, but a missing Live Update plugin means another store review before you can push your first over-the-air fix.

From here, finish publishing with the store listing, Google’s closed testing and the submission itself in Convert a Web App to a Mobile App in 11 Steps, let Automations turn every git push into a build, a store submission and a live update, and browse the Capacitor plugin library for biometrics, push notifications and geolocation.

Got stuck somewhere? The Capawesome Discord server is active and friendly, so drop your question there. And subscribe to the Capawesome newsletter to stay up to date on new plugins, Cloud features, and guides like this one.

Originally published at https://capawesome.io on June 26, 2026.

Convert Lovable Apps to iOS and Android Apps was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

The problem is that every tutorial you find was written for people who already live in Xcode and Android Studio. They assume you have a Mac, know what a provisioning profile is, and have configured Gradle before. If you’re coming from the web world — or you’re an indie maker who just shipped a React or Vue app — those guides feel like they start three levels above where you are.

This guide starts at zero. It covers every step from “I have a web app” to “my app is live on both stores and I can push fixes without waiting for review” — using tools that handle the painful parts for you.

We’ve walked hundreds of users through this exact process. Here’s everything we’ve learned, in one place.

Who This Guide Is For

This guide is for you if any of these sound familiar:

• You built a web app with React, Next.js, Vue, Angular, Svelte, or any other framework and want to ship it as a native app
• You’re vibe-coding a product with Claude, Cursor, or Copilot and want to reach mobile users
• You have a working app but have no idea how to get it into the App Store
• You’ve been burned by App Store and Google Play Store review delays and want a way to push fixes instantly
• You need to build for iOS but don’t own a Mac

By the end of this guide you’ll have:

• A native iOS and Android app built from your existing web code
• Both apps live on the App Store and Google Play
• A system to push bug fixes and new features to users in minutes — without app store review

Step 1 — Convert Your Web App to Native with Capacitor

Capacitor is an open-source runtime that wraps your web app in a native iOS and Android shell. Your code — React, Angular, Vue, Svelte, plain HTML, whatever — runs inside a WebView, and a native bridge connects it to device APIs through plugins.

This is fundamentally different from React Native or Flutter. There’s no rewrite. No new framework. If you can npm run build your app today, you can have a native version of it running on a phone by the end of this afternoon.

Why Not a PWA?

Progressive Web Apps are great for some use cases, but they have hard limits: you can’t publish them on the App Store or Google Play, iOS PWAs have persistent bugs with notifications and offline support, and you can’t access device APIs like biometrics, NFC, or Bluetooth. A Capacitor app is a real, store-listed native app — it just happens to be powered by web code.

Who Uses Capacitor?

Capacitor isn’t a new framework. It’s the runtime behind production apps used by millions of people every day — from indie makers to Fortune 500 companies across fintech, healthcare, logistics, and consumer products. The framework is maintained by the Ionic team, has over 12,000 GitHub stars, and ships regular releases.

If you’re worried about picking something that gets abandoned: Capacitor is the foundation of an entire ecosystem of tools, services, and companies that depend on it long-term. It’s not going anywhere.

Setting Up Capacitor

Install Capacitor in your existing web project:

npm install @capacitor/core @capacitor/cli
npx cap init

Add the iOS and Android platforms:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Build your web assets and sync them to the native projects:

npm run build
npx cap sync

That’s it. You now have a ios/ and android/ folder at the root of your project containing full native Xcode and Android Studio projects — pointing at your web build output. Every time you run npx cap sync, Capacitor compiles your web assets and copies them into the native projects, so the app always reflects your latest code.

Works With Any Framework

Capacitor is genuinely framework-agnostic. The setup is the same whether you use:

Deep-dive guides: For more specific walkthroughs related to this topic, check the following guides:

• Build Mobile Apps with Any Web Framework and Capacitor
• How to Wrap an Angular App with Capacitor and Firebase

The Vibe Coding Path: Let an AI Agent Do the Setup

If you’re building with an AI coding assistant, install the Capawesome Skills to give your agent deep Capacitor knowledge:

npx skills add capawesome-team/skills --skill capacitor-app-creation

Then prompt your agent (Claude Code, Cursor, Copilot):

Use the `capacitor-app-creation` skill to set up Capacitor in my project.

The agent will initialize Capacitor, add the platforms, fix your capacitor.config.ts, and sync everything - correctly, on the first try, without you having to know what npx cap sync does.

Step 2 — Add Native Features with Plugins

A plain Capacitor app renders your web UI on a phone. That’s useful, but the real power comes from connecting your JavaScript code to native device features through plugins.

Here’s a sample of what’s possible with the Capawesome plugin library:

Authentication & Security

Biometrics Plugin — Add Face ID, Touch ID, and fingerprint authentication to your app. One call to authenticate() handles the platform-specific prompt on both iOS and Android.

Vault Plugin — Store secrets (tokens, keys, passwords) behind biometric or device-passcode protection. Backed by hardware-level encryption on both platforms.

Apple Sign-In / Google Sign-In — Native OAuth flows that look right on every device.

Audio Player / Audio Recorder — Record and play back audio with full platform integration. Background playback, lock screen controls, the works.

File Picker — Let users pick files from their device with the native file browser. Returns the file URI or base64 data.

Scanning & Recognition

ML Kit Barcode Scanning — On-device barcode and QR code scanning using Google’s ML Kit. No server required.

ML Kit Document Scanner — Let users scan documents with edge detection and automatic cropping, just like a proper scanner app.

NFC Plugin — Read and write NFC tags on both Android and iOS.

Connectivity

Bluetooth Low Energy — Connect to BLE peripherals: fitness trackers, IoT devices, medical devices, beacons.

WiFi Plugin — Get WiFi state, SSID, and signal strength.

Payments & Monetization

Purchases Plugin — In-app purchases and subscriptions via RevenueCat. One SDK, both stores.

Superwall Plugin — A/B test paywalls without app updates.

Firebase Integration

The full Firebase plugin suite covers Analytics, Authentication, Crashlytics, Cloud Messaging (push notifications), Remote Config, Firestore, Cloud Storage, and more — each as a separate, tree-shakeable package.

And Many More

Capawesome maintains 50+ plugins covering sensors (accelerometer, barometer, pedometer), productivity (contacts, app shortcuts, badge count), printing, screen orientation, speech recognition and synthesis, SQLite, geolocation, and more.

Can’t find the plugin you need?

Capawesome offers custom plugin development — the team has built custom Capacitor plugins for dozens of companies. Get in touch.

Step 3 — Create Your Developer Accounts

You need accounts on both platforms before anything can go live. This is a one-time setup, but it has real timelines you need to plan around.

Apple Developer Program — $99/year

Sign up at developer.apple.com/programs/enroll. Apple takes up to 48 hours to approve new accounts. If you’re registering as an organization (to publish under a company name rather than your personal name), you’ll also need a D-U-N-S number, which takes 5–7 business days to obtain.

Start this process first. It’s the most common cause of delayed launches.

Google Play Console — $25 one-time

Sign up at play.google.com/console/signup. The $25 fee is paid once and your account never expires. Identity verification usually completes within a few hours.

Full walkthrough: How to Create Your Apple Developer and Google Play Developer Accounts

Step 4 — Generate Your Signing Certificates

Every app submitted to the stores must be cryptographically signed — this is how Apple and Google verify the build came from you. You need:

• iOS: a distribution certificate + provisioning profile
• Android: a keystore file

This is where most first-timers get stuck. The official Apple documentation for code signing is notoriously opaque. The good news: you can generate everything you need directly in your browser, without Xcode or Android Studio.

Free Browser Tools

iOS Certificate Generator generates iOS development and distribution certificates along with a CSR file — the same thing you’d normally do through Keychain Access on a Mac, but in your browser. No sign-up, nothing leaves your device.

Android Keystore Generator creates a PKCS#12 keystore file for signing your Android app. Fill in the fields, download the file, store it somewhere safe — you’ll need it for every future release.

iOS UDID Finder — if you need to register a test device for development builds, this finds your device UDID from any browser.

Once you have your certificates, upload them to Capawesome Cloud once. Every subsequent build picks them up automatically — no local keychain required, no credentials in your CI environment variables.

• Docs: iOS signing certificates
• Docs: Android signing certificates

For a detailed explanation of what certificates and provisioning profiles actually are:

iOS Certificates and Provisioning Profiles Explained

Step 5 — Build Your Native App in the Cloud

Traditionally, building an iOS app requires a Mac with the right version of Xcode. Building a production Android APK requires Android Studio with the right Java and Gradle versions configured. Both need your signing credentials stored locally.

Capawesome Cloud Native Builds eliminates all of that. You connect your Git repository, and the build happens on Apple Silicon M4 Pro hardware in the cloud — delivering typical build times of 2–5 minutes. You can trigger builds from Windows, Linux, or a Chromebook. No Mac required.

How It Works

Step 1: Connect your repository

Link your GitHub, GitLab, Bitbucket, or Azure DevOps repository to Capawesome Cloud. This is a one-time OAuth authorization.

Step 2: Trigger a build

From the Capawesome Cloud Console, choose your branch, select iOS or Android, pick your build type (Debug, Release, Simulator), and hit Build.

Step 3: Download or deploy

When the build completes, download the IPA or APK/ABB directly — or chain it into an App Store Publishing destination with one click.

Build From the CLI

You can also trigger builds from the terminal with the Capawesome CLI:

npx @capawesome/cli apps:builds:create \
  --platform ios \
  --buildType release

This makes it easy to plug Capawesome Cloud into any existing CI pipeline — GitHub Actions, GitLab CI, Bitbucket Pipelines, Jenkins, or anything else.

Advanced Features

• Environments — define separate configurations for dev, staging, and production builds
• Auto-increment build numbers — never manually bump your build number again
• Build without Git — upload a ZIP if you don’t want to connect a repository
• Assist — Ask AI — when a build fails, click Ask AI to get a plain-English diagnosis with a suggested fix

Full setup guide: Getting Started with Native Builds

Step 6 — Distribute to Testers

Before going to the public stores, get your app onto real devices. Finding bugs on a physical device — especially iOS — is consistently different from finding them in a simulator.

Capawesome Cloud App Store Publishing supports all the major testing channels:

TestFlight (iOS) — Upload your IPA to TestFlight and invite testers by email. Testers install the app from the TestFlight app. Internal testers (up to 100) skip the review queue; external testers go through a simplified review that usually takes a few hours.

Google Play Internal Testing — Share your app via a link immediately after upload, with no review. Testers install it directly from the Play Store.

You can also install a build directly on a device from the Capawesome Cloud Console without going through any store:

Full guide: How to Distribute iOS and Android Apps to Testers

Step 7 — Prepare Your Store Listing

This is where most first-timers hit an unexpected wall. The app is built, it works, but you can’t submit it without a complete store listing. Apple and Google require:

• App icon — 1024×1024px for iOS (no transparency), 512×512px for Google Play
• Screenshots — Apple now requires iPhone 6.9" (1320×2868px) screenshots; these are mandatory
• App name and description — Apple gives you 30 characters for the name, 30 for a subtitle, and 100 characters of keywords (comma-separated, don’t repeat what’s in the name)
• Privacy policy URL — Required by both platforms, even for free apps with no data collection
• Age rating — Calculated from a questionnaire in each store’s console
• Data collection disclosures — Apple’s Privacy Nutrition Labels and Google’s Data Safety section both require you to declare every type of data your app collects, including data from third-party SDKs

The full checklist with every requirement, device size, and tool recommendation:

How to Prepare Your App Store Listing

Step 8 — Complete Google Play’s Closed Testing Period

This is the most common surprise for first-time publishers, and it can delay your Android launch by weeks.

For personal developer accounts created after November 13, 2023, Google Play requires new apps to complete a closed testing period before they can publish to the public ( source):

• You need at least 12 testers who actively opt in via a special link
• The testing period must run for at least 14 consecutive days
• After 14 days with 12+ active testers, you can apply for production access

Organization accounts are not subject to this requirement.

This means your Google Play launch is a minimum of two weeks from when you have 12 testers opted in. Start recruiting testers the moment your first Android build is ready — don’t wait until you’re “ready to launch.”

Good places to find testers: your existing user base (if any), the Capawesome Discord community, your company’s Slack, friends, family.

The App Store does not have this requirement — iOS apps go live immediately after Apple’s review.

Step 9 — Submit for Review

With your store listing complete and testing done, you’re ready to submit.

App Store (iOS)

In App Store Connect, set your app’s release strategy (manual or automatic after approval), assign the build you want to submit, and click Submit for Review. Apple’s review typically takes 3–5 days for new apps.

Common reasons for rejection: — Missing privacy policy — App crashes on launch (test on a real device, not just a simulator) — Metadata mismatch (screenshots don’t match the app’s actual UI) — Missing required functionality explanations — Login credentials not provided. You must provide the review team with an active and functional test account. Because App Review is an automated and manual process, the reviewers cannot access account-restricted features without valid login information.

Be careful with all these requirements, because even though you can resubmit your app after a rejection, each resubmission takes longer to be reviewed.

Google Play

After your closed testing period, apply for production access in the Google Play Console. Once approved, your initial review typically takes 3–7 days.

Automated Submissions with Capawesome Cloud

Capawesome Cloud App Store Publishing automates the submission step entirely. You connect your App Store Connect API key and Google Play service account once, configure your store destinations, and then publish with a single click — or automatically on every successful native build via Automations.

Supported destinations: — Apple App Store (production) — TestFlight (internal and external) — Google Play (Internal, Alpha, Beta, Production) — Firebase App Distribution

When a submission fails, Ask AI in the Capawesome Console parses Apple’s or Google’s validator output and tells you exactly what went wrong and how to fix it — in plain language.

Step 10 — Set Up Live Updates: Your Biggest Advantage

Once your app is approved, this is the feature that changes everything about how you iterate.

The problem with native app updates: Every change you ship — a bug fix, a copy tweak, a new feature — must go through the App Store review queue. That’s 1–5 days. For critical bugs, that’s an eternity.

Live Updates bypass the queue entirely.

Because Capacitor separates your app into a native shell and a web layer (HTML, CSS, JavaScript, and static assets), you can update the web layer over the air — directly to users’ devices, in minutes.

Can update: any change to your HTML, CSS, JavaScript, images, fonts, JSON data, and other static assets.

Cannot update: changes that require new native code, new Capacitor plugins, new iOS/Android permissions, or changes to Info.plist / AndroidManifest.xml. Those still need a native build and a store review.

In practice, the vast majority of day-to-day iteration — UI changes, bug fixes, new screens, content updates — falls in the “can update” category.

Setup

Install the Live Update plugin:

npm install @capawesome/capacitor-live-update@latest
npx cap sync

Configure it in capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    LiveUpdate: {
      appId: 'your-app-id-from-capawesome-cloud',
      autoUpdateStrategy: 'background',
    },
  },
};

export default config;

autoUpdateStrategy: 'background' is the recommended default - the app checks for updates at every launch, downloads them silently in the background, and applies them the next time the user opens the app. No code changes, no user prompts.

Shipping a fix from that point forward:

npm run build
npx @capawesome/cli apps:liveupdates:upload

Done. Every user gets the fix on their next app launch.

Capawesome Cloud Live Updates includes features that enterprise teams depend on:

Channels — ship different bundles to different user segments. Useful for A/B testing, staged rollouts, or keeping your beta users on a separate track.

Rollouts — gradually roll out a new bundle to 10%, 25%, 50%, then 100% of users. Watch your error rates before committing to a full release.

Rollbacks — if something goes wrong, roll back to the previous bundle instantly from the console.

Code Signing — RSA-sign your bundles so the Live Update SDK verifies authenticity on every device before applying an update.

Delta Updates — only ship the files that changed, not the entire bundle. Dramatically reduces update size and delivery time for returning users.

Device Management — force specific devices to a specific channel. Great for QA devices, internal testing, or enterprise deployments.

Include the Live Update plugin in your first release — even before you have updates to ship. Adding a new plugin requires a new Native Build and another store review, and that’s exactly the situation you don’t want to be in when you’re trying to push a critical fix.

Full documentation:

• Getting Started with Live Updates
• Capacitor Live Updates: A Complete Guide to OTA Updates
• Update Strategies
• Live Updates Best Practices

Step 11 — Automate Everything

Once you’re comfortable with the flow, the final step is connecting the pieces so that a git push triggers the entire pipeline without you touching a dashboard.

Capawesome Cloud Automations lets you define end-to-end pipelines:

git push to main
  → Trigger Native Build (iOS + Android)
  → On success: publish to TestFlight + Google Play Internal
  → On build approval: deploy Live Update to production channel

Automations can be triggered on a Git push to a specific branch or tag. When a build or deployment completes, Capawesome Cloud can send a webhook with the result — making it easy to post notifications to Slack, Microsoft Teams, Discord, or any other tool, so your team knows when a build succeeds or fails without watching the console.

For CI/CD pipelines you already have, the Capawesome CLI and REST API let you trigger any action from GitHub Actions, GitLab CI, Bitbucket Pipelines, Azure DevOps, or Jenkins.

Guides:

• Capacitor CI/CD in 2026: Why Specialization Wins
• CI/CD for Capacitor: Common Pitfalls and How to Avoid Them
• GitHub Actions integration
• GitLab CI/CD integration

Everything Inside Capawesome Cloud

Here’s the full picture of what Capawesome Cloud gives you — all under one roof, one subscription, one dashboard. All plans include a 14-day free trial.

Native Builds

Cloud-based iOS and Android builds on Apple Silicon M4 Pro. No Mac, no build servers to manage. Average build time: 2–5 minutes. Includes managed code signing, build history, downloadable artifacts, environment variables, and full build logs.

Thousands of native builds are completed on Capawesome Cloud every month.

OTA updates delivered over a global CDN. Includes channels, rollouts, rollbacks, RSA code signing, delta updates, device management, and analytics.

App Store Publishing

One-click submissions to TestFlight, the App Store, Google Play (all tracks), and Firebase App Distribution. Supports multiple destinations per app — ideal for white-label products or regional variants. Encrypted credentials, protected destinations with role-based access control, and full audit logs.

Thousands of App Store updates deployed every month.

Automations

Automatically trigger native builds from Git events — on every push to a branch or on tag creation. Chain builds with store publishing and live update deployments in a single pipeline. When a build completes, Capawesome Cloud sends a webhook with the result so you can connect it to any notification tool.

Assist — AI Diagnostics

When a build or deployment fails, Ask AI turns the raw validator output from Apple, Google, or your build logs into a plain-language cause → explanation → suggested fix. Opt-in per click, zero data retention.

Integrations

GitHub, GitLab, Bitbucket, Azure DevOps, GitHub Enterprise, GitLab Self-Managed, Slack, Microsoft Teams, Discord.

Security & Compliance

• GDPR compliant, data hosted in Germany
• ISO 27001 certified (our data center partners)
• SOC 2 Type II (report available on request)
• All credentials encrypted at rest
• RSA code signing for live update bundles

Need Expert Help? We Do That Too

Building a Capacitor app is learnable, but sometimes you need someone who’s already made all the mistakes.

The Capawesome team offers consulting services for teams that need hands-on help:

• Capacitor app development — architecture, development, deployment, and maintenance
• Custom Capacitor plugins — if no existing plugin does what you need, we build it. We’ve delivered custom plugins for dozens of companies, often within a few days
• Collaborative support — work alongside your team for architecture reviews, code reviews, debugging, and pairing sessions
• CI/CD setup — get your build and deployment pipeline configured correctly from the startThe Complete Checklist to Deploy a Mobile app

Check: The Complete Checklist to Deploy a Mobile app

Final Thoughts

The mobile app store process has a reputation for being painful — and for good reason. The certificate maze, the review queue, the toolchain requirements, the surprise gotchas like Google’s closed testing period — none of it is developer-friendly by default.

But the actual hard parts are a small fraction of what people worry about. With Capacitor handling the native layer, Capawesome Cloud handling the build and deployment infrastructure, and a handful of free browser tools handling the certificate setup, the genuinely difficult stuff is gone. What’s left is building your product.

If you get stuck at any step, the Capawesome Discord is active and the team is there. And if you want someone in the trenches with you, consulting is available.

Subscribe to the Capawesome newsletter for updates on new plugins, Cloud features, and guides like this one.

Start your 14-day free trial

Originally published at https://capawesome.io on June 4, 2026.

11 Steps to Get Your Web App on the App Store was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

At some point, every mobile team hits the same realization 🤯.

CI/CD is the moment your app stops depending on one person’s laptop.

It’s the moment when builds become reproducible, releases become predictable, and shipping stops feeling stressful.

Suddenly you have:

• reproducible builds
• fewer app store rejections
• no certificate headaches
• faster hotfixes
• and a team that can ship without fear

But many mobile apps still ship the old way.

Manually.

And that’s where the problems start.

The Hidden Cost of Manual Mobile Releases

Every team eventually runs into the pain of manual releases.

If your team hasn’t yet, don’t worry.
It will happen 😬.

Manual release processes usually look something like this:

• someone has “the machine that does the builds”
• the keystore is somewhere… hopefully backed up
• certificates expire at the worst possible moment
• the release checklist lives in a Notion doc nobody reads
• and everyone holds their breath during release day

And then one day it happens…

You need to ship an urgent fix.

But the person who usually makes the build is…

on vacation.

Somewhere.

Possibly hiking.

Maybe halfway up a mountain.

With no signal.

Now the team has two options:

1. Wait until they come back.
2. Try to reproduce the build on another machine and pray it works.

Neither option is great.

A proper CI/CD pipeline solves exactly this problem.

No panic.
No mystery steps.
No “special laptop required”.

Anyone on the team can trigger a reproducible build at any time.

And that’s a huge difference.

Studies on software delivery show that teams with mature CI/CD practices deploy up to 46× more frequently and experience significantly fewer failures than teams without automation.

That’s not just a DevOps improvement.

That’s a business advantage.

CI/CD for Web Apps Is Easy

If you’ve set up CI/CD for a web application before, you might wonder what the big deal is.

For web apps, the process is usually simple:

1. Install dependencies
2. Run tests
3. Build static files
4. Deploy to a server or CDN

Done.

But mobile apps are a completely different story 😵‍💫.

Why Mobile CI/CD Is Harder

Mobile apps introduce complexity that simply doesn’t exist in web deployments.

Let’s break down the main four reasons.

1. Native compilation

Mobile apps include native Android and iOS projects.

That means your pipeline must build:

• Android with Gradle
• iOS with Xcode

And here’s the catch:

Xcode only runs on macOS.

So your CI/CD environment needs macOS build machines in order to compile iOS apps.

This alone already makes mobile CI/CD more complex than most web pipelines.

2. Code signing

Mobile apps must be cryptographically signed before distribution.

For Android, you need:

• a keystore
• signing configuration
• secure key storage

For iOS, things get even more complicated:

• distribution certificates
• provisioning profiles
• Apple Developer account integration

Managing these assets securely inside CI/CD pipelines is one of the most common causes of mobile build failures.

3. Two platforms, double the complexity

Most teams ship to both platforms: Android and iOS.

Every release potentially produces two different artifacts: APK or AAB, and IPA.

Each platform has its own:

• toolchain
• signing process
• configuration
• store submission flow

So your pipeline has to orchestrate two completely different ecosystems.

4. App store review cycles

Unlike web apps, mobile apps cannot deploy instantly (*).

Every update must go through store review:

• Apple App Store
• Google Play Store

This introduces delays that can make rapid iteration harder.

(*) But here’s where things get interesting. Many teams combine CI/CD with Live Updates to bypass this bottleneck for web-layer changes.

If you’re building your mobile app with Capacitor, you already have a bit of a superpower: your app’s UI, logic, and assets live in the web layer. Which means that many changes don’t actually require a full app store submission.

Instead of: wait → review → wait → approval → release

You can simply push updated web assets directly to your users.

No review queue.
No waiting days for approval.
No staring nervously at Native Stores.

Think of it like deploying a web app… except it’s already installed on thousands of devices. Suddenly hotfixes, small UI tweaks, copy changes, and minor improvements can ship in minutes instead of days 🚀.

And your users get the update the next time they open the app — like magic.

Not bad for what is essentially a web deployment disguised as a mobile update.

The Real Goal of CI/CD

CI/CD is not just about automation. It’s about making releases boring.

When CI/CD is done right:

• builds are reproducible
• releases are predictable
• failures are easier to diagnose
• hotfixes ship quickly

High-performing DevOps teams are able to deploy multiple times per day, while low-performing teams may deploy only once every several months.

Automation is what closes that gap.

CI/CD for Capacitor Apps

Capacitor apps add another dimension to the pipeline.

Your CI/CD system needs to handle:

• web builds
• native sync
• Android builds
• iOS builds
• code signing
• artifact storage
• distribution to testers or stores

Setting all this up manually with generic CI tools like GitHub Actions is possible.

But it often requires a lot of configuration and ongoing maintenance.

That’s where specialized mobile CI/CD platforms can help 🥁.

Automating Mobile Builds with Capawesome Cloud

One solution designed specifically for Capacitor apps is Capawesome Cloud.

👉 https://cloud.capawesome.io/

Capawesome Cloud provides CI/CD infrastructure tailored for mobile development.

Instead of maintaining complex pipelines, you can trigger mobile builds directly from your Git repository.

Typical workflow:

1. Connect your Git repository
2. Trigger builds from a branch, tag, or commit
3. Build Android and iOS apps in the cloud
4. Download artifacts (APK, AAB, IPA)
5. Distribute builds to testers or stores

The platform takes care of many of the painful parts of mobile CI/CD:

• manage Android and iOS build environments
• secure certificate and keystore management
• reproducible builds from Git references
• artifact storage and distribution

I know it sounds like magic… but sometimes the best engineering tricks feel that way 🪄.

Migrating from Appflow (or Any Other CI/CD Tool)

Many teams in the Ionic ecosystem are currently reevaluating their CI/CD setup.

Especially with the sunsetting of Appflow.

The good news is that migrating to Capawesome Cloud is often easier than expected.

Because the APIs and update strategies are so similar, most teams can migrate without major architectural changes to their apps.

Beyond the migration itself, many teams choose Capawesome Cloud because it provides:

• Native builds, Live Updates, and store publishing in one platform
• 3–5× faster builds with modern infrastructure
• significantly lower costs compared to Appflow
• active development and new features instead of a platform approaching end-of-life

In other words, migrating isn’t just about replacing Appflow — it’s an opportunity to modernize your mobile CI/CD pipeline and simplify your release workflow.

Final Thoughts

CI/CD is one of the highest-leverage improvements a mobile team can make.

It reduces risk.
It speeds up releases.
And it removes a surprising amount of stress from release days.

If you’re still doing mobile releases manually, the cost is probably higher than it seems — in time, in risk, and in the releases that never happen because shipping is too painful.

Automation changes that.

If you’re building Capacitor apps and want help: setting up CI/CD from scratch, improving your current pipeline, or migrating from Appflow or another platform, feel free to reach out.

I’m always happy to help teams design a reliable mobile build and release workflow.

You can explore Capawesome Cloud and if you have any questions or run into issues with mobile CI/CD, feel free to message me.

Follow me on X for more content like this.

Happy shipping 🚀

The Day Your Mobile Release Process Breaks — And How CI/CD Fixes It was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

When I decided to migrate from Firebase 8 to version 9, I couldn’t find all the resources in one place. That’s why I decided to write about these changes, so you can easily follow them and keep your code up to date.

The latest version of Firebase 9 is a significant update that brings new features and benefits that make it easier for developers to build high-quality apps.

This release introduces a new modular API that enables tree-shaking, bundle size reduction, and other benefits that are optimized for the elimination of unused code.

Firebase 9 uses the modern JavaScript module format, which allows developers to selectively import only the features they need in their app rather than the entire library. Tree-shaking with Firebase version 9 can result in up to 80% less kilobytes than a comparable app built with version 8.

Upgrading to Firebase 9 may involve some effort to adjust the implementation of companion libraries like @angular/fire, RxFire, and the Firebase Capacitor plugin. However, the effort is worth it for the benefits of modularization and reduced app size.

It’s worth mentioning that Firebase version 8 will be frozen at some point in the future, meaning you will not receive any more updates or bug fixes.

While there is a Firebase compat package available to make the migration easier, it is only a temporary fix. I highly recommend upgrading to Firebase 9 to take full advantage of its benefits and keep your app up-to-date.

The effort required to upgrade to Firebase 9 may seem daunting, but it is a necessary step to ensure that your app is optimized for the best performance and user experience.

In conclusion, upgrading to Firebase 9 is essential for app developers who want to take full advantage of the latest features and benefits. With its modularized approach, reduced app size, and ongoing feature development, Firebase 9 is a must-have for any developer who wants to build high-quality apps that perform well and offer the best user experience.

So, what are you waiting for?

Upgrade to Firebase 9 today!

You can follow the migration guide here: https://ionicthemes.com/tutorials/getting-to-know-the-latest-firebase-9-update-and-features

Originally published at https://ionicthemes.com.

Upgrade your project to Firebase 9: Get the most out of the new features and API changes was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post we want to share with you the recipe we use at IonicThemes to build our starter templates. Hopefully you would learn how to approach the task of building reusable UI kits or design systems and create your own components to improve the efficiency in future projects.

I would like to start this post by talking about the term “Composition”. I believe the essence of software development is composition. And by composition I mean: The act of combining parts or elements to form a bigger element.

Compositions are formed by adding new objects to the previous ones, so that each of the latter is part of the former.

The process of software development is breaking down large problems into smaller ones.

Then, we can build components to solve those smaller problems, and compose them together to form a complete application.

Look around: composition is everywhere!

Components can be very diverse. We could define a component as something that can be useful on its own or that can also be combined with another element to form a bigger one.

Now think about this idea recursively. Because composition has no limits. You can compose objects as many times as you want.

But, composition is not only about software, it’s around us everywhere.

Almost everything in this world is made up of different elements or components and can be broken down into smaller pieces.

Getting back to building Ionic applications, we can divide elements in two categories: UI Components and Functionalities.

Let me show you a clear example of how we can apply composition when creating a classic Sign Up form.

Creating a Sign-up Form with Ionic components

For instance, let’s start by combining a few inputs, labels, and a button. We can agree that this is a decent sign-up form, right?

But, let’s go a step further and think about what will happen when the user submits the form with an invalid value. The app should suggest that there are existing errors which must be corrected. As a result, the user experience will be improved.

Also, adding a show/hide password component is really helpful to improve the UX for users on mobile devices or small screens.

Nowadays, we also need to add social sign in to the sign-up form, because nobody wants to remember another password. Also, adding social sign in to our mobile apps has a lot of benefits.

Do you see the difference between the first and the last form example? Picture this process as a composition of different elements, we combined different elements (labels, inputs, buttons, copy) and interactions (validations, hints, OAuth integrations) to drastically improve the usability and user experience for the sign-up form.

By having a bunch of individual pieces already built, you can combine them to create better experiences.

Well, that was just for the UI of a classic sign up page, but take a second to think of all the pieces and elements that any given app includes such as authentication flows, user management, all the UI components such as:

• Ionic lists
• Ionic modals
• Ionic cards
• Ionic menus
• Ionic tabs
• Ionic slides
• Image gallery in Ionic
• and this is just to mention a few.

As for functionalities:

• Maps in Ionic
• Ionic forms
• Navigation in Ionic
• notifications
• payments
• Ionic image handling
• and trust me, the list goes on and on.

In case you don’t get my point, what I want to show you is how an app is built by composing hundreds of building blocks and functionalities.

So if you, as a developer, pretend to build every piece of your application…, you are absolutely out of your mind!

Using and reusing Ionic components

Composition enables us to use and reuse components. And these components can either be created by you or by others.

I mean, if you are like us that builds multiple Ionic apps, you’ve probably gone through the sign-up page a couple of times, so, there’s no point in coding it each time.

You can focus on building it once and then reuse it as often as necessary and just customize the styles for each application.

I loved this quote from Eric Elliot, “A software developer who doesn’t understand composition is like a home builder who doesn’t know about bolts or nails.”

Save time, don’t repeat yourself

When building an app there are many repetitive tasks that you can avoid. Like the example from the sign-up page we saw before.

Thanks to the composition of multiple elements, we can save a lot of time. This frees us from having to be experts regarding all the aspects of developing an app.

You don’t have to be an expert in every aspect of creating an app. We just need to be good assemblers to combine all the building blocks that will result in our unique application.

What is more, the beauty of open source is collaboration. Being able to share your knowledge and extend the creation of other developers is something we have to be very grateful for. Personally, I learn a lot from seeing other people’s code.

From my point of view, collaboration and community are also a big part of composition, because you can use an element built by someone else and use it as it is, or you can use it as a suitable starter to build something else.

Okay, enough talking about all this theory, let’s see how to build any UI with Ionic.

Customizing and composing Ionic Elements

One of the features I love the most about Ionic Framework is the immense amount of components that are ready to use, customize and extend.

These elements are also beautifully crafted as Web Components enabling encapsulation and allowing them to be portable and easily reused.

In addition to this, each of these Ionic components consists of one or more custom elements.

For example, a card can be composed of images, labels and buttons. And this happens with many other Ionic UI components.

Regarding web components, I won’t go into details here but, if you aren’t familiar with them or if you are interested in learning more, we have an extensive article about Web Components in Ionic Apps.

For the purpose of this post, let’s divide elements in two categories:

• UI Elements
• Functionalities

Ionic Components customization strategies

There are different strategies we can use to customize and enhance Ionic components. Some of them are pretty straight forward, others require adding more code (HTML and CSS).

In the following sections I will explain how to progressively customize an Ion Checkbox using four different strategies.

Why a checkbox? Because I want to show you how we can achieve beautiful UIs through composition even with a dull and plain checkbox.

In the following image you can see a basic and raw Ion-Checkbox component.

I broke the customization down into four levels of effort and complexity and I built some code examples for each of these scenarios, so you can better understand what I’m trying to explain here. You can download all the source code of this example app.

1. Ionic CSS variables and Shadow Parts
2. Adding HTML and CSS
3. Customization based on component events
4. Customization based on functionalities

If you want to go over each of these customization strategies please refer to the original post.

Hope you enjoyed this Ionic Customization post. Thank you very much for reading and if you have any questions or feedback please leave a comment below.

Originally published at https://ionicthemes.com.

Customizing Ionic Components — How to build any UI with Ionic was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

Step 1 — Create the Angular component

• Create an Angular Component with a ContentChild IonInput.
• Add a toggle method that will be triggered when clicking the eye icon.
• This method will switch between showing the password text and the dots.
• Define a showPassword boolean var.

import { Component, ContentChild } from '@angular/core';
import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-show-hide-password',
  templateUrl: './show-hide-password.component.html',
  styleUrls: ['./show-hide-password.component.scss']
})
export class ShowHidePasswordComponent {
  showPassword = false;

@ContentChild(IonInput) input: IonInput;

constructor() {}

toggleShow() {
    this.showPassword = !this.showPassword;
    this.input.type = this.showPassword ? 'text' : 'password';
  }
}

Step 2 — Add the html markup for the component

• Create a simple anchor with our toggle method binded to the click event.
• Change the icon between eye open and eye closed depending on the showPassword var.

<ng-content></ng-content>
<a class="type-toggle" (click)="toggleShow()">
   <ion-icon class="show-option" [hidden]="showPassword" name="eye-off-outline"></ion-icon>
   <ion-icon class="hide-option" [hidden]="!showPassword" name="eye-outline"></ion-icon>
</a>

This is my show-hide-password.component.scss, to add some styles.

:host {
  display: flex;
  width: 100%;
  align-items: center;

.type-toggle {
    padding-inline-start: 0.5rem;

.show-option,
    .hide-option {
      font-size: 1.2rem;
      display: block;

// In case you want to use text instead of icons
      &:not(ion-icon) {
        text-transform: uppercase;
        font-size: 1rem;
      }
    }
  }
}

Step 3 — Use the Show / Hide password component

Just use the component with a <ion-input> as a content child.

<ion-item>
  <app-show-hide-password>
      <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
  </app-show-hide-password>
</ion-item>

That’s all.

That was easy right?

Go ahead and add it to your Ionic Framework App and show me the result.

Learn more about Ionic Framework!

Need help with the styling? Let me know in the comments.

Create a Show / Hide Password Component in Ionic & Angular was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

Around this time last year, we were writing about the new Ionic Framework version 4. It was a great deal compared to its predecessor, Ionic 3.

Luckily, the team at Ionic is very committed to keep pursuing their goal of making app development easier and recently announced the latest and much awaited Ionic 5 release.

It’s clear to me, as an insider, that Ionic is one of the top frameworks regarding the peace of innovation they bring to the game on each iteration (now supporting both Angular, React, and Vue!). They are fearless and confident in the direction they envision for the future of mobile and web development.

In this post we want to explain how to take advantage of the new benefits from Ionic 5. We will describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5.

For this post we created an Ionic 5 free demo app. It’s a CRUD app with some of the new Ionic 5 features such as swipeable modals, collapsible headers, segments, animations, as well as, lists, reactive forms, and navigation examples. Download it for free in IonicThemes.

What’s new in Ionic 5?

The highlights of this new release are mainly centered around design and UI/UX, featuring a brand new API to create outstanding animations, new and improved Ionicons icon library, components featuring iOS 13 design spec and also some useful customization improvements regarding component styling.

Animations API

The new Ionic Animations API, presents a shift from Javascript-driven animation libraries. This legacy approach followed by many well known animation libraries is problematic in many ways. Mostly because the browser is responsible for both rendering your animation and executing your animation event loop code at every frame in the same thread as the rest of your app’s code. This traduces on performance loss as the browser is forced to waste CPU time by executing your code on every frame.

Harnessing the Web Animations API, the new Ionic Animations API can offload to the browser all of the work required to run your animations. This way, the browser will be able to schedule and make optimizations so your animations will run smoothly. This new, open source animation utility is not only framework agnostic (yes, that means you can use it in Angular, React, Vue or just vanilla Javascript), but it also shines in the benchmarks performed by the Ionic team.

To be honest, this looked so promising that I had to give it a try. I included a custom animation to the Ionic 5 starter included in this post to showcase the new feature. The results are amazing, I would highly recommend giving the Ionic Animation utility a try.

We created a very simple animation when pressing a heart icon that can be useful when giving a fav or a like to something.

Improved components and UI/UX

Besides reworking many of the components ( Segment, List Header, among many more) to match the latest iOS 13 design spec, the new release includes changes that make customizing components easier.

Since Web Components and Shadow DOM were introduced in Ionic 4, customizing components has been one of the most arduous things to achieve. In part because of the encapsulation provided by Shadow DOM and part because of the lack of CSS custom variables available to tweak Shadow components.

In addition, Ionic 5 also shipped a new and vibrant color palette style guide including a set of colors specially tailored for dark mode support.

Ionicons 5

One of the highlights of this new release is the new version of Ionicons, the amazing web component icons library. As well as its predecessor, Ionicons 5 is distributed as a set of SVG icons instead of a font icon, for much better performance and less complexity.

With over 1200 icons, Ionicons 5 brings a massive number of new icons. Additionally, each icon now comes in three distinct weight variants outline, fill, and sharp. With this new approach, the set of icons position itself as a system inspired by the best of both (Material Design and iOS) platforms.

I have to say, though, that if you are migrating from Ionicons 4, there are some minor breaking changes.

Compatibility with other Frameworks

As you may know, apart from the original Angular official support (@ionic/angular), Ionic released an official react integration (@ionic/react) and they are working on a Vue integration as well (@ionic/vue, still in beta. They are waiting till Vue 3 stabilizes).

This multi-framework approach is possible thanks to the web components core implementation of the framework (@ionic/core). This means you can target almost any platform (desktop, mobile, browser, native) using the same toolset.

Also, I want to mention Ionic Capacitor, a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. Lately, we have been using it on every Ionic project and we are very happy with it. If you are new to the Ionic ecosystem learn more about the main differences between Capacitor and Cordova. It’s a really great contribution from the Ionic Team.

Performance

For all of you Angular developers out there, Ionic 5 brings great news regarding performance and optimizations to your Ionic Angular apps. The new Angular renderer (Ivy) enables apps to only require pieces of the renderer that they actually need, instead of the whole thing. This translates into smaller output files and consequently better load performance.

Angular 9?

Angular 9 and Ivy are supported in Ionic 5, however, they are optional. In fact, if you create a new Ionic app right now using the CLI, it will use Angular 8. If you want to upgrade to Angular 9 make sure to follow this guide.

Developer Experience

Starter templates are a great way to kickstart your project. The bare bones, basic starters that come with Ionic have been redesigned to match the new Ionic 5 UI.

The default starters are very limited in the functionality they showcase, that’s why we built a more in-depth starter for this post.

You can download the free code of this Ionic 5 starter app in IonicThemes website.

If you are more serious about your Ionic endeavor, or if you want to start creating your Ionic Framework app but don’t know how to start, I suggest you try our most advanced ionic starter template: Ionic 5 Full Starter App.

Use it to jump start your Ionic app development and save hundreds of hours of design and development. With more than 100 carefully designed views and components, it will help you grasp best practices and the new concepts of Ionic 5 development.

Try it both as a native app or as a full PWA on your mobile browser!

How to migrate from Ionic 4 to Ionic 5?

As usual, we get our hands on before writing any review or tutorial. In our case we choose to migrate our most complete starter template before writing this review. Considering Ionic Full Starter App a mid size project that touches almost every corner of the Ionic framework, its components and features, we can confidently say that migrating from Ionic 4 to Ionic 5 is a breeze.

I’m not going to lie to you, there are some breaking changes, but the Ionic Team did a great job documenting everything with lots of details and examples. In the following section I’m going to mention these breaking changes and point you in the right direction to resolve them.

Get the complete migration guide from ionic 4 to ionic 5.

Final thoughts on Ionic Framework 5

I hope this article helped you get to know the highlights of the new Ionic 5 release, and above all to calm fears about the migration process. As mentioned above, migrating from Ionic 4 to Ionic 5 does not mean rewriting your application, and can be easily achieved with minor effort.

If you want to learn more about Ionic Framework, at IonicThemes we have lots of free ionic 5 tutorials with practical examples so you can learn how to create the best mobile apps using Ionic Framework.

Remember that if you need help starting your Ionic 5 application we have built a super complete starter app that will help you in all the steps of developing an Ionic and Angular application. You can try the demo to see all the beautiful pages and components we built using Ionic Framework 5.

Need help with Ionic 5? Leave me a comment.

Originally published at https://ionicthemes.com.

What’s new in Ionic 5? — Free example starter to jump start your ionic app development! was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

At IonicThemes we strongly believe in the power of templates. Our templates are designed as modular starter apps to help you build your own app. They can be easily customized to create a unique Ionic app in record time, allowing you to focus on the uniqueness of your app and avoiding to be bogged down with time consuming repetitive coding.

“IonicThemes helps you get a real app up and running fast by handling all the boilerplate and design that normally takes weeks. Any Ionic developer should consider getting one and getting to work that much more quickly!“

Max Lynch — CEO at Ionic Framework

We strive to create the best Ionic templates in the market, both in terms of code and design. We dedicate hundreds of design and development hours creating and testing them.

Thousands of developers have used our templates with different purposes. Some of them are:

• To improve their Ionic skills
• To learn Ionic Framework by example (by seeing how we solved common problems)
• To save time and be able to meet the deadline
• To get beautifully designed screens
• To get ready-made ionic features and components

Our latest and most complete Ionic 5 Template is Ionic 5 Full Starter App and recently we released the PRO version, with more screens and functionalities.

This template is built to guide you in the development process, exposing difficult knowledge through practical examples. Created with performance and ease of development in mind, this Ionic starter app is something you will love. It includes all the components that you might need inside an ionic framework project and a detailed documentation on how to get started.

Try Ionic 5 Full Starter App

You can try how this Ionic App looks and feels in your device.

• Live Preview
• Try as a PWA
• APK

Save time with these ready-made Ionic features

All in with Ionic 5 and Angular 9

This Ionic Template includes lots of Ionic components coded the angular way and features that you will love.

100% Flexible and Customizable

The starter includes lots of pages, features and components but you are free to use just what you need and delete the code you don't. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables for the win

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Detailed documentation and Showcase

The template includes a super detailed documentation as well as an online showcase to help developers use the custom component the template offers.

PWA ready

Ionic Framework is a step forward for Progressive Web Apps, that's why we are building this new ionic template with 100% support for PWA. Learn more about PWA with Angular and Ionic.

You will be able to use this Ionic 5 starter as an iOS app, an Android app, a web app or as a PWA! Too many options, right?

For a web app to be considered a PWA, it needs to comply with 10 principles. You can see how this Ionic Framework 5 app addresses each of them.

App Shell

An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users’ screens, similar to what you see in native apps.

The shell is the minimal CSS, HTML and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users.

The main goal of the app shell is to improve our app’s perceived performance.

We created a complete post explaining the benefits of using app shell in ionic apps.

Improved UX for Ionic apps with Skeleton Loading Screens

We included the app shell pattern in this ionic template because we believe it is a step forward in terms of user experience. However, if you don’t want to use it, you are free to remove it from your app. We will explain how to do it in the template documentation.

Forms and Validations

Forms are the pillar of many business applications. You can use forms to perform countless data-entry tasks such as: login, submit a request, place an order, book a flight or create an account.

The main purpose of forms is data collection so we need to provide a good experience so the user doesn’t get frustrated.

In this Ionic theme we included different types of form validations with Ionic and Angular such as: password and confirm password validation, international phone validation, email format validation and username validator. You will learn how to use Angular custom validators and how to use Angular Reactive Forms to create your own validators.

Different types of Navigations

Navigation is one of the most important parts of an app. Solid navigation patterns help us achieve great user experience while a great router implementation will ease the development process and at the same time will make our apps discoverable and linkable.

As the new Ionic framework position itself as the best tool to build Progressive Web Apps, and the Discoverable and Linkable principles are fundamental to PWAs, it is clear why the new Ionic Navigation relies on the Angular Router.

The Angular Router is a solid, URL based navigation library that eases the development process dramatically and at the same time enables you to build complex navigation structures. In addition, the Angular Router is also capable of Lazy Loading modules, handle data through route with Route Resolvers, and handling Route Guards to fine tune access to certain parts of your app.

This Ionic 5 starter app template features many different examples of navigation within a mobile app such as: Tabs, Side Menu, Lazy Loading and Angular Resolvers.

Firebase Integration

Firebase is a popular tool that helps you build apps fast, without managing infrastructure and includes a powerful Database as a Service solution. We built a Firebase Integration for this Ionic Template that will show you how to build an advanced CRUD with Firestore as well as how to query your collections. It includes advanced examples with nested relations.

Also, we recently added Firebase Authentication with different providers such as facebook, twitter and google.

Other Integrations

Sometimes our apps need more features that why we added the most required ones to this PRO version.

Translating your ionic app into your desired language and creating a fully multi language app is now possible with this version of the template.

Videos are very important in current apps that’s why we added a video playlist that you can use to play your own videos into an ionic app.

Also, we added a customizable Google Map and Geolocation using Capacitor Geolocation API.

Ionic Capacitor

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web.

It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them.

This Ionic 5 template is built using Capacitor and also shows how to use some of the APIs it provides.

Different Categories

We carefully designed and coded 5 different and complete categories: Travel, Food, Fashion, Deals and Real State.

Each category has a Listing view and a Details view. Each of these pages is different and has different and unique components that you can reuse within your Ionic framework app.

Some of the components you will find in this section are: Cards, Lists, Sliders, Maps, Tags, Text Blocks, Images, Grids, Progress Bar, Buttons, Custom Icons, Buttons, Modal, Alerts, Different types of layouts to display your data in a beautiful and organized way, Lots of beautiful App Shells and more!.

Some Testimonials

“The Ionic 5 starter app is exactly what I’ve been seeking.
The people at Ionic Themes team put together a rock-solid starter app including clean code and easy to understand documentation … not to mention unmatched customer support/communication.” — Jeff — Lead Developer

“Being a solo developer, I wouldn’t have been able to deliver my client’s app on time without this template. With continuous updates and enhancements you are not wasting your money buying this template.” — Saud — Software Developer

“I am very happy with IonicThemes, specially with the customer service they provide and their quickness in resolving issues.
Will definitely purchase again in the future. Looking forward to new products”. — Jas — Tech Guy

Want to get this ionic framework starter app? You will not regret!

Ionic 5 Full Starter App & PWA | PRO Version | Ionic Templates

Best Ionic Template — Build an outstanding Ionic Framework 5 App! was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post you will learn about Capacitor, a tool created by The ionic team to build native cross-platform web applications for Android, iOS, Electron and the web.

What is Capacitor?

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. It was created -and is maintained- by the Ionic Framework team. The first stable version (1.0) was released at the end of May 2019.

In this post I will try to give you a good introduction about what Capacitor is and why did the Ionic team create it. Also, we will go through the main differences between Capacitor and Cordova and get to know more about Capacitor plugins. We will be also talking about the migration strategy, why should you consider migrating and what’s involved at a high level in the migration.

As a side note, I want to tell you that I did the migration to Capacitor of our latest Ionic 4 starter app and it was super easy and straightforward. I did not experience any issues and I’m super happy with the new app structure without Cordova. So, without further ado, let’s start!

Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them.

With Capacitor, adding native functionality to our apps can be easily done using a simple Plugin API for Java on Android, JavaScript for the web and Swift on iOS. We can say that Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap.

It’s important to mention that Capacitor can work with any web project, it’s not Ionic specific, and is version independant (works with Ionic v1 to v4 and anything that comes in the future). It can be used as a drop in to any existing modern JavaScript project.

Capacitor has a “Code once, configure everywhere” mantra and in this post we will explain why.

How does Capacitor fit in the app development ecosystem?

What is Ionic Framework?

In case you’re kind of new to Ionic Framework, let me give you a quick intro. It’s a mobile-ready and cross-platform UI library and toolkit that works everywhere; any platform, any device, any framework. You can reuse your existing web skills; HTML, CSS and JavaScript to build apps for IOS, Android, Electron and PWAs. You can create one codebase that can go across all these platforms just using your web skills and target the different native APIs and features, like Geolocation, Camera, Bluetooth.

If you are new to this world I suggest you to read more about Ionic’s key components. Also, when it comes to PWAs, we wrote a Complete Guide To Progressive Web Apps with Ionic 4 that you may want to bookmark for a future reading because we deeply explain what are PWAs, why you should definitely consider them for your next project, and also show how easy is to build a feature complete PWA with Ionic 4!

The Complete Guide To Progressive Web Apps with Ionic 4

What is a hybrid Application?

An Hybrid Application is a web app built with the web skills you already have, and then packaged inside of a real native app shell. With this approach you get full access to all the different device functionalities while your Ionic or Web app is running inside of a web-view within that native app. For end users it will still be a native app, enabling you to run your code everywhere and reach potentially millions of users.

What about Cordova?

Up till now, Phonegap or Cordova, (they’re basically synonymous) has been the native wrapper for Ionic apps.

The team behind Cordova created it in 2008. Cordova really helped developers with web skills that wanted to reuse them and, especially get onto the exciting mobile platforms that everyone has these days.

Cordova’s mantra is “Write once, Run everywhere”, and that’s what Ionic has been all about since the beginning. Cordova is fully open source and backed by a great community but lately it had some challenges keeping up to date with the latest changes of the native platforms. iOS and Android are constantly undergoing different changes, whether that’s new operating system updates or new hardware. These affects Cordova and any Ionic app as well. That’s why the Ionic team had to keep up with these kinds of things and move fast to ensure that they were deploying and supporting these different features.

And also, on the more native side of things, more modern plugin system capabilities with Cocoa Pods and Gradle which are dependency management tools that hasn’t been supported by Cordova. As well as wanting to use more modern native languages, like Swift and Kotlin. So, the team at Ionic thought, it was a good idea to create a spiritual successor to Cordova that could use all these modern native tools and provide just really an overall better developer experience. And their solution to that is Capacitor. So, let’s dig into what that looks like.

If you want to start creating your Ionic Framework app but don’t know how to start, I suggest your to try Ionic 4 Full Starter App. It’s an ionic 4 app that you can use to jump start your Ionic Framework development and save yourself hundreds of hours of design and development.

Ionic 4 Full Starter App | Ionic 4 Mobile & PWA Template| Ionic Templates

It includes more than 100 carefully designed views and components. It has full support for PWA with Angular. Try it on your phone as a native app or as a PWA to see the magic!

Welcome Capacitor to the Ionic Ecosystem

At the end of the day, Capacitor has the same type of goals as Cordova.

Capacitor is a cross-platform runtime created by the Ionic team that allows you to target different types of native platforms like iOS, Android, the desktop using Electron and the Web. Traditionally, Cordova has had bad support for the web but Ionic promises to solve this with Capacitor.

Capacitor has first-class support for Progressive Web Apps and native apps. That means that Capacitor’s plugin bridge supports running in either a native context or in the web, with many core plugins available in both contexts with the exact same API and calling conventions. This means you’ll use @capacitor/core as a dependency for both your native app and your Progressive Web App, and Capacitor will seamlessly call web code when required and native code when available.

The ability to have multiple implementations for an API is a clear benefit of Capacitor because, let’s say we want to use the Camera plugin, the installed native app will use the native implementation while the PWA will use the web implementation, all with the same codebase.

How does Capacitor plays with Cordova?

For the majority of plugins today, Capacitor has full backward compatibility. However, there are some of them that don’t work for various legacy technology reasons.

One of the things Capacitor wants to do is staying as close to the native browser capabilities as possible. This will allow them to ensure a great stability and maintainability because by staying close to the web standards, they can ensure that things will work for a long time to come. And this is a very important point for us as developers.

Capacitor’s mantra is “Code once, Configure everywhere”. And this is because they are embracing more of the native modern tooling, which they claim it will help us maintain our projects a lot easier than in the past with Cordova.

What are the differences between Cordova and Capacitor?

There are two main major points when doing a Capacitor VS Cordova comparison: Native Project Management and Plugin and CLI Management. Let’s go through each of them to see the main changes and their benefits.

Native Project Management

Using Capacitor will result in some interesting architecture design changes, comparing to what we were used with Cordova, but the Ionic team believes this will serve everyone well for the long-term. Let’s see why.

Change #1 — source assets versus build time assets

Capacitor trates the native projects that are generated such as iOS, Android, Electron, as code that you actually check in and maintain and they’re essentially first-class citizens in that sense.

This is a clear benefit comparing with Cordova, where when you’re interacting with the native projects that are generated, for example to add plugins, or to make changes, they can get wiped away or end up in different states of use and this can be hard to maintain.

Another benefit of having real native projects is that it makes it easier to add custom native code to them. You just need to open the project into its native IDEs and make the changes you need without having to do this through a plugin.

Also, another benefit is the ability for native mobile teams to work with web teams, because you no longer have a conflict where both teams are making changes in the same files. They’re separate web and native projects, so you can be developing over time.

Change #2 — Custom configurations

Capacitor is pushing us towards using the platform’s specific IDE; Xcode for iOS and Android Studio for Android. This means no longer we’re going to have an abstracted layer, which today for Cordova is config.xml. So, the benefit here is that by not having that abstraction over the native layers, it gives us far more control and visibility into the native project changes and overall leads to a better experience maintaining apps over time.

All of us have probably run into situations where you come back to an app after some time and try to rebuild it and update all the dependencies, and just have it simply not work or not build in the first place. So, Capacitor is trying to make that experience a lot smoother and better for us.

Also, another benefit is that if you do run into native issues, such as built or configuration issues, it’ll be much easier to troubleshoot because we can have direct access to the native projects and therefore, searching online in different forums for that specific problem.

Change #3 — Use Platform Specific IDEs

The Ionic Team behind Capacitor ensures that by embracing the native platform IDEs it will just lead to a better experience for everyone.

Plugin and CLI Management

We also have plugin and CLI (Command Line Interface) management changes.

Change #1 — Built as Frameworks (iOS) and Libraries (Android)

The main change for plugin development and maintainability is building them with more modern capabilities, as frameworks on iOS and Libraries on Android. There are a lot of different things that go into that. For example, you no longer have to copy plugin files directly into your project and in fact, they’re full fledge libraries and just code that can be developed outside your Ionic app.

Plugins in Capacitor enable JavaScript to interface directly with Native APIs. When it comes to working through and creating your own plugins, Capacitor has a great plugin generation command and other tooling that is explained in the documentation. Capacitor auto generates JavaScript hooks on the client, so most plugins only need to build a native Java plugin for Android and a Swift/Obj-C one for iOS. Using the CLI to generate your own Capacitor plugins is very easy.

One of the benefits of using this approach, is to have less error prone plugins and to make it easier to find help in the community for each platform when you’re working on troubleshooting plugins.

Change #2 — Registers and exports all JavaScript for every plugin at runtime

Additionally, Capacitor registers and exports all JavaScript for each plugin based on the methods it detects at runtime. This means that all of your code is available right away at runtime when your app starts out. So, no more need for the device ready event, which if you’ve worked with Cordova, you’ve probably run into that issues with trying to use different plugins right away and having your app crash or not work well and being confused about that.

Change #3 — Capacitor CLI gets installed locally into each project

Cordova typically gets installed globally on your machine while the Capacitor CLI gets installed locally into each project. This makes it easier to manage different versions of Capacitor across all of your different apps.

Migration Strategy. Should you migrate?

The first thing to mention is that the migration isn’t compulsory so you are free to choose what you want to do with your project. The effort involved in the migration will largely depend on the complexity of the app but you can do it progressively over time so there’s no rush and also no reason to freak out.

Also, it’s important to mention that Capacitor isn’t specific to Ionic projects, it works with all web projects.

Migrating from Cordova to Capacitor can occur over time or can be fully replaced in many cases. The effort involved will largely depend on the complexity of the app.

If you have an existing app that’s using Cordova, let’s talk a little bit about the migration strategy. So, why migrate? What’s involved at a high level?.

It’s really about long-term stability and peace of mind.

Now, that the Ionic team released this tool, we can expect updates and releases a lot quicker than the Cordova ecosystem.

Also, remember we mentioned that Capacitor has Cordova backward compatibility so adding it to a Cordova project should just work and you get all the benefits of working with native projects.

The Ionic team has been a long-term open-source contributor to the Cordova community and they say that this isn’t going to change for a long time to come. So, no worries, you can still stay using Ionic Framework + Cordova if you don’t want to change. But that said, we do feel that Ionic and Capacitor are the future for building modern web apps and cross-platform hybrid apps.

Should you migrate? My personal opinion

As we mentioned above, there are differences that Capacitor has over Cordova both regarding the Native Project Management and the Plugin and CLI Management. And I think that these differences and new approaches can be either a benefit or an opportunity for you, depending on your background and your current development skills. Let me explain why.

If you choose to migrate to Capacitor, it’s important you understand that you will be dealing directly with the native platform (ios or android), their specific configurations, issues, errors, community, building processes, IDEs, languages, and their own specific concepts. Capacitor requires you to be a lot more involved in the native project configuration than with Cordova so at the end of the day, if you are a web developer with no native skills, it’s up to you if you want to invest the required time and effort in learning these new concepts.

On the other hand, if you are a native developer you will love working with Capacitor because you will be working directly with the native apps. So for native devs it will be a no brainer decision.

I know many people started using Ionic Framework because they were web developers wanting to create mobile apps, myself included. Capacitor brings us the opportunity to expand our knowledge on mobile apps inducing us to learn these new concepts and I think this is great. But if you are afraid to make the change now, or you don’t have the time to invest in learning this new flow, it’s totally fine. You can do it when you are ready. Ionic apps will continue to work with Cordova in the same way they worked before Capacitor.

So, to sum up, migrating your Ionic app from Cordova to Capacitor has both pros and cons (or as I like to see them, opportunities). It brings a lot of benefits when building cross platform web apps, it’s based in a “Code once, configure everywhere” philosophy, it’s optimized for Ionic Framework apps, but, migrating is not a must, it can be done over time, the effort depends on the complexity of your app and, if you have no native skills, it requires you to invest time and effort to get into these new workflows.

That’s why we have decided that for our Ionic 4 templates, we will provide both options so people can choose what suits best for them. When you get one of our ionic 4 starters you will find the same app configured both with Cordova and another one with Capacitor.

Ionic 4 Full Starter App | Ionic 4 Mobile & PWA Template| Ionic Templates

Cordova to Capacitor migration process

Capacitor has some dependencies depending on which platforms you’re targeting and which operating systems you are developing on.

To read more about how to migrate please follow this guide.

Final thoughts about Capacitor and Ionic

Using Ionic and Capacitor together is the way to build the best app experience possible, since Ionic Framework provides UI and UX enhancements that Capacitor does not have. Additionally, it works with your favorite web app framework, including Angular, React, and Vue.

With the release of Capacitor, Ionic now controls almost all of its stack. When you build an Ionic app today, they now control the native runtime layer (Capacitor), the UI controls (Ionic Framework), and the “framework” used to build the controls (web components powered by Stencil). This is significant because if there’s an issue in any part of the stack that Ionic controls, they can fix it right away. The only part Ionic doesn’t control is the frontend framework you use on top (Angular, React, Vue, or plain JavaScript).

Capacitor embraces this idea of “Code once, configure everywhere” because configuration is managed per-platform instead of in an abstracted system like a config.xml in Cordova. As we saw in this post, this is an important point, because it means that Capacitor requires you to be more involved in the native project configuration than with Cordova. Although it may be scary at the beginning, this approach makes it easy to follow existing Native iOS/Android guides, get help on Stack Overflow, and have full control over your project.

Capacitor has first-class support for Progressive Web Apps and native apps. That means that Capacitor’s plugin bridge supports running in either a native context or in the web, with many core plugins available in both contexts with the exact same API and calling conventions. This means you’ll use @capacitor/core as a dependency for both your native app and your Progressive Web App, and Capacitor will seamlessly call web code when required and native code when available.

Since Cordova is such a hugely popular framework with a massive ecosystem of plugins to access various native functionality, Capacitor is aiming to have backward compatibility with existing Cordova plugins. This means that if you are using Capacitor, you should be able to use any existing Cordova plugin with it.

Doing the migration from Cordova to Capacitor isn’t compulsory so you are free to choose. The effort involved in the migration will largely depend on the complexity of your app but you can do it progressively over time so there’s no rush and also no reason to freak out.

If you want to see an example app built with Ionic 4 and Capacitor you can check Building an Ionic Framework Camera App. Also, the Ionic team also built another great example app using Push Notifications with Firebase in an Ionic 4 Angular App.

Hope this post helped you getting an idea of what Capacitor is and how to start using it to build your apps!

Originally published at https://ionicthemes.com.

Ionic Capacitor — What you need to know. was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ionic is a step forward for Progressive Web Apps. It’s clear to us at IonicThemes, that the Ionic Framework team is doing a great job positioning themselves as the Framework of choice to build PWAs. 👏👏

This ionic guide is part of the complete tutorial published in IonicThemes blog where you will learn what are Progressive Web Apps, why you should definitely consider them for your next project, and also how easy is to build a feature complete PWA with Ionic 5.

This post is part of the “Mastering Ionic Framework” series which deep dives into Ionic more advanced stuff. Don’t be afraid, if you are new to Ionic , I strongly recommend you to first read our introduction to ionic 5 previous tutorial.

In this series of posts we have already talked about Web Components, Shadow DOM, CSS 4 Variables, and Stencil. To complete the in-depth analysis of the new Ionic 4, besides talking everything about Progressive Web Apps in this post, we will also be addressing the new Ionic Navigation using Angular Router in our third and final post.

At IonicThemes we are big fans of Learning by example, that’s why all our ionic tutorials include a complete and free ionic code example that you can reuse in your ionic projects. We strive to create the best content for Ionic Framework, both tutorials and templates to help the Ionic community succeed.

We work towards empowering developers to achieve a free life through coding. That’s what motivates us at IonicThemes everyday.

Check out our detailed and professional templates crafted with love and dedication to help you create better apps with Ionic Framework and supercharge your productivity.

Ionic 5 Full Starter App | Ionic 5 Mobile & PWA Template| Ionic Templates

All in with Progressive Web Apps

What is a Progressive Web App?

Progressive Web Apps are a synergy of the very best between Web and Native worlds.

PWAs are web applications that load like regular web pages or websites but can offer the user functionalities traditionally available only to native mobile applications such as push notifications, working offline, and device hardware access.

PWAs are useful to users from the very first visit in a browser tab as there’s no need to go to the App Store and install the app.

The initial ‘download’ of a PWA is minimal (a few kb’s with just the assets needed for the basic first interaction with the app) in contrast with native apps where you download the full app upfront (quite some MB of assets).

It’s worth mentioning that PWAs aren’t a new framework or technology. They are a set of best practices to make a web application function similar to a desktop or mobile application. The ideal situation would be to have an experience so seamless and uniform that the user is unable to tell the difference between a Progressive Web App and a native mobile app.

PWAs combine the open standards of the web offered by modern browsers to provide rich mobile experiences.

Instant or Progressive Web Apps are known for loading in record time even if the network is spotty since they use cache strategies. To keep customers engaged, they provide push notifications and have icons on the home screen, while still loading as a top level, full-screen experience.

The advantage of this new approach is that it lowers the cost of customer acquisition, while improving the conversion rates. It’s a great tool for on-boarding new customers, since the discoverability of the web makes them perfect for its advertising and social media communication purposes.

Why do we need Progressive Web Apps?

To understand why we need progressive web apps, let’s first talk about some of the biggest challenges we are facing today with native and responsive web apps:

Internet speed: depending on where you live internet may be a nightmare. You may have not realized this, but 60% of the world’s population is still using 2G internet.

Slow website load: Do you know how long a user waits to close a website if it’s too slow? Only three seconds! 53% of users abandon a website if it loads too slow.

High friction: People don’t want to install native apps. An average user installs 0 applications in a month. Contrast this with how many new web sites they visit each month. Also think about how many apps you downloaded and eventually ended up using just once or very few times?

User engagement: Responsive mobile web sites have much more reach than native apps, however they lack basic functionalities like push notifications and offline support. That causes that most of the users of responsive web sites are not actively engaged compared to native apps engagement levels.

PWAs help solving these problems. Let’s go through the main benefits of using progressive web apps.

Main benefits of using PWAs

Benefits first time seen on a web app:

• Web app install banner prompt
• Launch from user’s home screen
• Full screen browser mode
• Push notifications for web app

CONNECTIVITY INDEPENDENT — Enhanced with service workers to work offline or on low-quality networks.

APP LIKE — Feels like an app to the user with app-style interactions and navigation.

FRESH — Always up-to-date thanks to the service worker update process.

DISCOVERABLE — Due to the web nature of Progressive Web Apps, search engines are able to find them! This is super important for SEO purposes.

Re-ENGANGABLE — Makes re-engagement easy through features like push notifications.

INSTALLABLE — Allows users to “keep” apps they find most useful on their home screen without the hassle of an app store middleman.

LINKABLE — Easily shareable via URLs.

Integrated and Engaging User Experience

PWAs feel and behave like native apps. They sit in a user’s home screen, send push notifications like native apps, and have access to some device functionalities like native apps. The experience feels seamless and integrated. Because we can send notifications to a user, we can really drive the engagement up by keeping the user notified and engaged with the app like we do in native apps.

Cheaper and Improved User Acquisition

The open nature and discoverability of the web compared to app stores translates into a more democratic and organic way of finding content, and this translates to both user reach, user experience friction, and user acquisition costs.

Better Performance, Conversion and Engagement

PWAs provide experiences that are consistently fast. From the moment a user downloads an app to the moment they start interacting with it, everything happens really fast. Because they leverage cache, repeated uses of the app don’t have to hit the network resulting in an even faster experience.

Learn more about the benefits of using PWAs and also see some examples of big brands using progressive web apps and their results in https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4#main-benefits-of-using-pwas

The combination of cheaper user acquisition costs, improved conversions and engagement metrics is a no-brainer. Even more if the user experience is guaranteed to be on par with native apps.

If you want to start creating your Ionic Framework app but don’t know how to start, I suggest your to try Ionic 5 Full Starter App. It’s an ionic 5 app that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It includes more than 100 carefully designed views and components. It has full support for PWA with Angular. Try it on your phone as a PWA to see the magic!

Embracing Progressive Web Apps with Ionic

Enough talking about the business side, let’s dive in and see how Ionic Framework is the ideal tech to build our Progressive Web App.

As we mentioned above, for a web app to be considered a PWA, it needs to comply with the following principles. Let’s see how Ionic Framework addresses each of them.

Get your PWA up and running with Ionic Framework

When it comes to the implementation, the new Ionic 4 presents two ways of building apps.

In an effort to attract new developers and become framework agnostic while embracing web components standard, Ionic 4 can be used out of the box without any companion framework. The @ionic/core package contains the Web Components that make up the reusable UI building blocks of Ionic Framework. These components are designed to be used in traditional frontend view libraries/frameworks (such as Stencil, React, Angular, or Vue), or on their own through traditional JavaScript in the browser.

On the other hand, honoring the well known Angular relationship with Ionic from the early days of the framework, Ionic has an option to enhance the development experience and use Ionic in combination with the Angular capabilities you already know and love. The @ionic/angular package comes with Angular specific building blocks on top of @ionic/core components.

When it comes to building a Progressive Web App with Ionic, we can choose either way, but we have to take into consideration some details as we will need extra help to handle some details of the implementation (service workers and web manifest).

The new features in modern browsers that allow PWAs to work are web manifest files and service workers.

The web manifest is a simple JSON file that defines the fundamental parameters of the PWA, icons, app name, colors, screen orientation, etc.

Service workers, are the real key to the enhanced experiences that a PWA can offer. Acting essentially as a proxy between the user and the network, they are little javascript helpers that do the cool things that allow PWAs to work, such as caching data (and deciding when and how to use the cached info — for example to overcome a bad network connection), event triggers, taking care of push notifications, organizing updates and so on.

Framework agnostic PWA

Ionic has a PWA Toolkit that has everything you need to build progressive web apps without the dependency on a frontend framework such as Angular, React or Vue.

However under the hood it uses Stencil for compiling and building the app, Workbox to enforce best practices and easing the boilerplate needed when working with service workers and cache strategies (both crucial to build PWA’s), and Ionic Core for routing and all the reusable UI components Ionic is known for.

To be honest I haven’t looked in detail this approach. Although it has a solid foundation and looks promising, with new libraries or frameworks I tend to wait a little bit until they get more mature and stable. Besides that, I really like building Angular apps, so I might be a little bit biased.

Enhancing your PWA with Angular

If we choose this path, besides Ionic and Angular (@ionic/angular package) we will also need the @angular/pwa package to setup and ease the configuration of the service worker and web manifest in our project.

For more information, follow this link on adding service workers to your Angular app.

I have to admit that I feel more comfortable with this approach as Angular provides a solid, future proof framework to build apps. On top of that, adding Ionic with all the cool features it comes ends up in a winner combination.

In conclusion, the framework agnostic approach using the Ionic PWA Toolkit (that comes with Stencil, Workbox and Ionic Core) is really just a starting point for building an app. While following the Angular enhancement approach (which includes the @angular/pwa package) is ideal to add PWA features to an already existing @ionic/angular app.

Note: It’s worth mentioning that you can’t combine the PWA Toolkit with the @ionic/angular package. They use a different set of underlying libraries and are not intended to be used together. You either go with the @ionic/angular + @angular/pwa approach or with the PWA Toolkit (@ionic/core + Stencil + Workbox) approach.

Ionic is a great choice to build a PWA

Embracing the flexibility Ionic provides, either way will get you cover to build a progressive web app.

As I mentioned above, most of the principles that constitute a PWA are already baked into Ionic (Responsive, App-like, Discoverable, Linkable).

The others (Connectivity independent, Fresh, Re-engageable, Installable) relate to service workers and web manifest specification. These are handled both by Workbox or @angular/pwa.

The Progressive principle is intrinsic and refers to the ability to adapt to the features list available in the platform the app is running. For example if you run a PWA in Chrome on iOS, service workers are not available but that doesn’t prevent the PWA from working.

The remaining Safe PWA principle rely on your hosting provider respectively.

Today most browsers do support service workers and the use of HTTPS is well spread.

Probably, the not so well known, and thus more difficult to grasp, are the principles related to service workers and web manifest. Luckily both Workbox and @angular/pwa packages can ease the process of implementing and configuring some of their most hidden details. If you want to learn more about this, follow this awesome guide on service workers configuration using the @angular/pwa package.

Things that need to be polished

Although Ionic has all the PWA principles covered, if you want to go the extra mile regarding user experience and perceived performance you may find some blocks on the road.

There are two issues that I stumbled upon when playing around with @ionic/angular.

One of the issues is regarding server side rendering using Angular Universal in an @ionic/angular app.

And the other issue is about having lazy loadable routes working with the <ion-router-outlet> which at its core uses the Angular <router-outlet>. This issue only happens when you try to lazy load modules under named outlets (for example if you have an app with tabs navigation).

Both issues (server side rendering issue, lazy loading issue) are being handled by the Ionic team and hopefully they get fixed while Ionic 4 becomes more stable towards the release candidate.

Let’s build a Progressive Web App with Ionic

For this example app I will focus on showing you how easy is to go from 0 to 100 in terms of Progressive Web App principles checklist using Ionic Framework.

After we achieve that we will be adding more complex functionalities like push notifications and finally adjusting a little bit the styles to make the ionic app look great.

Go to the original article to see all the steps to build a complete PWA with Ionic 4 and Angular. You can also download for free all the source code that we will use to build our PWA.

https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4#building-a-progressive-web-app-with-ionic4

As I mentioned before, we do believe PWAs are the future (or should I say the present?). Stay tuned as I will be updating this post as new features become available and more Ionic tutorials so subscribe to our newsletter to keep learning Ionic Framework!

Originally published at ionicthemes.com.

Building a PWA with Ionic and Angular — step by step was originally published in Learn Ionic Framework on Medium, where people are continuing the conversation by highlighting and responding to this story.