请求协助为PlayTube Cordova原生应用模板添加OneSignal插件

Hey there! I’ve worked with Cordova and OneSignal integrations before, so let’s walk through getting this set up for your PlayTube template—even without a pre-existing deviceready handler in your app.js.

Step 1: Install the OneSignal Cordova Plugin #

First, make sure you’ve installed the official OneSignal plugin in your Cordova project. Open your terminal, navigate to your project root, and run:

cordova plugin add onesignal-cordova-plugin

If you need a specific version, append @x.x.x to the end of the command (e.g., onesignal-cordova-plugin@5.0.0).

Step 2: Add the deviceready Event Handler to app.js #

Cordova plugins only work after the deviceready event fires—this is non-negotiable. Since your template’s app.js doesn’t include this, we’ll add it ourselves.

Open your app.js file and paste this code at the top (or a logical initialization section):

// Listen for Cordova's device ready event
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now that Cordova is fully loaded, initialize OneSignal
    initOneSignal();
}

function initOneSignal() {
    // Replace YOUR_ONESIGNAL_APP_ID with your actual app ID from the OneSignal dashboard
    const oneSignalAppId = "YOUR_ONESIGNAL_APP_ID";
    
    // Initialize OneSignal
    window.plugins.OneSignal.setAppId(oneSignalAppId);

    // Optional: Add handlers for notification interactions
    // Handle when a notification is opened
    window.plugins.OneSignal.setNotificationOpenedHandler(function(notificationData) {
        console.log("Notification opened:", JSON.stringify(notificationData));
        // Add your custom logic here (e.g., navigate to a specific video in PlayTube)
    });

    // Handle notifications that appear while the app is in the foreground
    window.plugins.OneSignal.setNotificationWillShowInForegroundHandler(function(event) {
        console.log("Foreground notification received:", JSON.stringify(event));
        // You can modify the notification before it's displayed here
        event.complete(event.notification);
    });
}

Be sure to replace YOUR_ONESIGNAL_APP_ID with the actual ID from your OneSignal account dashboard.

Step 3: Verify Your index.html Setup #

Double-check that your app.js is properly loaded in index.html. Look for this line (it should be placed right before the closing </body> tag to ensure DOM is ready first):

<script src="app.js"></script>

If it’s missing, add it—this ensures your new deviceready handler runs when the app loads.

Step 4: Test the Integration #

1. Build and run your Cordova app with:

   # For Android
   cordova run android
   # For iOS
   cordova run ios
   

2. Open your app, then go to your OneSignal dashboard and send a test notification.
3. Use Chrome DevTools (for Android) or Safari Web Inspector (for iOS) to check the console for any errors or confirmation messages that OneSignal initialized successfully.

Quick Notes #

• Platform-Specific Setup: Don’t forget to complete platform-specific requirements:
  • For iOS: Upload your APNs certificate to OneSignal and enable push notifications in your Xcode project.
  • For Android: Link your Firebase project to OneSignal and add the google-services.json file to your project.
• Template Compatibility: If you run into conflicts with PlayTube’s existing code, wrap your deviceready listener in a DOMContentLoaded handler to ensure it runs after the template’s scripts load:

  document.addEventListener("DOMContentLoaded", function() {
      document.addEventListener("deviceready", onDeviceReady, false);
  });
  

内容的提问来源于stack exchange，提问作者Ahmet Özcan