求助：Ionic Push Plugin基础配置问题咨询（图标、页面跳转等）

Hey there! I’ve tackled these exact pain points with the Ionic Push Plugin before, so let’s walk through each problem with actionable steps and code examples:

1. Setting Up Push Notification Icons #

Notification icons behave differently on Android and iOS—here’s how to get them right for both platforms:

Android #

• Prepare transparent-background icon files in multiple sizes (48x48, 72x72, 96x96, 144x144, 192x192) and place them in resources/android/icon/drawable-* directories. Android automatically applies a tint based on your app’s theme, so transparency is key.
• Add these references to your config.xml:

  <platform name="android">
    <resource-file src="resources/android/icon/drawable-mdpi/push_icon.png" target="app/src/main/res/drawable-mdpi/push_icon.png" />
    <resource-file src="resources/android/icon/drawable-hdpi/push_icon.png" target="app/src/main/res/drawable-hdpi/push_icon.png" />
    <!-- Repeat for xhdpi, xxhdpi, xxxhdpi -->
    <preference name="AndroidNotificationIcon" value="@drawable/push_icon" />
  </platform>
  

• You can also specify the icon directly in your Push plugin initialization:

  const pushOptions: PushOptions = {
    android: {
      icon: 'push_icon',
      // Other Android-specific options
    }
  };
  

iOS #

• Create a notification icon set in Assets.xcassets with sizes 20x20, 29x29, 40x40, 58x58, 80x80, 87x87, 100x100, 120x120, 152x152, 167x167, 180x180.
• Link it in config.xml:

  <platform name="ios">
    <preference name="NotificationIcon" value="notification-icon-set-name" />
  </platform>
  

2. Navigating to a Specific Page on Background Push #

Navigation logic varies based on whether the app is open, in the background, or fully closed:

Foreground Notifications #

When the app is active, listen for the notification event and use Ionic’s NavController to jump directly to your target page:

push.on('notification').subscribe((notification: any) => {
  if (notification.additionalData.foreground) {
    // Pass any needed data via route params
    this.navController.navigateForward(['/product-detail', { id: notification.additionalData.productId }]);
  }
});

Background/Closed App Notifications #

Android

• Add an intent filter to your config.xml to capture notification taps:

  <platform name="android">
    <activity android:name="MainActivity">
      <intent-filter>
        <action android:name="FCM_PLUGIN_ACTIVITY" />
        <category android:name="android.intent.category.DEFAULT" />
      </intent-filter>
    </activity>
  </platform>
  

• Check launch parameters in app.component.ts on initialization:

  initializeApp() {
    this.platform.ready().then(() => {
      this.push.on('notification').subscribe((notification: any) => {
        if (!notification.additionalData.foreground) {
          // App was opened from a closed/background state
          this.navController.navigateForward(['/product-detail', { id: notification.additionalData.productId }]);
        }
      });
    });
  }
  

iOS

• Modify AppDelegate.swift to pass notification data to your Ionic app:

  func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    NotificationCenter.default.post(name: Notification.Name("pushOpened"), object: userInfo)
    completionHandler(.newData)
  }
  

• Listen for this event in your Ionic app and trigger navigation accordingly.

3. Requesting Push Permissions On-Demand #

Avoid asking for permissions immediately on launch—trigger the request when the user takes a deliberate action (like tapping an "Enable Notifications" button):

Step 1: Add a Trigger Button #

In your component template:

<button ion-button (click)="requestPushAccess()">Enable Push Notifications</button>

Step 2: Handle Permission Logic #

import { AlertController } from '@ionic/angular';

constructor(private alertController: AlertController) {}

requestPushAccess() {
  this.push.hasPermission().then((res: any) => {
    if (!res.isEnabled) {
      // Request permission from the user
      this.push.requestPermission().then(() => {
        this.registerForPush();
      }).catch(() => {
        // Show a message if permission is denied
        this.showPermissionAlert();
      });
    } else {
      // Permission already granted, re-register if needed
      this.registerForPush();
    }
  });
}

registerForPush() {
  this.push.register().then((registration: any) => {
    console.log('Device Token:', registration.registrationId);
    // Send token to your backend server
    this.backendService.sendToken(registration.registrationId).subscribe();
  });
}

async showPermissionAlert() {
  const alert = await this.alertController.create({
    header: 'Permissions Required',
    message: 'To receive updates, please enable push notifications in your device settings.',
    buttons: ['OK']
  });
  await alert.present();
}

4. Managing Device Tokens #

Tokens can change when users reinstall the app or update their OS—here’s how to keep your backend in sync:

Capture and Store Tokens #

• Save the token locally (using Ionic Storage) and send it to your backend on registration:

  import { Storage } from '@ionic/storage';
  
  constructor(private storage: Storage) {}
  
  registerForPush() {
    this.push.register().then((registration: any) => {
      const token = registration.registrationId;
      // Store locally for future reference
      this.storage.set('deviceToken', token);
      // Sync with backend
      this.backendService.updateUserToken(token).subscribe();
    });
  }
  

Listen for Token Updates #

Tokens can refresh automatically—listen for the registration event to capture changes:

this.push.on('registration').subscribe((registration: any) => {
  const newToken = registration.registrationId;
  this.storage.get('deviceToken').then((oldToken) => {
    if (oldToken !== newToken) {
      // Update local storage and backend
      this.storage.set('deviceToken', newToken);
      this.backendService.swapToken(oldToken, newToken).subscribe();
    }
  });
});

Validate Tokens on App Startup #

Check if a valid token exists when the app launches, and re-register if it’s missing or invalid:

initializeApp() {
  this.platform.ready().then(() => {
    this.storage.get('deviceToken').then((token) => {
      if (!token) {
        this.registerForPush();
      } else {
        // Optional: Verify token validity with your backend
        this.backendService.isTokenValid(token).subscribe((isValid) => {
          if (!isValid) this.registerForPush();
        });
      }
    });
  });
}

内容的提问来源于stack exchange，提问作者Shiv Prakash