So I wanted to integrate Firebase Crashlytics in my Ionic App. I followed the installation instructions outlined here. However I am a bit confused at the usage section of the documentation.
The documentation mentions this piece of code:
import { FirebaseCrashlytics } from '#ionic-native/firebase-crashlytics/ngx';
constructor(private firebaseCrashlytics: FirebaseCrashlytics) { }
...
const crashlytics = this.firebaseCrashlytics.initialize();
crashlytics.logException('my caught exception');
Where do I place this piece of code? Anywhere? Is the an example implementation available to look at? Any help will be much appreciated!
You can set it in "app.component" at start up:
constructor(..., private platform: Platform, private firebaseCrashlytics:
FirebaseCrashlytics, ...) {
super();
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
...
this.firebaseCrashlytics.initialise();
...
});
}
dont forget add to providers "FirebaseCrashlytics" in app.module.ts
Related
I'm trying to get the "#capacitor/push-notifications": "^1.0.8" to work.
Everything seems fine and all the solutions i have found looking around are not working for me.
I have tried:
Editing MainActivity.java
Changing Gradle files.
But no luck with the things i found.
Anyone got an idea how to fix this. ( also trying this on an emulator and https server )
I did read that it would not work on https but not sure why.
Do this when your app is starting
import {
PushNotifications,
Token,
ActionPerformed,
PushNotificationSchema
} from '#capacitor/push-notifications';
...
async initPush(): Promise<void> {
if (this.platform.is('hybrid')) {
await this.registerPush();
}
}
private async registerPush() {
const permission = await PushNotifications.requestPermissions();
if (permission.receive === 'granted') {
// Register with Apple / Google to receive push via APNS/FCM
await PushNotifications.register();
} else {
// No permission for push granted
console.log("error");
}
}
Also if you are using Capacitor 3, your MainActivity.java should look like this:
package com.your.package.name;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
public class MainActivity extends BridgeActivity {
}
Has anyone got AdMob-Plus to work successfully with Ionic 4? Using the code below nothing shows up and the promise terminates with error without a message.
import { AdMob } from '#ionic-native/admob-plus/ngx';
constructor(
adMob: AdMob,
platform: Platform){
this.platform.ready()
this.adMob.setDevMode(true);
this.adMob.banner.show({
id: {
android: 'test',
ios: 'test',
}
})
}
I originally went with AdMob Free but didn't want to manually import the iOS SDK for AdMob. The current SDK version throws error ITMS-90809 when submitting to iOS app store.
***EDIT***
The comment below by Naga is the solution
some of native plugins will work just on android and ios and this is one of them.
this plugin will not work on pc even with build it on the browser.
so you have to test it on a native device or an emulator.
I just came across this issue today. The workaround is to just use the Cordova plugin as recommended here
Have you tried with cordova-admob plugin?
It has really great docs at https://ionic-admob.com
ionic plugin add cordova-admob
npm i #ionic-native/admob
You can use it like this:
import { Component, OnInit } from '#angular/core';
import { Platform } from 'ionic-angular';
import { Admob } from '#ionic-native/admob/ngx';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
constructor(private admob: Admob, private platform: Platform) { }
async ngOnInit() {
await this.platform.ready();
await this.admob.createBannerView({
bannerAdId: 'ca-app-pub-xxxx/xxxx',
});
}
}
I'm trying to start with OneSignal SDK on a Ionic with React app, but I can't find any guide for React, all I find is for angular and I'm not pratice of typescript.
Where do I need to initialize OneSignal SDK?
I'm trying to do it in the App.componentDidMount such as:
componentDidMount() {
this.props.oneSignal.startInit(
"XXXXXX-XXX-XXX-X-XXXXX",
"YYYYYYYYYY"
);
this.props.oneSignal.inFocusDisplaying(
this.props.oneSignal.OSInFocusDisplayOption.InAppAlert
);
this.props.oneSignal.handleNotificationReceived().subscribe(() => {
// do something when notification is received
});
this.props.oneSignal.handleNotificationOpened().subscribe(() => {
// do something when a notification is opened
});
this.props.oneSignal.endInit();
}
but the IDE continues giving me errors about this.oneSignal does not exists in the type xxx.
My fault.
I was importing this way:
import { OneSignal } from '#ionic-native/onesignal/ngx';
This the correct way for React.js:
import { OneSignal } from '#ionic-native/onesignal';
I am using Ionic version 5.4.16 and i am trying to close the app by hardware back button with a alert message for confirm to exit. I have checked a lot of tutorials for the same and everywhere i saw 2 ways to achieve that --
this.platform.exitApp();
and
navigator.app.exitapp()
and
navigator.["app"].exitapp();
But none of these option are working in Ionic 5, its not recognizing the function exitApp().
So how to achieve the same if anyone has faced the same issue do suggest, thank you.
To close the app, you must configure the following:
import { Plugins } from '#capacitor/core';
const { App } = Plugins;
App.exitApp();
Try to paste this code.
public unsubscribeBackEvent: any;
ionViewDidEnter() {
this.initializeBackButtonCustomHandler();
}
initializeBackButtonCustomHandler(): void {
this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999, () => {
if(window.confirm('Do you want to exit the app?'))
{
navigator['app'].exitApp();
}
});
}
ionViewWillLeave() {
this.unsubscribeBackEvent.unsubscribe();
}
I hope it's done.
I am investigating using Ionic 4/ Capacitor to target Windows via the Electron option, for an application where I want to use SQLite.
Using the Ionic Native SQLite plugin, which wraps this Cordova plugin, out of the box, as far as I can see, the Windows support is for UWP, and not Desktop, which runs using Electron in Ionic Capacitor wrapper.
My plan, was to see if I could use Electron SQLite package, and then call this from my Ionic application by making a wrapper class for the Ionic native similar to what I used to get browser support by following this tutoral
If I can call the Electron code from my Ionic app, then I can't see why this wouldn't work.
So, my question here is, can I call code (I will add functions to use the SQlite) I add to the hosting Electron application from within the Ionic (web) code? And if so, how?
Thanks in advance for any help
[UPDATE1]
Tried the following...
From an Ionic page, I have a button click handler where I raise an event..
export class HomePage {
public devtools() : void {
let emit = new EventEmitter(true);
emit.emit('myEvent');
var evt = new CustomEvent('myEvent');
window.dispatchEvent(evt);
}
Then within the Electron projects index.js, I tried..
mainWindow.webContents.on('myEvent', () => {
mainWindow.openDevTools();
});
const ipc = require('electron').ipcMain
ipc.on('myEvent', (ev, arg) => {
mainWindow.openDevTools();
});
But neither worked.
I should mention I know very little about Electron. This is my first exposure to it (via Capacitor)
In case someone is interested, this is how I solved this.
Im am using Ionic 4 / Capacitor + Vue 3.
In my entry file (app.ts) I have declared a global interface called Window as follows:
// app.ts
declare global { interface Window { require: any; } }
Then, I have written the following class:
// electron.ts
import { isPlatform } from '#ionic/core';
export class Electron
{
public static isElectron = isPlatform(window, 'electron');
public static getElectron()
{
if (this.isElectron)
{
return window.require('electron');
}
else
{
return null;
}
}
public static getIpcRenderer()
{
if (this.isElectron)
{
return window.require('electron').ipcRenderer;
}
else
{
return null;
}
}
public static getOs()
{
if (this.isElectron)
{
return window.require('os');
}
else
{
return null;
}
}
}
And I use it like this:
//electronabout.ts
import { IAbout } from './iabout';
import { Plugins } from '#capacitor/core';
import { Electron } from '../utils/electron';
export class ElectronAbout implements IAbout
{
constructor() { }
public async getDeviceInfo()
{
let os = Electron.getOs();
let devInfo =
{
arch: os.arch(),
platform: os.platform(),
type: os.type(),
userInfo: os.userInfo()
};
return devInfo;
}
public async showDeviceInfo()
{
const devInfo = await this.getDeviceInfo();
await Plugins.Modals.alert({ title: 'Info from Electron', message: JSON.stringify(devInfo) });
}
}
This is working but, of course, I still need to refactor the Electron class (electron.ts). Probably using the singleton pattern is a better idea.
I hope this helps.
Update
You can communicate from the render process with your main process (index.js) like this:
//somefile.ts
if (Electron.isElectron)
{
let ipc = Electron.getIpcRenderer();
ipc.once('hide-menu-button', (event) => { this.isMenuButtonVisible = false; });
}
//index.js
let newWindow = new BrowserWindow(windowOptions);
newWindow.loadURL(`file://${__dirname}/app/index.html`);
newWindow.webContents.on('dom-ready', () => {
newWindow.webContents.send('hide-menu-button');
newWindow.show();
});
I dug into this yesterday and have an example for you using angular(this should apply to ionic too).
in your service declare require so we can use it
//Below your imports
declare function require(name:string);
Then in whatever function you want to use it in:
// Require the ipcRenderer so we can emit to the ipc to call a function
// Use ts-ignore or else angular wont compile
// #ts-ignore
const ipc = window.require('electron').ipcRenderer;
// Send a message to the ipc
// #ts-ignore
ipc.send('test', 'google');
Then in the created index.js within the electron folder
// Listening for the emitted event
ipc.addListener('test', (ev, arg) => {
// console.log('ev', ev);
console.log('arg', arg);
});
Its probably not the correct way to access it but its the best way i could find. From my understanding the ipcRenderer is used for when you have multiple browsers talking to each other within electron. so in our situation it enables our web layer to communicate with the electron stuff