基于Firebase DB与OneSignal实现Ionic 3数据库变更推送通知咨询

Got it, let's work through this together—you’re absolutely right that OneSignal is a great fit here, but the key piece you’re missing is using Firebase Cloud Functions to trigger those push notifications automatically whenever your database changes. Here’s a step-by-step guide tailored to your Ionic 3 and VS Code setup:

You can’t rely on client-side code to detect database changes for this—you need a server-side listener that runs only when the database updates. Firebase Cloud Functions is perfect for this:

• First, make sure you have the Firebase CLI installed. If not, run npm install -g firebase-tools in your terminal.
• Navigate to your project root in VS Code and run firebase init functions. Follow the prompts to select JavaScript/TypeScript, and link it to your existing Firebase project.

Open the functions/index.js (or .ts if you chose TypeScript) file and replace its contents with this logic. This example listens for changes to a /items node—adjust the path to match your database structure:

const functions = require('firebase-functions');
const axios = require('axios'); // We'll use this to call OneSignal's API

// Replace these with your actual OneSignal credentials (find them in your OneSignal dashboard)
const ONE_SIGNAL_APP_ID = 'YOUR_ONESIGNAL_APP_ID';
const ONE_SIGNAL_REST_API_KEY = 'YOUR_ONESIGNAL_REST_API_KEY';

// Trigger on any write (create/update/delete) to the /items node
exports.sendDbChangeNotification = functions.database.ref('/items/{itemId}')
  .onWrite(async (change, context) => {
    // Figure out if this is a create, delete, or update event
    const isNewItem = !change.before.exists() && change.after.exists();
    const isItemDeleted = change.before.exists() && !change.after.exists();

    // Skip updates if you don't want notifications for edits
    if (!isNewItem && !isItemDeleted) return null;

    // Craft your notification message
    const notificationText = isNewItem 
      ? 'A new item was added to the database!' 
      : 'An item was removed from the database!';

    // Send the notification via OneSignal's API
    try {
      await axios.post('https://onesignal.com/api/v1/notifications', {
        app_id: ONE_SIGNAL_APP_ID,
        included_segments: ['All'], // Send to every registered client
        contents: { en: notificationText }
      }, {
        headers: {
          'Authorization': `Basic ${ONE_SIGNAL_REST_API_KEY}`,
          'Content-Type': 'application/json'
        }
      });
      console.log('Notification sent successfully');
      return null;
    } catch (error) {
      console.error('Failed to send notification:', error);
      return null;
    }
  });

• Don’t forget to install the axios dependency: run npm install axios inside the functions folder.

Back in your terminal, run firebase deploy --only functions to push this code to Firebase. Now, any change to your target database node will trigger this function automatically.

You might have started this part already, but let’s confirm the setup:

1. Install the OneSignal Cordova plugin and native wrapper:

   ionic cordova plugin add onesignal-cordova-plugin
   npm install @ionic-native/onesignal@4.x
   

   (Note: Use @4.x since Ionic 3 relies on older versions of @ionic-native.)

2. Add OneSignal to your app module (app.module.ts):

   import { OneSignal } from '@ionic-native/onesignal';
   
   @NgModule({
     ...
     providers: [
       ...
       OneSignal
     ]
   })
   export class AppModule {}
   

3. Initialize OneSignal in your app component (app.component.ts) to register devices for notifications:

   import { OneSignal } from '@ionic-native/onesignal';
   
   constructor(private oneSignal: OneSignal) {
     this.initializeApp();
   }
   
   initializeApp() {
     this.platform.ready().then(() => {
       // Replace with your OneSignal App ID and Firebase Sender ID
       this.oneSignal.startInit('YOUR_ONESIGNAL_APP_ID', 'YOUR_FIREBASE_SENDER_ID');
   
       // Choose how notifications appear when the app is open
       this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
   
       // Optional: Handle notification clicks/receipts
       this.oneSignal.handleNotificationOpened().subscribe(() => {
         // Add logic here for when a user taps a notification
       });
   
       this.oneSignal.endInit();
     });
   }
   

• Keep credentials secure: Never expose your OneSignal REST API Key in client-side code—only use it in your Cloud Function.
• Test with logs: Check the Firebase Console > Functions > Logs to confirm your trigger runs when the database changes, and whether the OneSignal API call succeeds.
• Target specific events: If you only want notifications for deletes (not creates), use onDelete instead of onWrite in your Cloud Function.

内容的提问来源于stack exchange，提问作者james watt