Push Notification Configuration Guide

{
  "project_info": {
    "project_number": "124018728460",
    "firebase_url": "https://ionic4fullapp.firebaseio.com",
    "project_id": "ionic4fullapp",
    "storage_bucket": "ionic4fullapp.appspot.com"
  },
  "client": [
    {
      "client_info": {
        "mobilesdk_app_id": "1:124018728460:android:b9518881f8718a6c",
        "android_client_info": {
          "package_name": "com.enappd.ionic4fullapp"
        }
      },
      "api_key": [
        {
          "current_key": "AIzaSyDd0RqOu6lvpUVPkA0KilrAGoEZIS9Ok28"
        }
      ],
      "services": {
        "analytics_service": {
          "status": 1
        }
      }
    }
  ]
}

buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:8.1.1'
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

try {
    def servicesJSON = file('google-services.json')
    if (servicesJSON.text) {
        apply plugin: 'com.google.gms.google-services'
    }
} catch(Exception e) {
    logger.info("google-services.json not found, Push Notifications won't work")
}

ext {
    minSdkVersion = 22
    compileSdkVersion = 34
    targetSdkVersion = 34
    androidxActivityVersion = '1.7.0'
    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
    androidxCoreVersion = '1.10.0'
    androidxFragmentVersion = '1.5.6'
    coreSplashScreenVersion = '1.0.0'
    androidxWebkitVersion = '1.6.1'
}

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<activity
    android:exported="true"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
    android:name="com.thedatailangkawi.thedatai.MainActivity"
    android:label="@string/title_activity_main"
    android:theme="@style/AppTheme.NoActionBarLaunch"
    android:launchMode="singleTask">
    
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>ANDROID_CLIENT_ID</key>
    <string>619749139226-rv05ctg9tpjsfjbku009gb6i3va4355l.apps.googleusercontent.com</string>
    <key>API_KEY</key>
    <string>AIzaSyDwGVK90AlLcDAR8Xodd8sfzw8s7zZRpxg</string>
    <key>GCM_SENDER_ID</key>
    <string>619749139226</string>
    <key>PLIST_VERSION</key>
    <string>1</string>
    <key>BUNDLE_ID</key>
    <string>com.thedatailangkawi.thedatai</string>
    <key>PROJECT_ID</key>
    <string>cp-commerce-datai</string>
    <key>STORAGE_BUCKET</key>
    <string>cp-commerce-datai.appspot.com</string>
    <key>IS_ADS_ENABLED</key>
    <false></false>
    <key>IS_ANALYTICS_ENABLED</key>
    <false></false>
    <key>IS_APPINVITE_ENABLED</key>
    <true></true>
    <key>IS_GCM_ENABLED</key>
    <true></true>
    <key>IS_SIGNIN_ENABLED</key>
    <true></true>
    <key>GOOGLE_APP_ID</key>
    <string>1:619749139226:ios:d81d8363a3e25ec92ac2a3</string>
</dict>
</plist>

<key>NSCameraUsageDescription</key>
<string>Allow access to Camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Allow access to library</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Location Permission</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Location Permission</string>

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

const config: CapacitorConfig = {
  appId: process.env.PLATFORM_OS === 'android' ? 
         "com.thedatailangkawi.thedatai" : 
         "com.thedatailangkawi.thedatai",
  appName: "The Datai",
  bundledWebRuntime: false,
  webDir: "www",
  plugins: {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    PushNotifications: {
      presentationOptions: ["badge", "sound", "alert"],
    },
    "PrivacyScreen": {
      "enable": false,
      "imageName": "Splash",
      "preventScreenshots": false
    },
    Keyboard: {
      resize: "body",
      style: "dark",
      scroll: false
    },
    App: {
      url: "waveletcommerce://"
    }
  },
  ios: {
    contentInset: "never",
    scrollEnabled: false
  },
  cordova: {
    preferences: {
      DisableDeploy: "true",
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "android-targetSdkVersion": "30",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "SplashScreenDelay": "15000",
      "loadUrlTimeoutValue": "700000",
      "ShowSplashScreenSpinner": "false"
    }
  }
};

export default config;

{
  "dependencies": {
    "@capacitor/push-notifications": "^5.1.0",
    "@capacitor/local-notifications": "^6.0.0",
    "@capacitor-firebase/authentication": "^5.0.0",
    "@capacitor/core": "^5.7.8",
    "@capacitor/android": "^5.0.0",
    "@capacitor/ios": "^5.7.8"
  }
}

