I've been trying to add a custom splash screen to my ionic2 sidemenu project.But while I run the command "ionic serve -l" on the command prompt,I see the homepage of my app in the local host instead of a splash screen.
Procedure I followed was similar to the one described here:https://www.youtube.com/watch?v=x04rztL2eIs
Firstly I deleted the default ionic icon and the splash.png image in the resources folder along with the splash folder inside the android and ios folders.
Then i've added the .png image of my choice with specified dimensions to the resources folder.
Then I've run the command "ionic resources android --splash" and "ionic resources ios --splash" which automatically created the splash folder inside ios and android folders respectively with the image.
I've set the function "Splashscreen.show();" in app.component.ts
I even set the default value to 3000 in the config.xml file.
Upon doing all this, I ran the command "ionic serve -l" in my command prompt.But it still shows the home page of my sidemenu app rather than the splash screen.
app.component.ts file
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.show();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
config.xml file
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>V2 Test</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="http://ionic.local/*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
<splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
</platform>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="3000"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
<plugin name="cordova-plugin-console" spec="1.0.5"/>
<plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
<plugin name="cordova-plugin-device" spec="1.1.4"/>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
</widget>
I've read on the internet that we require an android emulator and ios emulator for viewing the splash screen.Is it really required ?
Please help me on how to display the custom splashscreen.
I've read on the internet that we require an android emulator and ios
emulator for viewing the splash screen.Is it really required ?
Yes. You need to run in an emulator or an actual device for the splashscreen.
Because it is actually a cordova plugin imported via Ionic Native.
Link here.
Cordova plugins in general are disabled in ionic serve as they are specifically for using features of a mobile device.
You seem to have followed all the steps. Run in an emulator and check.
According to this link in Github,
the splashscreen is automatically shown if the settings are placed in your config.xml.
You have to call Splashscreen.hide().
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
Related
I have developed a website hosted in Apache (say xxx.com) which is working fine in all desktop/mobile browsers. It has few images which is hosted in self (xxx.com) and few images comes from other sites (yyy.com).
I created an Android App using Cordova which points to xxx.com. Deleted everything from Cordova_app/www folder. It works all fine, images (HTML img src) from self (xxx.com) loads fine but images from other domains (yyy.com) are not loading. What is the reason for images not to load from other domains?
Any help would be great
Below is the config.xml details
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.xxx" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>xxx</name>
<content src="https%3A%2F%2Fwww.xxx.com" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<preference name="Fullscreen" value="true" />
<preference name="Orientation" value="portrait" />
<allow-navigation href="https://*/*" />
<platform name="android">a
<allow-intent href="market:*" />
<icon src="res/icon/android/icon.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^5.2.2" />
</widget>
Ok. I figured out the issue. Images from other domain was being called thru http not https. Since xxx.com is running in https, desktop and mobile browsers don't complain about it. But Webview blocks the content. "The content must be served over HTTPS".
I have been experiencing this issue since I tried run my app in a device..
I re-install the cordova-whitelist plugin.
When I try to run the app again from the browser using ionic serve command.
the app calls to the wrong API..
below is the log in my console when I try to login to the app.
POST http://192.168.43.57:8100/auth/login 404 (Not Found)
the $http url declared on my JS code is different from what the console is pointing to.
login controller
$scope.login = function() {
var credentials = {
username: $scope.loginData.username,
password: $scope.loginData.password
}
$auth.login(credentials).then(function() {
$http.get('http://api.mydomain.com/api/login')
.success(function(response){
var user = JSON.stringify(response.user);
localStorage.setItem('user', user);
$rootScope.currentUser = response.user;
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('tabs.download');
})
.error(function(){
var alertPopUp = $ionicPopup.alert({
title: 'Login Failed!',
template: 'Invalid credentials'
});
})
});
}
UPDATE:
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.ticappnew343084" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Test Mobile</name>
<description>
TIC Inspection Report Generator
</description>
<author email="user#example.com" href="http://example.com/">
Author Name
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<allow-navigation href="http://192.168.43.57:8100"/>
</widget>
after reading all my codes I finally found the solution..
it seems that I have forgot to specify the login api url to my app config..
so I added this line of code in my app.js file
.config(function($stateProvider, $urlRouterProvider, $authProvider){
$authProvider.loginUrl = 'http://api.mydomain.com/api/login'
})
then changed the url in my login function from
$http.get('http://api.mydomain.com/api/login')
to
$http.get('http://api.mydomain.com/api/user')
this api retrieves the user information from the server..
I'm working in a windows 7 environment using Cordova 6.4.0 to assemble a Android 6.1.0 app, and links in the app to send a call or email are not working. The app builds on my desktop, and the links work in Chrome. I am testing by loading the app using ADB 1.0.36 to my Galaxy S7.
I have the whitelist and inappbrowser plugins installed, and added the and in my config.xml as you see below. Slight changes were done to mask company information.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.test.app" version="3.0" android-versionCode="3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>AppName</name>
<description>
App Description
</description>
<author email="email#company.com" href="https://www.example.com">
Author Name
</author>
<content src="index.html" />
<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="mailto:*" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="android-minSdkVersion" value="14"/>
<platform name="android">
<icon density="ldpi" src="assets/icons/android/ldpi.png" />
<icon density="mdpi" src="assets/icons/android/mdpi.png" />
<icon density="hdpi" src="assets/icons/android/hdpi.png" />
<icon density="xhdpi" src="assets/icons/android/xhdpi.png" />
<icon density="xxhdpi" src="assets/icons/android/xxhdpi.png" />
<icon density="xxxhdpi" src="assets/icons/android/xxxhdpi.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="~1.3.0" />
<engine name="android" spec="~6.1.0" />
</widget>
Here's an example of the links that are not working.
<div class="cuboxes">
<h2>Group list</h2>
<h3>( <span>800.555.5555</span> )</h3>
Call Us
E-Mail Us
</div>
I've tried changing the phone number format (removing the "-" or adding a "+" at the start of the number), and a number of other configuration changes. This app was built from scratch, and the web pages were added from the previous version of the app. The old version does not build as it does not use gradle.
Any help would be appreciated.
tel: phone_number
Calls the entered
phone number. Valid telephone numbers
as defined in the IETF RFC 3966 are
accepted. Valid examples include the
following:
* tel:2125551212
* tel: (212) 555 1212
The Android browser uses the Phone app to handle the “tel” scheme, as defined by RFC 3966.
Clicking a link like:
2125551212
on Android will bring up the Phone app and pre-enter the digits for 2125551212 without autodialing.
Have a look to RFC3966
UPDATE
see tel link android not working (Galaxy S5)
It seems you need to add a permission, do you have this set?
<access origin="tel:*" launch-external="yes" /> in your config.xml?
UPDATE 2
see “tel”, “sms”, and “mailto” no longer working in Android after upgrading to cordova 3.6.3
1. Add InAppBrowser plugin
**cordova plugin add org.apache.cordova.inappbrowser**
Create custom function in your JS file to open special links within the InApp browser
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
openNativeAppWindow: function(data) {
window.open(data, '_system');
}
};
The place where you are invoking special links like sms or tel then
pass on your custom url with data and let it open the native browser
window which in turn will push the native App to handle the special
urls.
Few example:
<br><br><input type="button" onClick="app.openNativeAppWindow('http://google.com')" value="Open Google"/>
<br><br><a onClick="app.openNativeAppWindow('geo://0,0?q=dallas')" data-rel="external">google maps</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=Bacau')">Geolocation Test</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=34.99,-106.61(Treasure)')">longitude & latitude with a string label</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=1600+Amphitheatre+Parkway%2C+CA')">street address Test</a>
<br><br><a onClick="app.openNativeAppWindow('sms:2125551212')">SMS</a>
<br><br><a onClick="app.openNativeAppWindow('mms:2125551212')">MMS</a>
<br><br><a onClick="app.openNativeAppWindow('tel:2125551212')">Open Phone Dialer</a>
Try with this:
"tel://"
and "mailto://"
I have something like this in my cordova app
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location.href = 'https://mobile.xxx.com';
}
Now I need to use webRTC in this website. And works fine when I run it in mobile browser (chrome 54.0.2840.85).
However, when I use the apk, the webview will not load the webRTC features like camera or micro.
So, in mobile browser it works fine, in webview the rtc will not work.
This is what I have in config.xml
<content src="index.html" />
<access origin="https://mobile.xxx.com" />
<allow-navigation href="https://mobile.xxx.com" />
<allow-intent href="https://mobile.xxx.com" />
<plugin name="cordova-plugin-network-information" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-splashscreen" version="4.0.0" source="npm" />
<plugin name="cordova-plugin-whitelist" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-dialogs" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-statusbar" version="2.2.0" source="npm" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="phonegap-version" value="cli-6.3.0" />
<preference name="permissions" value="none"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
<preference name="show-splash-screen-spinner" value="true" />
<preference name="stay-in-webview" value="true" />
<preference name="orientation" value="portrait" />
<preference name="loadUrlTimeoutValue" value="700000" />
Already tried crosswalk but same problem. How can I have webrtc in cordova webview?
To clarify, I am just looking for a functional demo.
I'm not sure what WebRTC specific features you're using but it isn't fully supported yet for most mobile browsers. See here.
As far as I understood from https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos , to access media we are supposed to make navigator.mediaDevices.getUserMedia
Similarly for mobile app, you will have to specify the permissions in config.xml related to camera or microphone that you are using.
For media access
<plugin name="cordova-plugin-media-capture" spec="1.4.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take videos"/>
<variable name="MICROPHONE_USAGE_DESCRIPTION" value="To record voice while taking videos"/>
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="To provide photo browsing."/>
</plugin>
For camera access
<plugin name="cordova-plugin-camera" spec="2.3.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take photos"/>
</plugin>
For more details of using the above plugins in mobile app, refer :
https://github.com/apache/cordova-plugin-camera
https://github.com/apache/cordova-plugin-media-capture
I have create a phonegap project which platform is android and added splash screen but it is not displaying.
I've followed all the instruction for splash scrren in android from phonegap docs ( http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html )
and added all splash screen in all platforms/android/res/drawable* directories
My config.xml file is
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.vertismirai.docconnect" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>
<icon src="res/drawable/icon.png" />
<platform name="android">
<icon src="res/drawable-ldpi/icon.png" density="ldpi" />
<icon src="res/drawable-mdpi/icon.png" density="mdpi" />
<icon src="res/drawable-hdpi/icon.png" density="hdpi" />
<icon src="res/drawable-xhdpi/icon.png" density="xhdpi" />
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<content src="index.html" />
<access origin="*" />
</widget>
Cordova implements device-level APIs as plugins. Use the CLI's plugin command, described in The Command-Line Interface, to add this feature for a project:
Please use following link for more information
http://docs.phonegap.com/en/3.3.0/cordova_splashscreen_splashscreen.md.html