Building an Ionic/Angular App to Read Incoming SMS Messages when App is Closed

Are you tired of constantly checking your phone for new SMS messages? Do you want to create an app that can read incoming SMS messages even when it’s closed? Look no further! In this article, we’ll take you through a step-by-step guide on building an Ionic/Angular app that can do just that.

What You’ll Need

Before we dive into the tutorial, make sure you have the following:

• Ionic CLI installed on your computer (you can download it from the official Ionic website)
• Angular installed on your computer (you can download it from the official Angular website)
• A code editor or IDE of your choice (e.g. Visual Studio Code, Atom, etc.)
• A physical Android device or emulator with Android 6.0 (Marshmallow) or higher

Understanding the Requirements

Before we start building the app, let’s understand the requirements:

We need to build an Ionic/Angular app that can read incoming SMS messages when the app is closed. This means the app needs to run in the background and listen for new SMS messages.

Android has a built-in feature called android.permission.RECEIVE_SMS that allows apps to intercept incoming SMS messages. However, this permission is only granted to the default SMS app on the device. To work around this, we’ll use a combination of plugins and services to achieve our goal.

Step 1: Create a New Ionic/Angular Project

Open your terminal or command prompt and create a new Ionic/Angular project:

ionic start ionic-sms-reader angular
cd ionic-sms-reader
ionic integrations enable capacitor

This will create a new Ionic/Angular project with Capacitor integration.

Step 2: Add Required Plugins and Services

We’ll need to add the following plugins and services to our project:

• cordova-plugin-sms
• cordova-plugin-android-permission
• capacitor-plugin-local-notifications

Install the plugins using the following commands:

ionic cordova plugin add cordova-plugin-sms
ionic cordova plugin add cordova-plugin-android-permission
npm install @capacitor/local-notifications

Step 3: Configure AndroidManifest.xml

We need to add the following lines to our AndroidManifest.xml file to grant the app permission to read SMS messages:

<receiver android:name="com.example.SMSReceiver">
  <intent-filter>
    <action android:name="android.provider.Telephony.SMS_RECEIVED" />
  </intent-filter>
</receiver>

You can find the AndroidManifest.xml file in the android/app/src/main directory of your project.

Step 4: Create an SMS Receiver Service

We’ll create a new service that will listen for incoming SMS messages:

import { Injectable } from '@angular/core';
import { Sms } from 'cordova-plugin-sms/typings/Sms';

@Injectable({
  providedIn: 'root'
})
export class SmsReceiverService {

  constructor() { }

  receiveSms(sms: Sms) {
    console.log(`Received SMS from ${sms.senderAddress}: ${sms.body}`);
    // Add your logic to handle the incoming SMS message
  }

}

This service will receive incoming SMS messages and log them to the console. You can add your own logic to handle the SMS messages as needed.

Step 5: Create a Background Service

We’ll create a new service that will run in the background and listen for incoming SMS messages:

import { Injectable } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { SmsReceiverService } from './sms-receiver.service';

@Injectable({
  providedIn: 'root'
})
export class BackgroundService {

  constructor(private smsReceiverService: SmsReceiverService) { }

  async startBackgroundService() {
    const result = await Capacitor.Plugins.LocalNotifications.requestPermission();
    if (result.permission === 'granted') {
      Capacitor.Plugins.LocalNotifications.addListener('SMSReceived', (sms: Sms) => {
        this.smsReceiverService.receiveSms(sms);
      });
    }
  }

}

This service will start a background worker that listens for incoming SMS messages using the Local Notifications plugin.

Step 6: Add the Background Service to the App

We’ll add the background service to the app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { SmsReceiverService } from './sms-receiver.service';
import { BackgroundService } from './background.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    SmsReceiverService,
    BackgroundService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

We’ll also add a button to the app component to start the background service:

import { Component } from '@angular/core';
import { BackgroundService } from './background.service';

@Component({
  selector: 'app-root',
  template: `
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic SMS Reader</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-button (click)="startBackgroundService()">Start Background Service</ion-button>
      </ion-content>
    </ion-app>
  `
})
export class AppComponent {

  constructor(private backgroundService: BackgroundService) { }

  startBackgroundService() {
    this.backgroundService.startBackgroundService();
  }

}

Step 7: Test the App

Build and run the app on a physical Android device or emulator:

ionic build
ionic capacitor run android

Send an SMS message to the device or emulator from another phone. The app should log the incoming SMS message to the console.

Conclusion

In this tutorial, we’ve shown you how to build an Ionic/Angular app that can read incoming SMS messages when the app is closed. We’ve used a combination of plugins and services to achieve this, including cordova-plugin-sms, cordova-plugin-android-permission, and capacitor-plugin-local-notifications.

Note that this app will only work on Android devices with Android 6.0 (Marshmallow) or higher. Also, keep in mind that this is just a basic example and you should add your own logic to handle incoming SMS messages based on your app’s requirements.

We hope this tutorial has been helpful in getting you started with building an Ionic/Angular app that can read incoming SMS messages when the app is closed. Happy coding!

Plugin/Service	Purpose
cordova-plugin-sms	Intercept incoming SMS messages
cordova-plugin-android-permission	Grant permission to read SMS messages
capacitor-plugin-local-notifications	Run the app in the background and listen for incoming SMS messages

Frequently Asked Question

Got questions about building an Ionic/Angular app that can read incoming SMS messages even when the app is closed? We’ve got answers!