i am building a mobile Game with Phaser and Ionic and want to add AdMob.
I installed this plugin:
https://github.com/admob-plus/admob-plus
cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx --variable APP_ID_IOS=ca-app-pub-xxx~xxx
In the page that is using AdMob i added this:
declare var admob;
Then i can show an ad by using this:
admob.banner.show({
id: {
ios: 'ca-app-pub-xxx~xxx',
}
});
But i need to change the Banner-Size.
Someone know how can i change the size from
"SMART_BANNER" to "BANNER"?
Thank you very much!
First, run npm uninstall #ionic-native/admob-plus. This wrapper implementation was never finished and is missing several IBannerRequest options necessary to be used propely.
Instead, declare admob:
declare var admob;
Then you can reference the Cordova plugin directly. I was able to get it to work by specifying width and height:
admob.setDevMode(true);
admob.banner.show({
id: 'ca-app-pub-3940256099942544/2934735716', //iOS test ID
size: {
width: 300,
height: 250
}
}).then((res) => {
console.debug('banner show success');
}).catch(err => {
console.error('banner show failure');
});
This allows for the hide method to accept the ID argument it needs to dismiss banner ads properly:
admob.banner.hide('ca-app-pub-3940256099942544/2934735716');
API reference for cordova-admob-plus banners can be found here:
https://admob-plus.github.io/docs/show-banner.html
Have you tried this already?
admob.banner.show({
id: {
ios: 'ca-app-pub-xxx~xxx',
},
size: 'BANNER'
});
In my ionic project, what I have done is following.
const banner = new this.admob.BannerAd({
adUnitId: 'ad-unit-id',
size: AdSizeType.BANNER
});
await banner.show();
Related
I'm using onsignal notifications with my flutter app,I've tested my app on three Samsunge devices and notifcations working perfectly in all these devices when the app on foreground, background, and also when I swiped it away.
after that I tested the app on huawei device which using EMUI 9.0.1 Os
the notifications only works if the app is active or on background
if I swiped it away I can't receiving any notifications.
Any help would be greatly appreciated, I've been struggling with this for a long time. I'll post my code for setting onesignal below
Future<void> initPlatformState() async {
if (!mounted) return;
OneSignal.shared.setLogLevel(OSLogLevel.verbose, OSLogLevel.none);
OneSignal.shared.setRequiresUserPrivacyConsent(true);
OneSignal.shared.consentGranted(true);
var settings = {
OSiOSSettings.autoPrompt: false,
OSiOSSettings.promptBeforeOpeningPushUrl: true
};
OneSignal.shared.setNotificationReceivedHandler((notification) {
this.setState(() {
print('Notifiaction received');
});
});
OneSignal.shared
.setNotificationOpenedHandler((OSNotificationOpenedResult result) {
this.setState(() {
newUrl = result.notification.payload.additionalData['url'].toString();
});
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => WebNotification(newUrl)));
});
// NOTE: Replace with your own app ID from https://www.onesignal.com
await OneSignal.shared
.init("xxxx-xxxx-xxxx-xxxx-xxxx", iOSSettings: settings);
OneSignal.shared
.setInFocusDisplayType(OSNotificationDisplayType.notification);
OneSignal.shared.inFocusDisplayType();
}
You need to set up a service extension. Take a look at our docs on Background Notifications. Also, consider Notification Behavior when designing your implementation
make sure you sue latest version of onesignal
for huwaii use HMS if possible ( onesignal support HMS )
In your root build.gradle, under buildscript, add the following 2 new lines to your existing repositories and dependencies sections
buildscript {
repositories {
// ...
maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
}
dependencies {
// ...
// OneSignal-Gradle-Plugin
classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.8, 0.99.99]'
}
}
Add the following to the top of your app/build.gradle
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'
you need to make user add your app to ignore battry optmztion in huwaii it is (protacted app )
in flutter you can make button and attach it to the app setting ( use these plugin https://pub.dev/packages/app_settings)
When using the Cameara to take a picture with destinationType: this.camera.DestinationType.FILE_URI, the resulting URL will not work to display the image. For example, when attempting to take a photo like this:
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = url;
}, (err) => {
console.log(err);
});
Attempting to display it as <img [src]="imagePath" > will result in an error (file not found).
The problem here is that the URL is in the file:///storage... path instead of the correct one based on localhost.
In previous versions of Ionic, this would be solved by using normalizeURL. This will not work on Ionic 4 (or at least I could not make it work).
To solve this issue, you will need to use convertFileSrc():
import {WebView} from '#ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = this.webview.convertFileSrc(url);
}, (err) => {
console.log(err);
});
Now the image URL will be in the appropriate http://localhost:8080/_file_/storage... format and will load correctly.
See WKWebView - Ionic Docs for more information.
In my case, the following code works with me
const downloadFileURL = 'file:///...';
// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);
In case some gots here looking for the answer on ionic4, check this out
"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build
and look for the answer from #Alok Singh that's how I got it working on ionic4 and even works with livereload
UPDATE december 2021:
You have to install the new Ionic Webview
RUN:
ionic cordova plugin add cordova-plugin-ionic-webview
npm install #awesome-cordova-plugins/ionic-webview
Import it in app.module and your page where you wanna use it:
import { WebView } from '#awesome-cordova-plugins/ionic-webview/ngx';
image = "";
constructor(private webview: WebView){}
Then this will work:
this.camera.getPicture(options).then((imageData) => {
this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
// Handle error
});
And show it in the HTML page:
<img [src]="image" alt="">
I'm using Ionic Photo Viewer to show images in full screen. My HTML is:-
<ion-slides>
<ion-slide col-12 *ngFor="let image of businessImages | async">
<div class="main-slider-image" [defaultImage]="'assets/imgs/default_image_slider.png'" [lazyLoad]="image.thumb400Url" [offset]="100" (click)="openImage(image.originalUrl)">
</div>
</ion-slide>
</ion-slides>
On TypeScript:-
openImage(url) {
this.photoViewer.show(url, "", { share: false });
}
On Android is working like this:-
Click here to see Android version
On the other hand, on the iPhone is working like this:-
Click here to see iPhone version
On the iPhone, the photo viewer doesn't open the photo. I've tried:-
openImage(url) {
this.photoViewer.show(url);
}
But this also didn't work. If you've any idea how to solve this issue please share. Thank you
This issue is really crazy and had to spend lots of time to figure out the solutions. The solutions is all the parameters in the 'options' variable are required.
Follow this:
const options = {
share: true, // default is false
closeButton: true, // default is true
copyToReference: true, // default is false
headers: "", // If it is not provided, it will trigger an exception
piccasoOptions: { } // If it is not provided, it will trigger an exception
};
this.photoViewer.show(url, "", options);
At least I had to revert to 1.1.11 (found from NPM) to show IOS properly. For Android, latest version seemed to work.
Share did not seem to work for IOS in 1.1.11. In Android latest photo-viewer plugin it seemed to work. So now I have:
private viewPhoto(url: string): void {
if (url && url != 'assets/images/profile.png') {
this.photoViewer.show(url, '', { share: this.platform.is('android') });
}
}
And.. I think the correct place to discuss these is https://github.com/sarriaroman/photoviewer/issues.
And another thing, I'm considering to use another plugin, https://github.com/Riron/ionic-img-viewer. Some of the photoviewer issues had a link to this but haven't tried it yet.
I have the same error, and im solve with this
ionic cordova plugin rm com-sarriaroman-photoviewer
ionic cordova plugin add com-sarriaroman-photoviewer#1.1.18
npm install --save #ionic-native/photo-viewer
on your function, if device using ios, decodeURIComponent was the answer
showImage(url,title) {
var options = {
share: true, // default is false
closeButton: true, // iOS only: default is true
copyToReference: true // iOS only: default is false
};
if (this.platform.is("ios")) {
url = decodeURIComponent(url);
}
this.photoViewer.show(url, title, options);
}
I'm trying to disable the toolbar on android but am receiving setMapToolbarEnabled does not exist on type GoogleMap.
this.map.setMapToolbarEnabled(false);
is there another way to do this? I tried this too, and it didn't work.
this.map = this.googleMaps.create(element, {
'backgroundColor': 'white',
'controls': {
'compass': false,
'mapToolbar':false
},
Any ideas?
it works just dont forget to add api in the app.moel.ts in the proovider also
https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/
I am trying to write a ionic app based on the sidemenu basis. One view that I am creating is a login view on which the sidemenu should be deactivated. Therefore I need the dependency variable $ionicView.
This leads to the error
Unknown provider: $ionicViewProvider <- $ionicView <- LoginController
The same error appears when trying to access $ionicConfigProvider.
Login.module.js:
angular.module("Login", ['ionic']);
Login.Controller.js:
angular.module("Login")
.controller("LoginController", function($ionicSideMenuDelegate, $ionicView){
var thisRef = this;
thisRef.Username = "";
thisRef.Password = "";
$ionicView.beforeEnter(function() {
$ionicSideMenuDelegate.canDragContent(false);
});
$ionicView.beforeLeave(function(){
$ionicSideMenuDelegate.canDragContent(true);
});
});
i have the same problem with my ionic sidemenu app.
To fix this problem i followed the ionic documentation:
Ionic View
And update my ionic bundle version lib to the final version.
You can update in bower.json file, change the version to ionic-bower#1.3.1"
See this codepen to help you
<script src="//code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
Code Pen
From what I conclude from the Ionic forum (http://forum.ionicframework.com/t/how-to-use-ionicview-with-ionic-nightly/13666), is that you don't inject $ionicView directly in your controller, but rather use it in your controller.
angular.module("Login")
.controller("LoginController", function($ionicSideMenuDelegate){
$scope.$on('$ionicView.beforeEnter', function() {
//Do whatever you want here
});
var thisRef = this;
thisRef.Username = "";
thisRef.Password = "";
$ionicView.beforeEnter(function() {
$ionicSideMenuDelegate.canDragContent(false);
});
$ionicView.beforeLeave(function(){
$ionicSideMenuDelegate.canDragContent(true);
});
});
Read the documentation on what is possible with $ionicView: http://ionicframework.com/docs/nightly/api/directive/ionView/ under 'View LifeCycle and Events'