Phonegap 3.0 InAppBrowser - Provides no way for user to close - plugins

I had inApBrowser working in my app just fine... however, I upgraded some things and now it opens the URL without any way of closing it. You have to kill the app.
I have tried many variations of this: window.open('http://cnn.com','_blank','location=yes,toolbar=yes');
myconfig.xml has:
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
I get no errors... the page opens... but there is no way to close and return to the app. I have seen a lot of folks putting solutions for URL recognition and making the window close... but I need the childBrowser plugin method... where the user can close the window when he/she is finished viewing the page.
Phonegap 3.0 -
JqueryMobile 1.2 -
IOS 7.0.2 -
xCode 5.0 -
Any help would be greatly appreciated!

Your syntax looks okay, but give these code snippets a try:
Pure JavaScript:
var ref = window.open('http://cnn.com', '_blank', 'location=yes,toolbar=yes');
HTML + JavaScript:
CNN Link
Also, check that you have correctly installed the InAppBrowser plugin (PhoneGap/Cordova 3.0+ need it to be installed separately via the command line). Your config.xml file looks correct, but just make sure that the rest of the plugin is installed properly.
You can use the following commands to list all the installed plugins in your project...
Using Cordova: cordova plugins
Using PhoneGap: phonegap local plugin list
You can also just go to your Desktop, navigate to the 'plugins' folder within your project and check that there is a folder named 'org.apache.cordova.inappbrowser' or 'org.apache.cordova.core.inappbrowser' inside.
To install the InAppBrowser plugin (if necessary)...
Using Cordova: cordova plugin add org.apache.cordova.inappbrowser
Using PhoneGap: phonegap local plugin add org.apache.cordova.inappbrowser
From your description, it sounds like your page is opening within the app's webview, instead of the InAppBrowser window. This is the behaviour you would normally get if you used '_self' instead of '_blank'. Hopefully something here will help fix it.

If you are using PhoneGap Build then you need to use different syntax i.e. (see plugin info):
<gap:plugin name="org.apache.cordova.inappbrowser" />
See also PGB plugin repository. It seem to be up-to-date now. You can see a simple test application for a working version.
Note that this might not be working if you are building yourself (locally on your computer). Use instructions by wicketyjarjar if you are building locally.

The inAppBrowser did not work with Phonegap 3.0.0, and had to change this in config.xml to make it work on both ios and Android :
<plugin name="inAppBrowser">
to
<gap:plugin name="org.apache.cordova.inappbrowser" />
Also if you would want to include emailcomposer use the below line in config.xml
<gap:plugin name="de.appplant.cordova.plugin.email-composer" />
and in the Javascript file add the below lines:
var ops = {
callback: function (result) {
navigator.notification.alert(result);
},
subject: "Look at this photo",
body: "Take a look at <b>this</b>:",
toRecipients: ["example#email.com", "johndoe#email.org"],
ccRecipients: [],
bccRecipients: [],
isHTML: true,
attachments: ["_complete_path/image.png"]
}
function mail(name, url) {
window.plugin.email.open({
to: [],
cc: [],
bcc: [],
subject: name,
body: url,
isHtml: true
});
}

I had the same problem. In my case it was caused by forgetting to include the cordova.js script.
<script type="text/javascript" src="cordova.js"></script>

Related

Flutter IOS Duplicate plugin key: SocialSharePlugin

I am using two different share plugins in my flutter project. One plugin social_share_plugin and other is social_share . Both are used to share content on social media. Due to limitation of one plugin i have to use both. But i am getting 'Duplicate plugin key: SocialSharePlugin'error when i run the project on IOS device. it is working fine on android device.
var s = await SocialSharePlugin.shareToFeedFacebookLink(
quote: 'Meeting',
url: shareLink,
);
and other plugin is used like
await SocialShare.shareTwitter(
shareText,
hashtags: ["meetup"],
url: shareLink,
trailingText: '#meeting',
);
The issue is social_share uses the same class name as social_share_plugin (they both have SocialSharePlugin). To resolve this, I forked the social_share package and changed every instance of SocialSharePlugin to SocialShare, including the file names.
Here's my forked repo if you would like to use or view: https://github.com/kaarens93/social_share
(I have a lot of 'unresolved reference' errors that I'm still in the process of fixing but unless you want to build the package, you shouldn't run into any issues implementing into your project)
I ended up remove SocialShare completely from the project, and use flutter_share_me and SocialSharePlugin. I found Social_Share_plugin is the only one that works with Ins (and Facebook). None of the other packages worked in this aspect. However, with version 0.4 of SocialSharePlugin you need add Facebook api token to your info.plist file since the FBSDK used by SocialSharePlugin requires this token since version 13+. This change was not documented by 0.4 SocialSharePlugin.

