Version Tagging in Capacitor Apps

Version tagging is essential for managing Capacitor apps. It ensures smooth updates, tracks changes, and enhances app reliability across iOS, Android, and web platforms. Here’s a quick overview:

• Why It Matters: Tracks updates, enables rollbacks, and ensures stable deployments.
• Semantic Versioning: Use MAJOR.MINOR.PATCH to indicate breaking changes, new features, or bug fixes.
• Sync Across Platforms: Align version numbers in package.json, iOS Info.plist, and Android build.gradle.
• Automation: Automate updates with npm scripts and CI/CD tools.
• Live Updates: Tools like Capgo deliver updates to 95% of users within 24 hours.
• Beta Management: Use structured channels for alpha, beta, and production versions.

Quick Comparison

Version tagging simplifies app updates, keeps users happy, and ensures developers can manage releases effectively.

How to AUTOMATICALLY configure your Capacitor project ⚡️

Version Setup in Capacitor

Follow these steps to ensure consistent version management across all platforms in your Capacitor app.

Setting the Version in package.json

The package.json file serves as the main source for your app’s version details. Here’s an example of how to set it up:

{
  "name": "your-app-name",
  "version": "1.2.3",
  "private": true,
  "dependencies": {
    "@capacitor/core": "5.5.0",
    "@capacitor/ios": "5.5.0",
    "@capacitor/android": "5.5.0"
  }
}

When updating the version number, use semantic versioning (SemVer) rules:

• Major version (1.x.x): Introduces breaking changes.
• Minor version (x.2.x): Adds new features that are backward-compatible.
• Patch version (x.x.3): Fixes bugs or makes small improvements.

Keeping Platform Versions in Sync

It’s important to align version numbers across all platforms for smooth app deployment. Each platform has its own configuration file for versioning:

After updating the version in package.json, use this command to sync the changes with native platform configurations:

npx cap sync

Using Capacitor CLI for Version Management

The Capacitor CLI offers helpful commands to manage versions:

# Check the current version of Capacitor
npx cap --version

# Update Capacitor core and platform dependencies
npm install @capacitor/core@latest
npm install @capacitor/ios@latest
npm install @capacitor/android@latest

# Sync version changes to native platforms
npx cap sync

Keeping your Capacitor CLI updated ensures compatibility with version-specific features and reduces potential mismatches. Following these steps will help you maintain proper versioning in your app.

Semantic Version Setup

Semantic Version Basics

Semantic Versioning (SemVer) uses the format MAJOR.MINOR.PATCH, where each part indicates a specific type of change:

This system ensures developers can clearly communicate updates while preserving compatibility across app versions. For example, moving from 1.2.3 to 2.0.0 signals major, breaking updates that require careful planning.

When to Update Version Numbers

Here’s how to decide which version number to update:

“We practice agile development and @Capgo is mission-critical in delivering continuously to our users!” - Rodrigo Mantica [1]

Now let’s look at automating these updates to simplify release management.

Version Update Automation

Automating version updates can save time and reduce errors in your Capacitor project. Here’s how to set it up:

1. NPM Version Scripts

Add these scripts to your package.json file to manage version updates easily:

{
  "scripts": {
    "version:patch": "npm version patch",
    "version:minor": "npm version minor",
    "version:major": "npm version major"
  }
}

2. CI/CD Integration
   Incorporate version updates into your CI/CD pipeline. Capgo supports tools like GitHub Actions, GitLab CI, and Jenkins, making it simple to automate the process.

“@Capgo is a must-have tool for developers seeking productivity by bypassing lengthy bugfix reviews.” - Bessie Cooper [1]

Version Tag Methods

Git Version Tags

Git version tags are a reliable way to keep track of Capacitor app releases. To create clear and informative tags, combine semantic versioning with a brief description:

git tag -a v1.2.3 -m "Release v1.2.3: Added offline mode support"

To maintain consistency across your team, use a standardized tagging format:

Build Number Integration

Build numbers help track individual builds within each version. For both iOS and Android, increment the build number with every submission:

{
  "ios": {
    "version": "1.2.3",
    "build": "10234"
  },
  "android": {
    "version": "1.2.3",
    "versionCode": "10234"
  }
}

The build number should always increase, even if the version remains the same. This ensures each app store submission is uniquely identified while keeping the versioning clear for users.

Beta Version Management

Managing beta versions requires a structured process to distribute test builds. Capgo’s channel system simplifies this with the following steps:

1. Channel Setup

Create separate channels for each testing phase:

{
  "beta": {
    "version": "1.3.0-beta.1",
    "users": "beta-testers"
  },
  "production": {
    "version": "1.2.3",
    "users": "all"
  }
}

2. Control User Access

Set up permissions to control who gets access to beta versions. This ensures only approved testers receive beta builds while production users get stable releases.

3. Version Progression

