I am trying to make sure that my splash screen does not show in iOS phonegap v3
I have tried the following as suggested in their documentation:
Which includes installing the splash plugin
I immediately call hide
navigator.splashscreen.hide()
project layout
¬ res
¬ icon
config.xml
<gap:plugin name="org.apache.cordova.splashscreen" />
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
<param name="ios-package" value="CDVSplashScreen" />
</feature>
Notice there is no splash folder. Yet, the splash screen will always show and also display the default phonegap splash screen rather than skipping it.
Worth mentioning I am building via https://build.phonegap.com
Are you sure that the deviceready event is firing before you are calling navigator.splashscreen.hide()? Calling .hide() immediately after that event is fired should yield the result you are looking for.
Also, you can try replacing the splashscreen plugin altogether for cordova's new alternative:
cordova.exec(null, null, “SplashScreen”, “hide”, [])
The cordova.exec command hooks straight into the different devices native environments.
The parameters explained in more detail:
function(winParam) {} - Success function callback. Assuming your exec call completes successfully, this function will be invoked (optionally with any parameters you pass back to it)
function(error) {} - Error function callback. If the operation does not complete successfully, this function will be invoked (optionally with an error parameter)
"service" - The service name to call into on the native side. This will be mapped to a native class.
"action" - The action name to call into. This is picked up by the native class receiving the exec call, and, depending on the platform, essentially maps to a class's method.
[/* arguments */] - Arguments to get passed into the native environment
I think - stress think - that you can't do this. You could fake it perhaps by using a splash screen of a single color that matches the color of your app.
Related
I've used a plugin to try and lock the screen orientation within my PhoneGap app:
cordova-plugin-screen-orientation
Within my app page I have the following code extract:
// Once DOM is loaded...
$(document).on('pagecreate', function() {
window.screen.lockOrientation('portrait'); // Seems to set variable but not LOCK screen?
var orient = screen.orientation; // Works
alert(orient); // Works
window.addEventListener("orientationchange", function(){ // Works
alert(screen.orientation); // e.g. portrait // Works
});
... Other code etc.
As you can see from the comments the plugin seems to be installed correctly as I am successfully calling portrait-primary, landscape-secondary etc. as I rotate my phone. The issue seems to be the function isn't LOCKING the screen?
Any help would be GREATLY appreciated!
Try setting this attribute in your config.xml.
<preference name="Orientation" value="portrait" />
I've read every question both here and on Google and can't for the life of me figure this one out. I'm simply trying to use Phonegap to take a picture and store the URI. I'm trying to use the example from the docs here. Here's the snippet where I'm trying to open the camera.
this.getPicture = function() {
navigator.camera.getPicture(self.onBackSuccess, self.onFail, {
quality: 20,
destinationType: Camera.DestinationType.FILE_URI
});
};
What I've already checked/verified
Phonegap/Cordova itself is installed and working fine. I can build my app with no problems.
navigator.camera above is definitely defined. I can follow the code down and the "getPicture" function is being called, but that doesn't pull up the Camera, either on the device, ADB emulator, or Ripple browser emulator.
Neither my success nor my error callback are ever being called. However, when I look at those variables in the getPicture function, I can see the appropriate function stored in those variables.
I have installed the Phonegap camera plugin. When I run phonegap local plugin list, one of the results is org.apache.cordova.camera 0.3.4 "Camera"
My config.xml file contains both the lines <feature name="http://api.phonegap.com/1.0/camera"/> and <gap:plugin name="org.apache.cordova.camera" />. Not sure if that's relevant, since the plugin is already installed.
My AndroidManifest.xml file contains the lines <uses-permission android:name="android.permission.CAMERA" />, <uses-feature android:name="android.hardware.camera" />, and <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />.
When I click on the button that calls this function, it prints out this:
[20,1,1,-1,-1,0,0,false,false,false,null,0]
which is the array of cameraOptions that gets generated/used by the camera.getPicture function.
Everything I've been able to find just takes for granted the fact that calling navigator.camera.getPicture(success, failure, options); is going to open the camera, so there doesn't seem to be much info on solving my particular problem. Any pointers here would be much appreciated.
Edit: I am seeing an error in the console that looks like it may be related:
Could not find cordova.js script tag. Plugin loading may fail.
Edit: I don't think my last edit is relevant. That has to do with the loading of the plugin files themselves, and I can see the Camera.js file in the plugins folder when I load my app. I can put a breakpoint in the cameraExport.getPhoto function and it does go in there. Then it calls
exec(successCallback, errorCallback, "Camera", "takePicture", args);
which prints out the array I mentioned before and does nothing else.
without seeing all of your code, my guess is that the use of this. and self. is causing the issue. Try something like this:
function getPicture() {
navigator.camera.getPicture(onBackSuccess, onFail, {
quality: 20,
destinationType: Camera.DestinationType.FILE_URI
});
};
function onBackSuccess() {
//some code
}
function onFail() {
//some code
}
I've built and app for android with meteor and phonegap/cordova:
https://play.google.com/store/apps/details?id=com.idqkd3gsl4qt51152xgy
It works decently OK (especially given that I'm not really a programmer), but one UX issue I've been struggling with is that the app will not consistently close when pressing the back button on my phone. Every once in a while it works on the first press, but most of the time I have to jam it 5-6 times in a row to get the app to close.
I'm using the latest iron-router. The rest of the packages I'm using don't seem particularly relevant to this issue but they are as follows just in case:
standard-app-packages
coffeescript
natestrauser:font-awesome#4.1.0
accounts-password
aldeed:autoform
aldeed:collection2
nemo64:bootstrap
less
alanning:roles
joshowens:accounts-entry
mrt:accounts-admin-ui-bootstrap-3
mizzao:jquery-ui
iron:router
sacha:spin
raix:push
mizzao:bootboxjs
meteorhacks:kadira
bootstrap3-media-query
the repo can be seen here: https://github.com/The3vilMonkey/BrewsOnTap
I can't specify the exact reason for this issue other than it seems like at startup there is a sort of redirect happening with cordova apps. Best solution I've found is to catch the popstate event and when you get back to the beginning exit or suspend the application.. I prefer suspend that way when the user comes back to the app it doesn't start it's lifecycle from the beginning.
if(Meteor.isCordova){
Meteor.startup(function(){
window.onpopstate = function () {
if (history.state && history.state.initial === true){
navigator.app.exitApp();
//or to suspend meteor add cordova:org.android.tools.suspend#0.1.2
//window.plugins.Suspend.suspendApp();
}
};
});
}
One caveat that got me when I first used this was redirecting to a login page if the user wasn't logged in.. If you're using this method in an app that does this, you'll want to switch to rendering the login page in place rather than redirecting otherwise your app will exit/suspend immediately.
In my case, I made a mix of the two previous answers so that it works well.
document.addEventListener("backbutton", function(){
if (history.state && history.state.initial === true) {
navigator.app.exitApp();
} else {
history.go(-1);
}
});
While Kelly's answer does work, it did not end up being functionally correct for my particular situation. An important point to note about that solution is that it will exit as soon as the back button causes you to return to the initial page and not when you press the back button while on the initial page.
Ultimately I used cordova's backbutton listener to see if the backbutton was pressed:
if Meteor.isCordova
Meteor.startup ->
document.addEventListener("backbutton", ->
if document.location.pathname is "/"
navigator.app.exitApp()
else
history.go(-1)
and then if I am at the root of my application I exit/suspend, otherwise I simply go back in the history.
Using the backbutton event listener does seem to override it's default functionality so calling history.go(-1) was necessary in my case.
Also note that this solution would break if you want a true history that could go back through the history (potentially hitting the root of your application multiple times) before existing on the initial entry point. A combination of my answer and Kelly's might work for that. I find that while that might be the expected behavior for websites, it isn't really for mobile apps.
Here's a meteor package available to do this for you as well:
https://github.com/remcoder/fix-back-button-android
EDIT:
I actually went ahead and forked that repo, fixed the cordova plugin dependency issues, and used Kelly's code instead of the code from the original repo, find my fork here:
https://github.com/tripflex/fix-back-button-android
Or install in Meteor using:
meteor add tripflex:fix-back-button-android
I can confirm it works correctly, when adding via GitHub method described below, and using Kelly's answer for detecting the root page (do not use the example on the GitHub repo).
I'm no meteor expert as well (but am a full time dev), but going off of Kelly's answer, I would move the check for isCordova inside the Meteor Startup (as i'm sure you will have more startup code as your app progresses)
Meteor.startup(function(){
// Mobile specific code
if(Meteor.isCordova) {
window.onpopstate = function () {
if (history.state && history.state.initial === true) {
navigator.app.exitApp();
//or to suspend meteor add cordova:org.android.tools.suspend#0.1.2
//window.plugins.Suspend.suspendApp();
}
};
}
// Any other startup code below here
});
EDIT: If you decide you want to use the cordova suspend package, it will not work like most cordova plugins in Meteor due to the plugin not existing in npm, so this will NOT work:
meteor add cordova:org.android.tools.suspend#0.1.2
You MUST add it like this using the GitHub repo:
meteor add cordova:org.android.tools.suspend#https://github.com/Lamerchun/org.android.tools.suspend.git#0dbb52cca0244ba22a8c7975895f0f45d2e9a4a9
I noticed that I can't use relative paths in my Cordova project when referencing them in object tags. For example, this works on the browser but not in Phonegap:
<object id="pause" type="image/svg+xml" data="img/icons/pause.svg" class="icon clickable hidden"></object>
However, this functions perfectly fine in both Phonegap and the browser:
<img id="pause" src="img/icons/pause.svg">
Using a remote path also works in Cordova, but everything falls apart when I use a local/relative one. Here's what Android spits back:
<img src="file:///android_asset/webkit/android-weberror.png" align="top">
<h2>Webpage not available</h2>
<p>The webpage at file:///android_asset/www/img/logo.svg could not be loaded because:</p>
<!-- The net::ERR_FILE_NOT_FOUND is replaced by a localized error string -->
<p>net::ERR_FILE_NOT_FOUND</p>
Unfortunately, I can't use a remote location (since that won't let me execute the onclick and onmousedown events inside the SVGs). Also, avoiding <object> tags altogether is not an option, since I need to execute and change some of the code inside the objects (like changing the fill color).
Is this a bug? If not, what can I do to get my code to work?
A jacky workaround to this is reading the file manually using Javascript and putting the contents directly into the data attribute so that it reads <object data="data:image/svg+xml;utf8,[FILECONTENTS]"></object>. It's not elegant, but it works fine.
I would like to hide the softkeyboard onBlur.
Therefore, I found the softkeyboard plugin, and I suppose I installed it properly, following numerous threads posts.
However, this is the first time I use a plugin for cordova, and I get this error, so I guess something is missing:
Cannot read property 'SoftKeyBoard' of undefined
This refers to the js call in the html file:
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
$('#keyboard').toggle(softkeyboard.show, softkeyboard.hide);
Does not window.cordova.plugins exist?
In order to set up the plugin, I did the following:
copy SoftKeyBoard.java to src/org.apache.cordova.plugins.SoftKeyBoard. I also rewrote the first line package accordingly.
copy the js file, and link it to the html file
add this line to res/xml/config.xml:
<plugin name="SoftKeyBoard" value="org.apache.cordova.plugins.SoftKeyBoard" />
In this XML, it's located in <cordova><plugins>
Is there anything else I should have done?