window.Ionic.WebView.convertFileSrc not working in ionic 3

I am trying to display image selected from camera/gallery using cordova-plugin-camera plugin and used window.Ionic.WebView.convertFileSrc() for Rewriting file:// due to wkwebview.
It works fine in android platform but in iOS platform it gives error for Content Security Policy
For example I am getting
file:///Users/CN339/Library/Developer/CoreSimulator/Devices/XXXXXXX/data/Containers/Data/Application/XXXXX/Library/NoCloud/cdv_photo_002.jpg
from camera plugin and after using window.Ionic.WebView.convertFileSrc on previous local url I am getting below error.
Content Security Policy error
I tried a lot of methods to load local files such images or videos. I tried using
normalizeUrl (from ionic-angular)
regex and replace the local file path: path.replace(/^file:///, '')
window.Ionic.WebView.convertFileSrc()
None of above worked for me. The only way I could load a local file was using
window['Ionic']['WebView'].convertFileSrc(path);
Hope it works as you want. I have only tested it on Android
UPDATE
You can use win.Ionic.WebView.convertFileSrc(), like third bullet, only if you declare win: any = window.
To define win as any did the trick for me - https://stackoverflow.com/a/55934321/10243902
Just had the same problem on iOS after ionic-webview suddenly stopped working, so I uninstalled and reinstalled the plugin:
cordova plugin remove cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview
window.Ionic.WebView.convertFileSrc started working like a charm again.
this.tempSchemeImagePath = window['Ionic']['WebView'].convertFileSrc(nativeURL);

Specifying app_id and app_name for facebookConnect in a multi-device hybrid app in VS2013 & W8.1

I've been banging my head on this one for a while now.
How do I specify the app_id and app_name when trying to use the facebookConnect plugin in a Multi-Device Hybrid app in Visual Studio 2013?
If I create a new solution using the CLI approach; something similar to:
cordova create MyTest <blah> <blah> <blah>
I can probably use the CLI to add the plugin with a command similar to: (Untested and the command might be slightly wrong)
cordova plugin add com.phonegap.plugins.facebookconnect
BUT...
How do I add it when I've created a Mutli-Device Hybrid app directly from within Visual Studio?
I've tried 2 approaches to get this to install:
Method 1:
Create a "plugin" directory
Download the code from
https://github.com/Wizcorp/phonegap-facebook-plugin and extract into
the plugin directory
Compile/build
This seems to "work" but then bombs out with:
Variable(s) missing: APP_ID, APP_NAME
Method 2:
Open the config.xml file
Add in the following "vs:feature" tag:
Compile/build
<vs:features>
<vs:feature>com.phonegap.plugins.facebookconnect</vs:feature>
This method also seems to "work", showing a line in the build Output window:
Calling plugman.fetch on plugin "com.phonegap.plugins.facebookconnect"
But then it too bombs out with the ever annoying:
Variable(s) missing: APP_ID, APP_NAME
Can someone PLEASE tell me where to add these two variables in so that the thing builds???
I have the values available.
I can't seem to use the CLI to install this plugin into my solution because I get an error like:
Current working directory is not a Cordova-based project
Thanks for any help you can offer.
I'd recommend going with method 1 since it provides greater flexibility to configure your plugin. That being said, what you are running into is a common issue with the FacebookConnect plugin when it is added manually instead of using the cordova CLI. To add the app ID and app name, do the following as documented here.
In plugin.xml, find the below lines <preference name="APP_ID">
<preference name="APP_NAME"> and modify them to <param name="APP_ID" value="<id of your app>" />
<param name="APP_NAME" value="<name of your app>" />
This will get you past the error.
However, the plugin is written in Java and the references are not precompiled. So, you will run into issues like com.facebook.blah not found. To get past these additional compilation issues, follow the instructions here, which let you build the plugin dependencies without eclipse.
To use the CLI to install the plugin, you need to run the commands from <projectRoot>\bld\debug\platform\<yourplatform> where the cordova projects are created.
What you probably miss is the renaming of the element from preference to param
in plugin.xml change preference to param for app name and app id an also enter their value.
<preference name="APP_NAME">
to
<param name="APP_NAME" value="<name of your app>" />

SAPUI5 Local Installation

I am trying to install SAPUI5 on my local machine using XAMPP.
I copied the files to htdocs.
Starting localhost in Chrome I get the SAPUI5 SDK - Demo Kit Overview page.
After that I copied a sample code of the "HowTo in 20 seconds" code to notepad and saved it as HTML-Document.
Running this file in the browser only brings a white page.
I looked for the developer tools in Chrome and saw something like this:
"failed to preload 'sap.ui.core.library-preload': Not Found - sap.ui.ModuleSystem"
I hope you can help me fix this problem, so I can start with SAPUI5
Useful links regarding this topic, which I could recommend:
Describes how to run UI5 App locally: http://scn.sap.com/community/developer-center/front-end/blog/2014/01/13/ui5-mobile-splitapp-boilerplate
Describes to local Development with Eclipse: http://blog.mypro.de/2014/01/14/ui5-boilerplate-with-eclipse/
They both use the UI5 SplitApp Boilerplate from Github, which is an example app, with a base application structure: https://github.com/6of5/UI5SplitApp-Boilerplate
Perhaps this helps you to start local developement
Open a new notepad file. Save below code with html extension, eg: helloworld.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 in 20 Seconds</title>
<!- 1.) Load SAPUI5, select theme and control library ->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!- 2.) Create a UI5 button and place it onto the page ->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function() { $("#btn").fadeOut(); });
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(document).ready(function() {
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press: function(){ $("#btn").fadeOut(); }
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!- This is where you place the UI5 button ->
<div id="uiArea"></div>
</body>
</html>
Now open the file with any modern browser. FYI, We don't need any server to test this
You can configure Eclipse to work with SAPUI5 and use Apache Tomcat to run your application when working in a local environment.
Install Eclipse - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2
Install the Java Runtime Enviromnet - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
Install Apache Tomcat - http://tomcat.apache.org/download-80.cgi
Install SAPUI5 tools in Eclipse
Eclipse > Help > Install New Software
Add a new site in the "Available Software Sites" with the url:https://tools.hana.ondemand.com/luna
Select the new site in the Work with selection.
Expand the UI Development Toolkit for HTML5 & Select UI Development Toolkit for HTML5 (Developer Edition)
Next & Install (An Eclipse restart may be required)
Now that you have the SAPUI5 Tools installed. If you create a new Project, you now get a SAPUI5 Application Development option available.
Configure Apache Tomcat in the Servers
Add a Server, Window > Preferences > Server > Runtime Environment > Add
Select Apache Tomcat 8.0( or whichever version you are using) & select Next.
Select Tomcat installation directory & Finish.
Now you are all set to go. Create a new SAPUI5 Project(say myProject), add some code. To run it on tomcat, right-click on the Project, Run As > Run On Server. Select your Tomcat server, Next & Finish. You project will be up & running on your server at http://localhost:8080/myProject/
The "failed to preload" messges should not be fatal errors; the library preload files are an optional bundled optimization in order to reduce the number of HTTP requests.
https://github.com/SAP/openui5/issues/119
I think you can just ignore this warning. And I encounter Cross origin requests problem when loading Component.js, solved this problem using python -m SimpleHTTPServer. What you need is just a server , choose whatever you like.
Daniel I recommend you SAPUI Walkthrough as a starting point. This is a step by step guide / tutorial on how to build SAPUI5 applications, contains explanation about the cornerstones and best practices. For the basics you will only need an editor and a browser (no webserver). This git repo contains all the Walkthrough steps as separate branches.
SAP UI5 is only bunch of UI libraries that are used to develop your front end, just like other libraries like jQuery. Now, the question is how do you configure your Apache to serve these files? This is a basic Apache configuration to serve files, this page might be a good starting point.

Can not make GWT application work as Chrome packaged app, probably due to CSP

Keep getting CSP errors: "Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"
The problem is probably due to HTML files generated by GWT which contain inline JS.
UPD: Changing to manifest version 1 helped, but this is a temporary workaroud, as Chrome 21 complains that it will no longer be supported.
UPD2: <add-linker name="xsiframe" /> does not help either
GWT 2.5.1 has finally fixed this problem. The release notes documenting this are here:
https://developers.google.com/web-toolkit/release-notes#Release_Notes_2_5_1
and they state that:
"Apps built with DirectInstallLinker should work in a page where inline scripts are forbidden (e.g. a Chrome extension)"
This means that it is now possible to use DirectInstallLinker to link your Chrome packaged app in a manner that satisfies the new security requirements of manifest version 2 regarding inline scripts. That is, by using DirectInstallLinker to link your app with GWT 2.5.1 selected as your GWT version, GWT will not place any script elements inline in its generated Javascript, and thus the new manifest version 2 requirement that there be no inline scripts will not be violated.
I have found that SingleScriptLinker also seems to work for my own app; however, Issue 7685 warns against using the SingleScriptLinker because "This generates a $doc.write line which is forbidden in packaged apps." I am using DirectInstallLinker myself.
Here is the Javadoc for DirectInstallLinker:
http://google-web-toolkit.googlecode.com/svn/javadoc/2.5/com/google/gwt/core/linker/DirectInstallLinker.html
To use this linker, you can include the following in your *.gwt.xml file:
<define-linker name="dil" class="com.google.gwt.core.linker.DirectInstallLinker"/>
<add-linker name="dil" />
(dil can be replaced by anything you choose, so long as there are no dashes or other illegal characters).
You will need to select GWT 2.5.1 as your version of GWT. If you're using an older version of GWT in an out-of-date version of Eclipse such as Ganymede (as I was), you'll have to upgrade to at least Helios and then import your project to your new Eclipse environment. The archive URLs for the Google Plugin for Eclipse that can be used for the latest three Eclipse versions can be found here:
https://developers.google.com/eclipse/docs/download
With the above in place, you should be able to set
"manifest_version": 2
in your manifest.json file and not experience any errors due to GWT-generated inline Javascript. This should allow your Chrome Web app to be acceptable to the Chrome Web Store (which now requires manifest version 2 for any new apps or for updates to present apps), so long as there are no other issues.
EDIT: new GWT bug reported: http://code.google.com/p/google-web-toolkit/issues/detail?id=7685, see also http://gwt-code-reviews.appspot.com/1838803/ which is related to this bug
In other words, it looks like, when fixed, you'll simply have to use the DirectInstallLinker (<add-linker name='direct_install'/>).
In the mean time, IIUC, you'd have to extend DirectInstallLinker and:
override getJsInstallLocation to return a copy a installLocaltionIframe.js without the $wnd part
override getModulePrefix to prepend var $wnd = $wnd || window.parent; to what's generated by super.getModulePrefix
I don't know CSP enough to give a complete answer, but the xsiframe linker is "customizable": create a class that extends com.google.gwt.core.linker.CrossSiteIframeLinker and overrides the appropriate methods, then use with a <define-linker> and <add-linker> in your *.gwt.xml.
For instance, getJsInstallLocation defaults to com/google/gwt/core/ext/linker/impl/installLocationIframe.js but there's a com/google/gwt/core/ext/linker/impl/installLocationMainWindows.js alternate implementation.
Similarly (and probably more importantly), getJsInstallScript defaults to com/google/gwt/core/ext/linker/impl/installScriptEarlyDownload.js but there's also a com/google/gwt/core/ext/linker/impl/installScriptDirect.js alternate implementation.
See http://code.google.com/p/google-web-toolkit/source/browse/trunk/dev/core/src/com/google/gwt/core/linker/CrossSiteIframeLinker.java#204, http://code.google.com/p/google-web-toolkit/source/browse/trunk/dev/core/src/com/google/gwt/core/ext/linker/impl/ and http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/core/Core.gwt.xml
Thanks to Thomas Broyer's advice. I created this GWT Linker. Now my GWT application runs perfectly as an Chrome Application (Tested on Chrome 32 and GWT 2.5.1).
public class CSPCompatibleLinker extends DirectInstallLinker {
#Override
protected String getJsInstallLocation(LinkerContext context) {
return "com/google/gwt/core/ext/linker/impl/installLocationMainWindow.js";
}
}
Dont forget to declare the Linker into your*.gwt.xml file:
<define-linker name="csp" class="com.sfeir.linker.CSPCompatibleLinker"/>
<add-linker name="csp" />
Manifest version 2 does not allow inline scripts. You need to make sure all scripts are linked instead and no JavaScript in HTML elements.