Use a clear version progression system to track the development stages:

This approach ensures thorough testing and smooth transitions between development stages, keeping version tracking organized and transparent throughout the process.

App Version Display

Displaying accurate version information in your app is key to keeping users informed and managing updates effectively.

Getting Version with Capacitor

You can retrieve version details using Capacitor with this code:

import { App } from '@capacitor/app';

async function getAppInfo() {
  const info = await App.getInfo();
  console.log(`Version: ${info.version}`);
  console.log(`Build: ${info.build}`);
}

For a more streamlined approach, create a reusable function:

export const getVersionString = async () => {
  const info = await App.getInfo();
  return `v${info.version} (${info.build})`;
};

This function simplifies the process of displaying version information in your app’s interface.

Version UI Implementation

Here’s an example of how to integrate version display into a settings component:

@Component({
  selector: 'app-settings',
  template: `
    <div class="version-info">
      <span>Version: {{ versionString }}</span>
      <span *ngIf="updateAvailable" class="update-badge">
        Update Available
      </span>
    </div>
  `
})

Common places to show version details include:

In addition to displaying version info, integrating an update check system can improve the user experience.

Update Check System

An update check system ensures users have access to the latest features and fixes. Capgo provides real-time notifications and controlled update channels to manage this process:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

async function checkForUpdates() {
  const current = await CapacitorUpdater.current();
  const latest = await CapacitorUpdater.getLatest();

  if (current.version !== latest.version) {
    await CapacitorUpdater.download({
      version: latest.version
    });
  }
}

“We practice agile development and @Capgo is mission-critical in delivering continuously to our users!” - Rodrigo Mantica [1]

You can also add a user-facing update notification, like this:

@Component({
  template: `
    <update-modal 
      [version]="newVersion"
      [features]="updateFeatures"
      (updateNow)="performUpdate()"
    />
  `
})

For enterprise apps, Capgo’s channel system allows you to control update distribution:

This method ensures app reliability while tracking update performance through Capgo’s analytics dashboard.

Version Management Solutions

Let’s dive deeper into advanced solutions for managing app versions effectively.

Version Tool Options

When selecting version control tools, it’s important to focus on those that simplify updates, secure your code, and support both app store releases and live updates.

Here are some key features to look for:

One standout tool in this space is Capgo, which offers features specifically designed for Capacitor apps.

Capgo Version Control Features

Capgo provides robust version management capabilities, including:

• 23.5M successful updates delivered
• 95% of users updated within 24 hours
• 82% global success rate
• 434ms average API response time worldwide

Here’s an example of how to use Capgo for version control:

// Capgo version control example
import { CapacitorUpdater } from '@capgo/capacitor-updater';

const versionControl = {
  async checkVersion() {
    const current = await CapacitorUpdater.current();
    return current.version;
  },

  async deployUpdate(version: string) {
    await CapacitorUpdater.setChannel({
      channel: 'production',
      version: version
    });
  }
};

“We are currently giving a try to @Capgo since Appcenter stopped live updates support on hybrid apps and @AppFlow is way too expensive.” - Simon Flack [1]

Team Size Solutions

Capgo offers flexible plans to accommodate teams of all sizes, making version management scalable and efficient.

For larger teams, Capgo’s channel system enables precise control over version deployment:

const enterpriseVersionControl = {
  channels: {
    production: 'stable-releases',
    beta: 'early-access',
    internal: 'development'
  },

  async deployToChannel(channel: string, version: string) {
    await CapacitorUpdater.setChannel({
      channel: channel,
      version: version
    });
  }
};

“We practice agile development and @Capgo is mission-critical in delivering continuously to our users!” - Rodrigo Mantica [1]

Capgo also includes an analytics dashboard to monitor version adoption rates and detect potential issues early. With built-in encryption and customizable hosting options, teams can maintain security while scaling their deployment workflows.

Conclusion

Understanding version tagging is key to simplifying development and deployment processes. Here’s a quick recap of the main ideas and steps to get started.

Key Takeaways

Version tagging helps developers maintain smooth and reliable updates. Proper version control offers clear advantages:

These results highlight the importance of using effective version management tools.

How to Begin

To put these benefits into action, follow these steps:

• Set up version tracking: Use semantic versioning in your package.json file and integrate necessary plugins.
• Add update checks: Implement systems to verify and track version updates.
• Configure distribution channels: Create separate environments for production, beta, and development.

Finally, consider adding a live update system to ensure deployments are both fast and secure.

Keep going from Version Tagging in Capacitor Apps

If you are using Version Tagging in Capacitor Apps to plan rollback and version control, connect it with Rollbacks for the implementation detail in Rollbacks, Version Targeting for the implementation detail in Version Targeting, Update Behavior for the implementation detail in Update Behavior, bundle for the implementation detail in bundle, and Capgo Live Updates for the product workflow in Capgo Live Updates.