Visit Sponsor

Written by 12:44 pm Blog

Send SMS from JavaScript in Capacitor – Android & iOS Guide

Sending SMS messages from hybrid mobile apps is a common requirement for notifications, alerts, or verification workflows. Using Capacitor, the modern successor to PhoneGap/Cordova, you can send SMS from JavaScript in a secure, cross-platform way while maintaining compatibility with Android and iOS.

This guide on javatechig.com explains setup, plugin installation, configuration, and practical code examples with best practices for 2026.

Why Use Capacitor for SMS

  • Modern and actively supported framework
  • Works with Angular, React, Vue, or plain JS
  • Supports both Android and iOS with consistent APIs
  • Allows access to native device capabilities from JavaScript

Deprecated: PhoneGap SMS plugin is no longer maintained. Use Capacitor plugins for reliable production apps.

Step 1 – Install Capacitor SMS Plugin

Currently, the recommended plugin is @capacitor-community/sms.

npm install @capacitor-community/sms
npx cap sync

This ensures the plugin is available in both Android and iOS projects.

Step 2 – Configure Permissions

Android (AndroidManifest.xml)

Add SMS sending permission:

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

iOS (Info.plist)

Add usage description for iOS:

<key>NSMessagingUsageDescription</key>
<string>This app requires SMS access to send notifications</string>

iOS does not allow background SMS; users must confirm via native prompt.

Step 3 – Sending SMS in JavaScript

Import Plugin

import { SMS } from '@capacitor-community/sms';

Send SMS Example

const sendSMS = async () => {
  try {
    const result = await SMS.send({
      phoneNumber: '+1234567890',
      message: 'Hello from Capacitor!',
    });
    console.log('SMS result:', result);
  } catch (error) {
    console.error('Failed to send SMS:', error);
  }
};
  • phoneNumber: Recipient number in international format
  • message: The text content
  • result: Returns status of message send (varies by platform)

Step 4 – Handling Platform Differences

PlatformNotes
AndroidRequires SEND_SMS permission; can send silently if granted
iOSDisplays native message compose UI; cannot send silently
WebSMS is not supported in browser; fallback to sms: links

Web Fallback

window.location.href = 'sms:+1234567890?body=Hello%20from%20JS';

Step 5 – Advanced Usage

Sending to Multiple Recipients

const recipients = ['+1234567890', '+0987654321'];
recipients.forEach(async (num) => {
  await SMS.send({ phoneNumber: num, message: 'Hello everyone!' });
});

Integrating with UI

Add a button in your hybrid app:

<button onclick="sendSMS()">Send SMS</button>

This calls the JavaScript function to trigger native SMS sending.

Best Practices (2026 Updated)

  • Always request runtime permissions on Android 6+
  • Use try/catch to handle errors gracefully
  • Provide fallback links for web or unsupported platforms
  • Do not store sensitive data in SMS; prefer one-time codes for verification
  • Keep messages concise and user-friendly

Summary

Using Capacitor for sending SMS allows modern hybrid apps to interact with native device features securely and efficiently:

  • Works on Android and iOS
  • Supports JavaScript/TypeScript integration
  • Handles permissions, platform differences, and web fallback
  • Recommended over legacy PhoneGap SMS plugin

This updated guide on javatechig.com ensures your hybrid apps in 2026 can send SMS reliably with modern APIs while staying SEO-friendly and production-ready.

Visited 9 times, 2 visit(s) today
Close