How to integrate?

[NickHatBoecker]

Hey there,

nice package! I really need to integrate OneSignal to my Quasar App (no PWA needed). Unfortunately I can not get it to work.

I have a boot file named init.js where I put the following code:

import Vue from 'vue'

export default async ({ store, app }) => {
    ...
    if (store.getters['auth/isAuthenticated']) {
        app.$oneSignal.setup(process.env.ONESIGNAL_APP_ID)
    }
    ...

But app.$oneSignal is undefined when starting the app and throws:

boot error: TypeError: Cannot read property 'setup' of undefined

I added the package and executed quasar ext invoke onesignal. In my quasar.extensions.json is a new empty object named onesignal.

Can you please help me? How do I continue?

Best regards Nick

[aimon7]

Hey @NickHatBoecker

I also try to figure out how to connect OneSignal to Quasar. Did you have any luck with the implementation of this extension or you tried a different path?

[NickHatBoecker]

Hey @aimon7

I indeed got it working with Quasar and OneSignal, but it was a hell of a ride.

First I followed the official OneSignal tutorial for iOS/Android. After that I extended the files for Quasar. I wrote about the extended iOS implementation on my blog, but it's in German. Maybe you can figure it out with the code examples (and I hope I'm allowed to post this here): https://blog.nick-hat-boecker.de/onesignal-push-notifications-quasar/

The only problem I could not fix is, that the OneSignalSecret is committed to the git repository in AppDelegate.swift following the official OneSignal tutorial for iOS. It would be nice if AppDelegate could load any configuration file, but I don't know how :(

If you have any questions, feel free to write me.

Best regards Nick

[aimon7]

Thx for the quick answer @NickHatBoecker .

Will check your blog (although I don't speak German (google translate ftw!!!)).

Would you say that Android (with cordova in quasar) will require the same steps as Capacitor?

Wish you the best, Ioannis

[aimon7]

If by any means someone comes here, I solved my problem by doing the following: I added in src-cordova/package.json the following:

"cordova": {
      "plugins": {
              "onesignal-cordova-plugin": {}
       },
 },
 "devDependencies": {
        "onesignal-cordova-plugin": "^2.11.3"
 }

After that, i made a onesignal.js file inside the boot folder and I also added it in quasar.conf.js in boot section. In that file I used the next lines of code:

export default async ({app, router, store, Vue}) => {
    document.addEventListener('deviceready', async () => {
        if (window.plugins.OneSignal) {
            //START ONESIGNAL CODE
            //Remove this method to stop OneSignal Debugging
            // window.plugins.OneSignal.setLogLevel({logLevel: 6, visualLevel: 0});
            const notificationOpenedCallback = (jsonData) => {
                console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
            };
            // Set your iOS Settings
            // const iosSettings = {};
            // iosSettings["kOSSettingsKeyAutoPrompt"] = false;
            // iosSettings["kOSSettingsKeyInAppLaunchURL"] = false;

            window.plugins.OneSignal
                .startInit('YOUR ONESIGAL ID')
                .handleNotificationOpened(notificationOpenedCallback)
                // .iOSSettings(iosSettings)
                .inFocusDisplaying(window.plugins.OneSignal.OSInFocusDisplayOption.Notification)
                .endInit();

            // The promptForPushNotificationsWithUserResponse function will show the iOS push notification prompt.
            // We recommend removing the following code and instead using an In-App Message to prompt for notification permission (See step 6)
            // window.plugins.OneSignal.promptForPushNotificationsWithUserResponse(function (accepted) {
            //     console.log("User accepted notifications: " + accepted);
            // });
            //END ONESIGNAL CODE
        }
    });
}

[NickHatBoecker]

@aimon7 Nice that the cordova plugin worked for you. I used capacitor, so the plugin didn't work for me.

For android I created a Plugin OneSignalPlugin.java with the following code:

package com.mynamespace.myproject;

import com.getcapacitor.JSObject;
import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;

import com.onesignal.OneSignal;
import android.util.Log;

@NativePlugin
public class OneSignalPlugin extends Plugin {
    private static final String ONESIGNAL_APP_ID = "YOUR_ONE_SIGNAL_ID";
    public static String ONESIGNAL_USER_ID = "";
    public static boolean ONESIGNAL_ENABLED = false;

    public void load() {
        // Enable verbose OneSignal logging to debug issues if needed.
        OneSignal.setLogLevel(OneSignal.LOG_LEVEL.VERBOSE, OneSignal.LOG_LEVEL.NONE);

        // OneSignal Initialization
        OneSignal.initWithContext(getContext());
        OneSignal.setAppId(ONESIGNAL_APP_ID);

        if (OneSignal.getDeviceState().isSubscribed()) {
            ONESIGNAL_USER_ID = OneSignal.getDeviceState().getUserId();
            ONESIGNAL_ENABLED = OneSignal.getDeviceState().isSubscribed();
            Log.d("ONESIGNAL_USER_ID", ONESIGNAL_USER_ID);
        }
    }

    @PluginMethod
    public void getStatus(PluginCall call) {
        JSObject ret = new JSObject();
        ret.put("notificationsEnabled", ONESIGNAL_ENABLED);
        ret.put("oneSignalId", ONESIGNAL_USER_ID);
        call.success(ret);
    }
}

And in MainActivity.java I referenced it like this:

package com.mynamespace.myproject;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import com.mynamespace.myproject.OneSignalPlugin;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(OneSignalPlugin.class);
    }});
  }
}

In any Vue component you can then access

const { OneSignalPlugin } = window.Capacitor.Plugins
const { notificationsEnabled, oneSignalId } = await OneSignalPlugin.getStatus()

Hope this helps anyone as well

[timsayshey]

Thanks @aimon7!! Your solution also works with Capacitor 🥇

[sbellver]

@NickHatBoecker where did you save these files?

Have you solution for iOS/web?

[sbellver]

Hi! To use OneSignal into capacitor, this is the package.json into src-capacitor

{
  "name": "APP",
  "version": "0.0.1",
  "description": "App",
  "author": "Dev",
  "private": true,
  "dependencies": {
    "@capacitor/android": "2.4.7",
    "@capacitor/cli": "^2.0.0",
    "@capacitor/core": "^2.0.0"
  },
  "devDependencies": {
    "onesignal-cordova-plugin": "^2.11.3"
  },
  "cordova": {
    "plugins": {
      "onesignal-cordova-plugin": {}
    }
  }
}

Then, into src-capacitor, we must to execute yarn add onesignal-cordova-plugin

And then quasar build

:)