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 {
}
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
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.
My requirement is to access the mobile camera in iOS and android using the mobile browser.
Using Ionic PWA app can I access mobile camera in iOS and android device browsers? Looking for PWA solution using Cordova (not native solution).
While working on a PWA. I came across the need to access a mobile device's camera/images.(a native app was out of the question). After doing some research I came across this little nugget.
<input type="file" accept="image/*" capture="camera" />
By adding the accept and capture attributes I was able to access my phone's camera and images. I should also point out that you don't need to do anything special with your Server side (Node or PHP). It acts just like a standard file upload input in a browser.
You can open video devices in the web browser...
<video id="cameraPlayer"></video>
// find the video devices (font/back cameras etc)
navigator.mediaDevices.enumerateDevices().then(function (devices) {
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
devices.forEach(function (device) {
if (device.kind === 'videoinput') {
cameraDeviceIds.push(device.deviceId)
}
})
})
// attach camera output to video tag
navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: cameraDeviceIds[currentCameraIndex] } }
}).then(function (stream) {
document.getElementById("cameraPlayer").srcObject = stream
})
If you just want an image you can use an input
<input type="file" accept="image/*" id="inputPhoto" class="hidden" capture="environment" />
// trigger capture
document.getElementById('inputPhoto').click()
// event handler for change
function onInputPhotoChange() {
if (document.getElementById('inputPhoto').files.length === 0) {
return
}
var reader = new window.FileReader()
reader.onloadend = function (event) {
event.target.result
// image data
// note you may need to rotate using EXIF data on a canvas
}
// Read the file into memory as dataurl
var blob = document.getElementById('inputPhoto').files[0]
reader.readAsDataURL(blob)
}
If you want to use the camera in an Ionic PWA app, you can use Capacitor:
https://capacitor.ionicframework.com/docs/apis/camera
I implemented the camera feature and it works 100%:
In addition to the above answers, you will have to add this in your index.html file, for the camera to work on PWA
<script nomodule="" src="https://unpkg.com/#ionic/pwa-elements#1.3.0/dist/ionicpwaelements/ionicpwaelements.js"></script>
The solution given above only make selection of file resticted to i
mages category only. But we want to access camera or audio device here
of browser.
So, to rescue this challege here come api from browser("browsers are
powerfull now yeah").
getUserMedia(:true/false)
Here <media_type> is type of media you want to access like
audio,video
You can set it as {audio: true/false} and {video:true/false}.
But error "NotFoundError" will be returned if media not found.
Here is eg; :>
if('mediaDevices' in navigator && 'getUserMedia' in
navigator.mediaDevices){ const stream = await
navigator.mediaDevices.getUserMedia({video: true}) }
It will run on Android and Ios platform with PWA and on a browser
home.page.ts file
import { Component } from '#angular/core';
import { Plugins, CameraResultType, Capacitor, FilesystemDirectory,
CameraPhoto, CameraSource } from '#capacitor/core';
const { Camera, Filesystem, Storage } = Plugins;
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
async capturedImage(){
const image = await Camera.getPhoto({
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera,
quality: 90
});
console.log('image',image)
}
}
home.page.html
<ion-button expand="full" (click)="capturedImage()"> Captured Image</ion-button>
Accessing the camera via Cordova (and more specifically ionic since you tagged the ionic-framework in your question) is a matter of installing the plugin, whether you're using ionic or not. There are several camera plugins but the one recommended by ionic can be found here:
https://github.com/apache/cordova-plugin-camera
For example to add the plugin to your ionic project, simply run:
ionic Cordova plugin add cordova-plugin-camera
You would use it like this in your component's .ts file (for example):
import { Camera, CameraOptions } from '#ionic-native/camera';
constructor(private camera: Camera) { }
...
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
The above implementation was taken from here, where more details can also be found:
https://ionicframework.com/docs/native/camera/