import { Injectable } from '@angular/core';
import { 
    PermissionStatus, 
    PushNotifications 
} from '@capacitor/push-notifications';
import { Store } from '@ngrx/store';
import { EMPTY, from, map } from 'rxjs';
import { PushNotificationActions } from '../actions';

@Injectable()
export class PushNotificationFacade {
  private __addListeners = async () => {
    // Token registration listener
    await PushNotifications.addListener('registration', 
      token => {
        this.store.dispatch(
          PushNotificationActions
            .pushNotificationRegistrationSuccess({ token })
        );
      }
    );

    // Registration error listener
    await PushNotifications.addListener('registrationError', 
      err => {
        this.store.dispatch(
          PushNotificationActions
            .pushNotificationRegistrationFail({ err })
        );
      }
    );

    // Push notification received listener
    await PushNotifications.addListener(
      'pushNotificationReceived', 
      notification => this.store.dispatch(
        PushNotificationActions
          .fetchPushNotificationSuccess({ notification })
      )
    );

    // Push notification action performed listener
    await PushNotifications.addListener(
      'pushNotificationActionPerformed', 
      actionPerformed => this.store.dispatch(
        PushNotificationActions
          .pushNotificationActionPerformed({ actionPerformed })
      )
    );
  }

  userPermissionEventStream = () => 
    from(PushNotifications.checkPermissions()).pipe(
      map(permissionStatusToEvents)
    );

  requestPermission = () => 
    from(PushNotifications.requestPermissions()).pipe(
      map(permissionStatusToEvents)
    );

  registerNotifications = async () => {
    await PushNotifications.register();
    return PushNotificationActions
      .pushNotificationRemoteRegistrationComplete();
  };

  getNotifications = async () => {
    await PushNotifications.getDeliveredNotifications();
    return EMPTY;
  }

  init = () => this.__addListeners();
}

@Injectable()
export class PushNotificationEffects {
  // Check user permission on app load
  userPermission$ = createEffect(() => 
    this.pushNotificationService.userPermissionEventStream()
  );

  // Request permission from user
  requestPermission$ = createEffect(() => this.actions$.pipe(
    ofType(PushNotificationActions.promptUserPermission),
    switchMap(_ => 
      this.pushNotificationService.requestPermission()
    )
  ));

  // Register for push notifications after permission granted
  registerNotifications$ = createEffect(() => this.actions$.pipe(
    ofType(PushNotificationActions.userGrantedPermission),
    switchMap(_ => 
      from(this.pushNotificationService.registerNotifications())
    )
  ));

  // Handle token registration success
  tokenRegistrationSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(
        PushNotificationActions.pushNotificationRegistrationSuccess
      ),
      switchMap((action) => {
        // Store device token
        this.mobileConfigFacade.storeDeviceToken(
          action.token.value
        );
        // Subscribe to default topics if needed
        // ...
      })
    )
  );

  // Handle notification action performed (tap on notification)
  pushNotificationActionPerformed$ = createEffect(() => 
    this.actions$.pipe(
      ofType(PushNotificationActions.pushNotificationActionPerformed),
      filter(action => 
        !isNullOrEmpty(
          action.actionPerformed.notification?.data?.deeplink_url
        )
      ),
      map(action => {
        const deeplinkUrl = 
          action.actionPerformed.notification?.data?.deeplink_url;
        return RouterStoreActions.navigateForward({ 
          url: deeplinkUrl 
        });
      })
    )
  );

  constructor(
    protected readonly actions$: Actions,
    protected readonly store: Store,
    private pushNotificationService: PushNotificationFacade,
    private mobileConfigFacade: MobileConfigFacade
  ) {
    this.pushNotificationService.init()
  }
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    EffectsModule.forFeature([
      PushNotificationEffects,
    ]),
  ],
  providers: [
    PushNotificationFacade
  ]
})
export class PushNotificationControllerModule { }

{
  "firebase": {
    "serverKey": "YOUR_SERVER_KEY",
    "senderId": "619749139226",
    "projectId": "cp-commerce-datai",
    "apiKey": "AIzaSyDwGVK90AlLcDAR8Xodd8sfzw8s7zZRpxg"
  }
}

{
  "notification": {
    "title": "Welcome to The Datai",
    "body": "Check out our latest offers"
  },
  "data": {
    "deeplink_url": "/promotions/latest"
  }
}